@extends('template.master')

@section('content')
    <div class="d-flex gap-2">
        @if ($canCreate)
            <button class="mb-4 btn btn-primary add">Tambah Part Request</button>
        @endif
        <button class="mb-4 btn btn-success filter-btn" data-status="pending">Pending</button>
        <button class="mb-4 btn btn-primary filter-btn" data-status="complete">Completed</button>
        <button class="mb-4 btn btn-primary filter-btn" data-status="ongoing">On Going </button>
        <button class="mb-4 btn btn-primary filter-btn" data-status="rejected">Rejected</button>

    </div>
    <div class="card">
        <div class="card-body">
            <table class="table table-striped data-table">
                <thead>
                    <tr>
                        <th>Sites</th>
                        <th>Tanggal</th>
                        <th>Sparepart</th>
                        <th>Status</th>
                        <th>User</th>
                        <th>Update Status</th>
                        {{-- <th>Content</th> --}}
                        <th width="105px">Action</th>
                    </tr>
                </thead>
                <tbody>
                </tbody>
            </table>
        </div>
    </div>


    @include('parts.parts-request.modal')
@endsection

@push('extraJS')
    <script type="text/javascript">
        let statusFilter = "pending"; // default

        $(function () {
            var table = $('.data-table').DataTable({
                processing: true,
                serverSide: true,
                ajax: {
                    url: "{{ route('parts-request.index') }}",
                    data: function (d) {
                        d.status = statusFilter;
                    }
                },
                columnDefs: [{
                    width: "50px",
                    targets: 0
                }],
                columns: [
                    { data: 'sites', name: 'sites' },
                    { data: 'date', name: 'date' },
                    { data: 'sparepart', name: 'sparepart' },
                    { data: 'status', name: 'status' },
                    { data: 'user', name: 'user' },
                    { data: 'updateStatus', name: 'updateStatus' },
                    {
                        data: 'action',
                        name: 'action',
                        orderable: false,
                        searchable: false
                    },
                ]
            });

            // ✅ Tambahkan event untuk tombol filter
            $('.filter-btn').on('click', function () {
                statusFilter = $(this).data('status');
                $('.filter-btn')
                    .removeClass('btn-success')
                    .addClass('btn-primary');
                $(this)
                    .removeClass('btn-primary')
                    .addClass('btn-success');
                table.ajax.reload();
            });

        });

        $(document).on("click", ".add", function () {
            $(".invalid-feedback").text("")
            $('#addForm')[0].reset()
            $("#addModal").modal("show");

        });
        $(document).on("click", ".edit", function () {
            $(".invalid-feedback").text("")
            $("#editModal").find('.form-container').empty();
            var id = $(this).data('id');
            var location = $(this).data('location');
            var status = $(this).data('status');
            var sparepart = $(this).data('sparepart');
            sparepart.forEach(s => {
                const { sparepart_id, qty } = s;
                generateSparepart(sparepart_id, qty);
            });
            // Ubah ini ke URL update sesuai route Anda
            var updateUrl = `/parts-request/${id}`; // Sesuaikan jika route Anda memiliki prefix lain
            $("#editModal form").attr("action", updateUrl);
            $("#location_edit").val(location).trigger('change'); // trigger agar select2 update
            $("#status_edit").val(status).trigger('change');
            $("#editModal").modal("show");
        });



        function generateSparepart(sparepart_id, qty) {
            const template = $('#sparepart-template').html();
            const $element = $(template);

            // Tambahkan ke container
            $("#editModal").find('.form-container').append($element);
            $element.find('select').addClass("select2")
            $element.find('select').val(sparepart_id).trigger("change")
            $element.find("[name='quantity[]']").val(qty)
            // Re-inisialisasi select2 hanya pada select baru
            $element.find('select.select2').select2({
                theme: "bootstrap",
                dropdownParent: $("#editModal"),
                width: '100%',
                allowClear: true, placeholder: "Pilih Sparepart",
                theme: "bootstrap"
            });
        }

        $(document).on("click", ".delete", function () {
            var id = $(this).data("id");

            Swal.fire({
                title: 'Apakah kamu yakin?',
                text: "Data akan dihapus secara permanen!",
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#d33',
                cancelButtonColor: '#3085d6',
                confirmButtonText: 'Ya, hapus!',
                cancelButtonText: 'Batal'
            }).then((result) => {
                if (result.isConfirmed) {
                    $.ajax({
                        url: '/parts-request/' + id,
                        type: 'DELETE',
                        headers: {
                            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                        },
                        success: function (res) {
                            Swal.fire('Terhapus!', res.message, 'success');
                            $('.data-table').DataTable().ajax.reload();
                        },
                        error: function (xhr) {
                            console.log(xhr);
                            Swal.fire('Gagal!', 'Data gagal dihapus.', 'error');
                        }
                    });
                }
            });
        });
    </script>
@endpush