{{-- Bootstrap add --}}
<div class="modal fade" id="transferModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog">
        <form id="transferForm">
            @csrf
            <input type="hidden" name="sparepart_id" id="sparepart_id" class="sparepart_id">
            <input type="hidden" name="part" id="part" class="part">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Transfer Sparepart</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Tutup"></button>
                </div>
                <div class="modal-body">
                    <!-- Lokasi Awal -->
                    <div class="p-2 mb-3 text-white rounded bg-primary">
                        <strong>Lokasi Awal</strong>
                    </div>
                    <div class="row">
                        <div class="mb-3 col-sm-6">
                            <label class="form-label">Part No. 1</label>
                            <input type="text" name="part_number_1_awal" class="form-control" id="part_number_1_awal"
                                readonly>
                        </div>
                        <div class="mb-3 col-sm-6">
                            <label class="form-label">Part No. 2</label>
                            <input type="text" class="form-control" id="part_number_2_awal" readonly>
                        </div>
                        <div class="mb-3 col-sm-6">
                            <label class="form-label">Lokasi</label>
                            <input type="text" class="form-control" id="location_awal" value="" readonly>
                        </div>
                        <div class="mb-3 col-sm-6">
                            <label class="form-label">Rak</label>
                            <input type="text" class="form-control" id="rak_awal" readonly>
                        </div>
                    </div>

                    <!-- Tujuan -->
                    <div class="p-2 mb-3 text-white rounded bg-primary">
                        <strong>Tujuan</strong>
                    </div>
                    <div class="row">
                        <div class="mb-3 col-sm-8">
                            <label for="location_id" class="form-label">Lokasi</label>
                            <select name="location_id" id="location_id" class="select2 form-control w-100 location-id "
                                required>
                                @foreach ($location as $loc)
                                    <option value="{{ $loc->id }}"
                                        {{ in_array($loc->id, old('location_id', [])) ? 'selected' : '' }}>
                                        {{ $loc->name }}
                                    </option>
                                @endforeach
                            </select>
                            <p class="hidden text-danger" id="error-message-location"></p>
                        </div>
                        <div class="mb-3 col-sm-4">
                            <label for="rak_id" class="form-label">Rak</label>
                            <select name="rak_id" id="rak_id" class="select2 form-control w-100 rak-id" required>
                                @foreach ($rak as $r)
                                    <option value="{{ $r->id }}"
                                        {{ in_array($r->id, old('rak_id', [])) ? 'selected' : '' }}>
                                        {{ $r->name }}
                                    </option>
                                @endforeach
                            </select>
                            <p class="hidden text-danger" id="error-message-rak"></p>
                        </div>
                        <div class="mb-3 col-sm-12">
                            <label class="form-label">Quantity</label>
                            <input type="text" name="qty" class="form-control only-number qty"
                                placeholder="Quantity" id="qty" required>
                            <p class="hidden text-danger" id="error-message-qty"></p>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-light" data-bs-dismiss="modal">Tutup</button>
                    <button type="submit" class="btn btn-primary">Simpan</button>
                </div>
            </div>
        </form>
    </div>
</div>

@push('extraJS')
    <script>
        $(document).ready(function() {
            // Select2 init
            $('#transferModal .select2.location-id').select2({
                dropdownParent: $('#transferModal'),
                width: '100%',
                allowClear: true,
                theme: "bootstrap",
                placeholder: "Pilih Unit"
            });
            $('#transferModal .select2.rak-id').select2({
                dropdownParent: $('#transferModal'),
                width: '100%',
                allowClear: true,
                theme: "bootstrap",
                placeholder: "Pilih Unit"
            });

            $('#transferForm').on("submit", function(e) {
                e.preventDefault();

                let form = $(this);

                let id = $('#transferForm #sparepart_id').val();
                let location_id = $('#transferForm #location_id').val();
                let rak_id = $('#transferForm #rak_id').val();
                let qty = $('#transferForm #qty').val();
                let part = $('#transferForm #part_number_1_awal').val();

                $('.is-invalid').removeClass('is-invalid');
                $('.text-danger').addClass('hidden').text('');

                $.ajax({
                    url: '/sparepart-transfer/',
                    type: 'POST',
                    data: {
                        sparepart_id: id,
                        location_id: location_id,
                        rak_id: rak_id,
                        qty: qty,
                        part: part,
                    },
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    },
                    success: function(res) {
                        console.log(res);

                        let data = Array.isArray(res) ? res[0] : res;

                        if (data.status === 1) {
                            $('.qty').addClass('is-invalid').focus();;
                            $('#error-message-qty').removeClass('hidden').text(data.text);
                            Swal.fire({
                                icon: 'warning',
                                title: 'Peringatan!',
                                text: data.text,
                            });
                        } else if (data.status === 4) {
                            $('.location-id').addClass('is-invalid').focus();;
                            $('#error-message-location').removeClass('hidden').text(data.text);
                            Swal.fire({
                                icon: 'warning',
                                title: 'Peringatan!',
                                text: data.text,
                            });
                        } else if (data.status === 2) {
                            Swal.fire('Berhasil!', data.text, 'success');

                            $('#transferModal').modal('hide');
                            $('.data-table').DataTable().ajax.reload();
                            form[0].reset();
                            form.find('.select2').val(null).trigger('change');
                        } else {
                            Swal.fire('Kesalahan!', 'Ada Kesalahan Pada Server.', 'info');
                        }
                    },
                    error: function(xhr) {
                        console.log(xhr);

                        if (xhr.status === 422) {
                            let errors = xhr.responseJSON.errors;

                            if (errors.location_id) {
                                $('#location_id').addClass('is-invalid');
                                $('#error-message-location').removeClass('hidden').text(errors
                                    .location_id[0]);
                            }

                            if (errors.rak_id) {
                                $('#rak_id').addClass('is-invalid');
                                $('#error-message-rak').removeClass('hidden').text(errors
                                    .rak_id[0]);
                            }

                            if (errors.qty) {
                                $('.qty').addClass('is-invalid');
                                $('#error-message-qty').removeClass('hidden').text(errors.qty[
                                    0]);
                            }
                        } else {
                            let msg = xhr.responseJSON?.text ??
                                'Terjadi kesalahan tidak diketahui';
                            Swal.fire('Gagal!', msg, 'error');
                        }
                    }
                });
            });
        });
    </script>
@endpush