@extends('template.master')
{{-- modal --}}

{{-- modal --}}
@section('content')
    @if ($canCreate)
        <x-primary-button data-bs-toggle="modal" data-bs-target="#modalTambah" class="mb-4">Add Vendor</x-primary-button>
    @endif
    <div class="card">
        <div class="card-body">
            <table class="table table-striped data-table">
                <thead>
                    <tr>
                        <th id="no">No</th>
                        <th>Name</th>
                        <th>Kontrak</th>
                        <th>Tanggal Kontrak</th>
                        <th>Status</th>
                        <th width="105px">Action</th>
                    </tr>
                </thead>
                <tbody>
                </tbody>
            </table>
        </div>
    </div>
    @include('vendor.modal.add')
    @include('vendor.modal.edit')
@endsection
@push('extraJS')
    <script type="text/javascript">
        $(function() {
            var table = $('.data-table').DataTable({
                processing: true,
                serverSide: true,
                ajax: "{{ route('vendor.index') }}",
                columnDefs: [{
                        width: "50px",
                        targets: 0
                    } // 0 adalah index kolom 'id'
                ],
                columns: [{
                        data: 'DT_RowIndex',
                        name: 'DT_RowIndex',
                        className: 'text-center',
                        orderable: false,
                        searchable: false
                    },
                    {
                        data: 'name',
                        name: 'name'
                    },
                    {
                        data: 'action',
                        name: 'action',
                        orderable: false,
                        searchable: false
                    },
                ]
            });

        });

        // tambah
        $('#formTambah').on('submit', function(e) {
            e.preventDefault();

            const form = $(this);
            let name = $('[name="name[]"]');
            $.ajax({
                url: '{{ route('vendor.store') }}',
                method: 'POST',
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                data: form.serialize(),
                success: function(response) {
                    $('#modalTambah').modal('hide');
                    form.trigger("reset");

                    $('.data-table').DataTable().ajax.reload();
                    Swal.fire({
                        icon: 'success',
                        title: 'Berhasil',
                        text: 'Data berhasil ditambah.',
                        showConfirmButton: false,
                        timer: 1500 // otomatis hilang setelah 1,5 detik
                    });
                },
                error: function(xhr) {
                    let message = xhr.responseJSON?.message || 'Terjadi kesalahan';
                    Swal.fire({
                        icon: 'error',
                        title: 'Gagal Menyimpan',
                        text: message
                    });
                }
            });
        });

        // edit
        $(document).on('click', '.edit', function() {
            let id = $(this).data('id');
            let = $(this).data('');
            let name = $(this).data('name');

            $('#edit-id').val(id);
            $('#edit-name').val(name);
            $('#modalEdit').modal('show');
        });

        $('#formEdit').on('submit', function(e) {
            e.preventDefault();
            const form = $(this);

            let id = $('#edit-id').val();
            let name = $('#name').val().trim();

            $(".loading").show();

            $.ajax({
                url: `/vendor/${id}`,
                type: 'POST',
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                data: form.serialize(),
                success: function(response) {
                    $('#modalEdit').modal('hide');
                    form.trigger("reset");

                    $('.data-table').DataTable().ajax.reload();

                    Swal.fire({
                        icon: 'success',
                        title: 'Berhasil',
                        text: 'Data berhasil diperbarui.',
                        showConfirmButton: false,
                        timer: 1500 // otomatis hilang setelah 1,5 detik
                    });
                },
                error: function(xhr) {
                    $('.data-table').DataTable().ajax.reload();
                    let message = xhr.responseJSON?.message || 'Terjadi kesalahan';
                    Swal.fire({
                        icon: 'error',
                        title: 'Gagal Menyimpan',
                        text: message
                    });
                },
                complete: function() {
                    $('.data-table').DataTable().ajax.reload();
                    $(".loading").hide();
                }
            });
        });

        // delete
        $(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: '/vendor/' + id,
                        type: 'POST',
                        data: {
                            _method: 'DELETE',
                            _token: '{{ csrf_token() }}'
                        },
                        headers: {
                            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                        },
                        success: function(res) {
                            Swal.fire('Data berhasil Dihapus!', res.message, 'success');
                            $('.data-table').DataTable().ajax.reload();
                        },
                        error: function(xhr) {
                            Swal.fire('Gagal!', 'Data gagal dihapus.', 'error');
                        }
                    });
                }
            });
        });
    </script>
@endpush