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

{{-- modal --}}
@section('content')
    <x-primary-button data-bs-toggle="modal" data-bs-target="#modalTambah" class="mb-4">Tambah Jenis
        Unit</x-primary-button>
    <div class="card">
        <div class="card-body">
            <table class="table table-striped data-table">
                <thead>
                    <tr>
                        <th id="no">No</th>
                        <th>Nama Jenis Unit</th>
                        <th width="105px">Action</th>
                    </tr>
                </thead>
                <tbody>
                </tbody>
            </table>
        </div>
    </div>
    @include('parts.unit_type.modal.add')
    @include('parts.unit_type.modal.edit')
@endsection
@push('extraJS')
    <script type="text/javascript">
        $(function () {
            var table = $('.data-table').DataTable({
                processing: true,
                serverSide: true,
                ajax: "{{ route('unit-type.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('unit-type.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.'
                    });
                },
                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: `/unit-type/${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.'
                    });
                },
                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: '/unit-type/' + 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