@extends('layouts.main')
@section('content')
    @include('layouts.components.alert-prompt')
    <!-- Cara Baru -->
    <div class="card shadow mb-4">
        <div class="card-header py-3">
            <div class="row">
                <div class="col-6">
                    <h5 class="m-0 font-weight-bold text-primary mt-2">Tambah Peti Out</h5>
                </div>
            </div>
        </div>
        <div class="card-body">
            <form action="{{ route('dashboard.peminjaman.store') }}" method="POST" enctype="multipart/form-data"
                id="peminjamanForm">
                @csrf
                <div class="form-group">
                    <label for="peti_id" class="col-form-label">Pilih Detail Peti: <span
                            class="text-danger">*</span></label>
                    <select class="form-control" id="searchPeti" name="peti_id"></select>

                    <label for="customer_id" class="col-form-label">Nama Customer:<span class="text-danger">*</span></label>
                    <select class="form-control" id="searchCustomer" name="customer_id"></select>

                    <label for="exit_at" class="col-form-label">Tanggal Peminjaman: <span
                            class="text-danger">*</span></label>
                    <input class="form-control" name="exit_at" type="date" id="exit_at" value="{{ old('exit_at') }}"
                        required>

                    <label for="est_pengembalian" class="col-form-label">Estimasi Pengembalian: <span
                            class="text-danger">*</span></label>
                    <input class="form-control" name="est_pengembalian" type="date" id="est_pengembalian" required>

                    <label for="warehouse_id" class="col-form-label">Asal Gudang:</label>
                    <select class="form-control" id="searchWarehouse" name="warehouse_id"></select>
                </div>
                <div class="modal-footer d-flex justify-content-center">
                    <a href="{{ route('dashboard.peminjaman.index') }}" class="btn btn-secondary">Kembali</a>
                    <button type="submit" class="btn btn-primary" id="submitButton">Simpan</button>
                </div>
            </form>
        </div>
    </div>

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/css/select2.min.css" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/js/select2.min.js"></script>
    {{-- <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"> --}}
    <script type="text/javascript">
        var path = "{{ route('dashboard.peminjaman.autoCompleteSearch') }}";
        var searchCustomersPath = "{{ route('dashboard.peminjaman.searchCustomers') }}";
        var searchWarehousesPath = "{{ route('dashboard.peminjaman.searchWarehouses') }}";

        // Inisialisasi dropdown peti
        $('#searchPeti').select2({
            placeholder: 'Pilih Detail Peti',
            ajax: {
                url: path,
                dataType: 'json',
                delay: 250,
                processResults: function(data) {
                    return {
                        results: $.map(data.peti, function(item) {
                            return {
                                text: item.fix_lot,
                                id: item.id
                            }
                        })
                    };
                },
                cache: true
            }
        });

        // Inisialisasi dropdown pelanggan dengan Select2
        $('#searchCustomer').select2({
            placeholder: 'Cari atau Pilih Pelanggan',
            ajax: {
                url: searchCustomersPath,
                dataType: 'json',
                delay: 250,
                processResults: function(data) {
                    return {
                        results: $.map(data.customers, function(customer) {
                            return {
                                text: customer.name,
                                id: customer.id
                            }
                        })
                    };
                },
                cache: true
            }
        });

        // Inisialisasi dropdown gudang
        $('#searchWarehouse').select2({
            placeholder: 'Pilih data gudang',
            ajax: {
                url: searchWarehousesPath,
                dataType: 'json',
                delay: 250,
                processResults: function(data) {
                    return {
                        results: $.map(data.warehouses, function(warehouse) {
                            return {
                                text: warehouse.name,
                                id: warehouse.id
                            }
                        })
                    };
                },
                cache: true
            }
        });

        // Tambahkan listener perubahan pada dropdown peti
        $('#searchPeti').on('change', function() {
            var selectedPetiId = $(this).val();

            // Bersihkan dan reset dropdown pelanggan dan gudang
            $('#searchCustomer').empty().val(null).trigger('change');
            $('#searchWarehouse').empty().val(null).trigger('change');

            // Ambil dan perbarui data pelanggan dan gudang berdasarkan peti yang dipilih
            $.ajax({
                url: "{{ route('dashboard.peminjaman.getCustomerAndWarehouseByPeti') }}",
                type: 'GET',
                data: {
                    peti_id: selectedPetiId
                },
                dataType: 'json',
                success: function(data) {
                    $.each(data.customers, function(index, customer) {
                        // Tambahkan opsi ke dropdown pelanggan
                        $('#searchCustomer').append('<option value="' + customer.id + '">' +
                            customer.name + '</option>');
                    });

                    $.each(data.warehouses, function(index, warehouse) {
                        // Tambahkan opsi ke dropdown gudang
                        $('#searchWarehouse').append('<option value="' + warehouse.id + '">' +
                            warehouse.name + '</option>');
                    });

                    // Pilih pelanggan dan gudang berdasarkan data yang diterima
                    $('#searchCustomer').val(data.selectedCustomer).trigger('change');
                    $('#searchWarehouse').val(data.selectedWarehouse).trigger('change');
                },
                error: function(error) {
                    console.error('Error fetching customer and warehouse data:', error);
                }
            });
        });
    </script>

    <!-- auto disable form pada saat sudah di simpan-->
    <script>
        document.getElementById('peminjamanForm').addEventListener('submit', function() {
            document.getElementById('submitButton').setAttribute('disabled', 'true');
        });
    </script>

    <!-- otomatis tgl otomatis 1 minggu setelah pembuatan Peti Out -->
    <script>
        // Mendapatkan elemen input tanggal Peti Out
        const exitDateInput = document.getElementById('exit_at');

        // Mendapatkan elemen input estimasi tanggal Peti In
        const estimatedReturnDateInput = document.getElementById('est_pengembalian');

        // Menambahkan event listener ke input tanggal Peti Out
        exitDateInput.addEventListener('input', function() {
            // Mendapatkan tanggal Peti Out dalam format tanggal JavaScript
            const exitDate = new Date(this.value);

            // Menghitung tanggal estimasi Peti In (7 hari setelah tanggal Peti Out)
            const estimatedReturnDate = new Date(exitDate);
            estimatedReturnDate.setDate(exitDate.getDate() + 7);

            // Mengisi nilai estimasi tanggal Peti In
            estimatedReturnDateInput.valueAsDate = estimatedReturnDate;
        });
    </script>
@endsection