@extends('layouts.app', ['class' => 'g-sidenav-show bg-gray-100'])
@section('content')
    @include('layouts.navbars.auth.topnav', ['title' => ''])
    <div class="card shadow-lg mx-4">
        <div class="card-body p-3">
            <div class="row gx-4">
                <div class="col-lg">
                    <div class="nav-wrapper d-flex flex-wrap justify-content-start">
                        <button class="btn btn-secondary mb-2 me-2" onclick="history.back()">
                            <i class="fas fa-circle-left me-1"></i>
                            <span class="font-weight-bold d-none d-sm-inline">Kembali</span>
                        </button>
                        @if ($authorize->add == '1')
                            <button class="btn btn-primary mb-2" id="btnSimpan"
                                onclick="event.preventDefault(); document.getElementById('{{ $dmenu }}-form').submit();">
                                <i class="fas fa-floppy-disk me-1"></i>
                                <span class="font-weight-bold d-none d-sm-inline">Simpan</span>
                            </button>
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="container-fluid py-4">
        <div class="row">
            <div class="col-md-12">
                <div class="card">
                    <form id="formSimpan" role="form" method="POST" action="{{ URL::to($url_menu) }}"
                        id="{{ $dmenu }}-form" enctype="multipart/form-data">
                        @csrf
                        <div class="card-body">
                            <p class="text-uppercase text-sm">Insert {{ $title_menu }}</p>
                            <hr class="horizontal dark mt-0">
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="row mb-2 align-items-center">
                                        <div class="col-md-3 col-12 mt-1">
                                            <label class="form-label" style="font-size: 14px;">Nama</label>
                                        </div>
                                        <div class="col-md-9 col-12">
                                            @php
                                                use Illuminate\Support\Facades\DB;
                                                use Illuminate\Support\Facades\Session;

                                                $user = DB::table('users')
                                                    ->select('firstname', 'lastname', 'id', 'idroles')
                                                    ->where('username', Session::get('username'))
                                                    ->first(); // ganti dari get() ke first()
                                            @endphp
                                            <div class="row g-2">
                                                @if ($user->idroles === 'admins' || $user->idroles === 'admhrd')
                                                    <div class="col-10">
                                                        <input type="text" class="form-control" id="selectedUser"
                                                            readonly placeholder="-- Pilih --">
                                                        <input type="hidden" id="selectedUserId" name="id">
                                                    </div>
                                                    <div class="col-2">
                                                        <button type="button" class="btn btn-success w-100"
                                                            style="background-color: #028284;" data-bs-toggle="modal"
                                                            data-bs-target="#modalUser">@</button>
                                                    </div>
                                                @else
                                                    <div class="col-12">
                                                        <input type="text" class="form-control" id="selectedUser"
                                                            value="{{ $user->firstname }} {{ $user->lastname }}" readonly>
                                                        <input type="hidden" id="selectedUserId" name="id"
                                                            value="{{ $user->id }}">
                                                    </div>
                                                @endif
                                            </div>

                                        </div>
                                    </div>
                                    <div class="row mb-2 align-items-center">
                                        <div class="col-md-3 col-12 mt-1">
                                            <label class="form-label" style="font-size: 14px;">Tanggal</label>
                                        </div>
                                        <div class="col-md-9 col-12">
                                            <input type="date" class="form-control" id="tanggal" name="tanggal">
                                        </div>
                                    </div>
                                    <div class="row mb-2 align-items-center">
                                        <div class="col-md-3 col-12 mt-1">
                                            <label class="form-label" style="font-size: 14px;">Jenis Kendaraan</label>
                                        </div>
                                        <div class="col-md-9 col-12">
                                            <select class="form-select" id="jenis_kendaraan">
                                                <option value="">-- Pilih --</option>
                                                @foreach ($kendaraan as $k)
                                                    <option value="{{ $k['jeniskendaraan'] }}"
                                                        data-kendaraan='@json($k['kendaraan'])'>
                                                        {{ $k['jeniskendaraan'] }}
                                                    </option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>
                                    <div class="row mb-2 align-items-center">
                                        <div class="col-md-3 col-12 mt-1">
                                            <label class="form-label" style="font-size: 14px;">NO.POL</label>
                                        </div>
                                        <div class="col-md-9 col-12">
                                            <select class="form-select select2" id="nomorkendaraan">
                                                <option value="">-- Pilih --</option>
                                            </select>
                                            <input type="text" class="form-control mt-2" id="input_nopol"
                                                placeholder="Masukkan NO.POL" style="display: none; text-transform: uppercase;">
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="row mb-2 align-items-center">
                                        <div class="col-md-3 col-12 mt-1">
                                            <label class="form-label" style="font-size: 14px;">Tujuan</label>
                                        </div>
                                        <div class="col-md-9 col-12">
                                            <input list="list_lokasi" class="form-control" id="idlokasi" name="idlokasi" placeholder="-- Pilih atau ketik --" style="text-transform: capitalize;">
                                            <datalist id="list_lokasi">
                                                @foreach ($lokasi as $l)
                                                    <option value="{{ $l->namalokasi }}">
                                                @endforeach
                                            </datalist>
                                        </div>
                                    </div>
                                    <div class="row mb-2 align-items-center">
                                        <div class="col-md-3 col-12 mt-1">
                                            <label class="form-label" style="font-size: 14px;">Jenis Tugas</label>
                                        </div>
                                        <div class="col-md-9 col-12">
                                            <input list="list_jenistugas" class="form-control" id="idkategoritugas" name="idkategoritugas" placeholder="-- Pilih atau ketik --" style="text-transform: capitalize;">
                                            <datalist id="list_jenistugas">
                                                @foreach ($jenis_tugas as $j)
                                                    <option value="{{ $j->nama }}">
                                                @endforeach
                                            </datalist>
                                        </div>
                                    </div>

                                    <div class="row mb-2 align-items-center">
                                        <div class="col-md-3 col-12 mt-1">
                                            <label class="form-label" style="font-size: 14px;">PIC</label>
                                        </div>
                                        <div class="col-md-9 col-12">
                                            <input type="text" id="pic" name="pic" class="form-control" style="text-transform: capitalize;"
                                                placeholder="">
                                        </div>
                                    </div>
                                    <div class="row mb-2">
                                    <div class="col-3 mt-1">
                                        <label class="form-label" style="font-size: 14px;">Detail Tugas</label>
                                    </div>
                                    <div class="col-9">
                                        <input type="text" class="form-control" name="dt_tugas" id="dt_tugas"
                                            placeholder="Masukkan detail tugas">
                                    </div>
                                </div>
                                </div>
                            </div>
                            <div class="mt-3 d-grid gap-2 d-md-flex justify-content-md-end">
                                <button type="button" class="btn btn-primary" id="btnTambah">
                                    <i class="fa fa-plus me-1"></i>
                                    <span class="font-weight-bold d-none d-sm-inline">Add tujuan dan jenis tugas</span>
                                    <span class="d-inline d-sm-none">Tambah</span>
                                </button>
                            </div>
                            <textarea id="jsonData" hidden></textarea>
                            <input type="hidden" id="json_data" name="json_data">
                        </div>
                    </form>

                    <!-- Modal -->
                    @if ($user->idroles === 'admins' || $user->idroles === 'admhrd')
                        <div class="modal fade" id="modalUser" tabindex="-1" aria-hidden="true">
                            <div class="modal-dialog modal-dialog-scrollable modal-dialog-centered modal-lg">
                                <div class="modal-content">
                                    <div class="modal-header">
                                        <h5 class="modal-title">List User</h5>
                                        <button type="button" class="btn-close" data-bs-dismiss="modal"
                                            aria-label="Close"></button>
                                    </div>
                                    <div class="modal-body">
                                        <div class="table-responsive">
                                            <table class="table table-hover datatable" id="tableUser">
                                                <thead style="background-color: #b0e9eb;">
                                                    <tr>
                                                        <th scope="col">Action</th>
                                                        <th scope="col">Name</th>
                                                        <th scope="col">Role</th>
                                                    </tr>
                                                </thead>
                                                <tbody>
                                                    @foreach ($driver as $driver)
                                                        <tr>
                                                            <td>
                                                                <button class="btn btn-primary btn-sm"
                                                                    onclick="selectUser(this)"
                                                                    data-id="{{ $driver->id }}"
                                                                    data-name="{{ $driver->firstname }} {{ $driver->lastname }}">
                                                                    Pilih
                                                                </button>
                                                            </td>
                                                            <td>{{ $driver->firstname }} {{ $driver->lastname }}</td>
                                                            <td>{{ $driver->idroles }}</td>
                                                        </tr>
                                                    @endforeach
                                                </tbody>
                                            </table>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    @endif
                </div>
            </div>
        </div>
        
        <div class="col-md-12 mt-4">
            <div class="card">
                <div class="card-body">
                    <p class="text-sm">DETAIL</p>
                    <div class="table-responsive" style="overflow-x: auto;">
                        <table id="tabelData" class="table table-striped">
                            <thead>
                                <tr style="background: #B0E9EB; text-align:center; font-size: 14px;">
                                    <th>Tujuan</th>
                                    <th>Jenis Tugas</th>
                                    <th>PIC</th>
                                    <th>Detail Tugas</th>
                                    <th>Aksi</th>
                                </tr>
                            </thead>
                            <tbody>
                                <!-- Data akan ditambahkan di sini -->
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('js')
    <script>
        $(document).ready(function() {
            // Initialize DataTable for the detail table
            var detailTable = $('#tabelData').DataTable({
                "language": {
                    "search": "Cari :",
                    "lengthMenu": "Tampilkan _MENU_ baris",
                    "zeroRecords": "Tidak ada data yang ditemukan",
                    "info": "Menampilkan _START_ sampai _END_ dari _TOTAL_ data",
                    "infoEmpty": "Tidak ada data yang tersedia",
                    "infoFiltered": "(disaring dari _MAX_ total data)",
                    "paginate": {
                        "first": "Pertama",
                        "last": "Terakhir",
                        "next": "Selanjutnya",
                        "previous": "Sebelumnya"
                    }
                },
                "responsive": true,
                "autoWidth": false,
                "columnDefs": [{
                        "width": "20%",
                        "targets": 0
                    }, // Tujuan column
                    {
                        "width": "20%",
                        "targets": 1
                    }, // Jenis Tugas column
                    {
                        "width": "20%",
                        "targets": 2
                    }, // PIC column
                    {
                        "width": "20%",
                        "targets": 3
                    }, // Dt_tugas column
                    {
                        "width": "20%",
                        "targets": 4
                    } // Aksi column
                ]
            });

            $('#nomorkendaraan').select2({
                placeholder: "-- Pilih --",
                allowClear: true,
                width: '100%'
            });

            let dataArray = []; // Array untuk menyimpan data

            // Event Binding
            setTanggalHariIni();
            pilihJenisKendaraan();

            // dataset modal
            @if ($user->idroles === 'admins' || $user->idroles === 'admhrd')
                $('#tableUser').DataTable({
                    "language": {
                        "search": "Cari :",
                        "lengthMenu": "Tampilkan _MENU_ baris",
                        "zeroRecords": "Maaf - Data tidak ada",
                        "info": "Halaman _PAGE_ dari _PAGES_",
                        "infoEmpty": "Tidak ada data",
                        "infoFiltered": "(pencarian dari _MAX_ data)"
                    },
                    "destroy": true,
                    responsive: true,
                });
            @endif

            // Auto-select vehicle for non-admin users on page load
            @if ($user->idroles != 'admins' && $user->idroles != 'admhrd')
                $(document).ready(function() {
                    const userId = $("#selectedUserId").val();
                    if (userId) {
                        // Tambahkan timeout lebih panjang untuk mobile
                        setTimeout(() => {
                            autoSelectKendaraanForUser(userId);
                        }, 800); // Dari 300ms menjadi 800ms
                    }
                });
            @endif

            $("#jenis_kendaraan").change(updateNomorKendaraan);

            // Event listener untuk nomor kendaraan
            $(document).on("change", "#nomorkendaraan", function() {
                if ($(this).val() === "lainnya") {
                    $("#input_nopol").show();
                } else {
                    $("#input_nopol").hide().val("");
                }
            });

            $("#btnTambah").click(function() {
                tambahData();
            });
            $(document).on("click", ".btnHapus", hapusData);
            $("#btnSimpan").click(function() {
                simpanData();
            });

            @if ($user->idroles === 'admins' || $user->idroles === 'admhrd')
                window.selectUser = function(button) {
                    var userId = button.getAttribute("data-id");
                    var userName = button.getAttribute("data-name");

                    console.log("User ID:", userId);
                    console.log("User Name:", userName);

                    // Isi input dengan nama yang dipilih
                    document.getElementById("selectedUser").value = userName;
                    document.getElementById("selectedUserId").value = userId;

                    autoSelectKendaraanForUser(userId);

                    // Tutup modal dengan metode yang lebih aman
                    var modalElement = document.getElementById('modalUser');
                    var modal = bootstrap.Modal.getOrCreateInstance(modalElement);
                    modal.hide();
                };
            @endif

            $("#pic").autocomplete({
                source(request, response) {
                    $.ajax({
                        url: "{{ URL::to('/') }}/trdrv/add",
                        data: {
                            term: request.term,
                            field: 'pic'
                        },
                        dataType: 'json',
                        success(data) {
                            response(data);
                        },
                        error(xhr) {
                            console.error(xhr.responseText);
                        }
                    });
                },
                minLength: 1
            });
            $("#dt_tugas").autocomplete({
                source(request, response) {
                    $.ajax({
                        url: "{{ URL::to('/') }}/trdrv/add",
                        data: {
                            term: request.term,
                            field: 'dt_tugas'
                        },
                        dataType: 'json',
                        success(data) {
                            response(data);
                        },
                        error(xhr) {
                            console.error(xhr.responseText);
                        }
                    });
                },
                minLength: 1
            });

            function setTanggalHariIni() {
                let today = new Date().toISOString().split('T')[0];
                $("#tanggal").val(today);
            }

            function pilihJenisKendaraan() {
                let defaultOption = $("#jenis_kendaraan option").filter(function() {
                    return $(this).text().trim().toLowerCase() === "mobil";
                }).val();

                if (defaultOption) {
                    $("#jenis_kendaraan").val(defaultOption);
                    // Don't trigger update here - let autoSelectKendaraanForUser handle it
                }
            }

            function updateNomorKendaraan(preSelectedNomorKendaraan = null) {
                let selectedOption = $("#jenis_kendaraan").find(":selected");
                let kendaraanList = selectedOption.data("kendaraan");

                $("#nomorkendaraan").empty().append('<option value="">-- Pilih --</option>');

                if (kendaraanList && kendaraanList.length > 0) {
                    kendaraanList.forEach(kendaraan => {
                        const isAvailable = kendaraan.status === 'tersedia';
                        $("#nomorkendaraan").append(
                            `<option value="${kendaraan.nomorkendaraan}"
                                data-status="${kendaraan.status}"
                                data-id-user="${kendaraan.id || ''}"
                                ${!isAvailable ? 'disabled style="color:red;"' : ''}>
                                ${kendaraan.nomorkendaraan} - ${kendaraan.namakendaraan} (${kendaraan.status})
                            </option>`
                        );
                    });
                    $("#nomorkendaraan").append('<option value="lainnya">Lainnya...</option>');
                }

                if (preSelectedNomorKendaraan) {
                    $("#nomorkendaraan").val(preSelectedNomorKendaraan).trigger('change');
                } else {
                    if (!$("#nomorkendaraan").val()) {
                        $("#nomorkendaraan").val("").trigger('change');
                    }
                }

                if ($("#nomorkendaraan").val() === "lainnya") {
                    $("#input_nopol").show();
                } else {
                    $("#input_nopol").hide().val("");
                }
            }

            function autoSelectKendaraanForUser(userIdPilihan) {
                console.log("Attempting to auto-select vehicle for user ID:", userIdPilihan);
                
                let vehicleFoundAndSelected = false;
                let attempts = 0;
                const maxAttempts = 3;
                const retryDelay = 300;

                const trySelectVehicle = () => {
                    attempts++;
                    console.log(`Attempt ${attempts} to find vehicle`);

                    // First, try to find the user's vehicle in any category
                    $("#jenis_kendaraan option").each(function() {
                        const jenisOption = $(this);
                        const jenisValue = jenisOption.val();
                        if (!jenisValue) return true; // Skip "--Pilih--" option

                        const kendaraanList = jenisOption.data("kendaraan");

                        if (kendaraanList && kendaraanList.length > 0) {
                            for (let i = 0; i < kendaraanList.length; i++) {
                                const kendaraan = kendaraanList[i];
                                console.log("Checking vehicle:", kendaraan.nomorkendaraan, "for user:", kendaraan.id);
                                
                                // Check if this vehicle belongs to the user
                                if (kendaraan.id && kendaraan.id.toString() === userIdPilihan.toString()) {
                                    console.log("Found matching vehicle:", kendaraan.nomorkendaraan);
                                    
                                    // Set the vehicle type first
                                    $("#jenis_kendaraan").val(jenisValue).trigger('change');
                                    console.log("Set jenis kendaraan to:", jenisValue);

                                    // After a short delay to ensure DOM updates, set the vehicle number
                                    setTimeout(() => {
                                        if (kendaraan.nomorkendaraan) {
                                            $("#nomorkendaraan").val(kendaraan.nomorkendaraan).trigger('change');
                                            console.log("Set nomor kendaraan to:", kendaraan.nomorkendaraan);
                                            
                                            if (kendaraan.nomorkendaraan === 'lainnya' && kendaraan.input_nopol_value) {
                                                $("#input_nopol").show().val(kendaraan.input_nopol_value);
                                                console.log("Set input nopol to:", kendaraan.input_nopol_value);
                                            }
                                        }
                                    }, 200);

                                    vehicleFoundAndSelected = true;
                                    return false; // Exit the loops
                                }
                            }
                        }
                        if (vehicleFoundAndSelected) {
                            return false; // Exit the outer .each loop
                        }
                    });

                    // If no vehicle found for user but we still have attempts left
                    if (!vehicleFoundAndSelected && attempts < maxAttempts) {
                        console.log(`No vehicle found, retrying in ${retryDelay}ms...`);
                        setTimeout(trySelectVehicle, retryDelay);
                    } else if (!vehicleFoundAndSelected) {
                        console.log("No vehicle found after max attempts");
                        // Still update the nomor kendaraan list based on default selected jenis
                        const defaultJenis = $("#jenis_kendaraan").val();
                        if (defaultJenis) {
                            console.log("Updating nomor kendaraan list for default jenis:", defaultJenis);
                            $("#jenis_kendaraan").val(defaultJenis).trigger('change');
                        }
                    }
                };

                // Start the first attempt
                trySelectVehicle();
            }

            function tambahData() {
                let tujuan = $("#idlokasi").val();
                let jenisTugas = $("#idkategoritugas").val();
                let pic = $("#pic").val();
                let dt_tugas = $("#dt_tugas").val();
                let id = $("#selectedUserId").val();
                let tanggal = $("#tanggal").val();
                let idkendaraan = $("#jenis_kendaraan").val();
                let jenis_kendaraan = $("#jenis_kendaraan option:selected").text();
                let nomorkendaraan = $("#nomorkendaraan").val();
                let input_nopol = $("#input_nopol").val();

                let nopolFinal = (nomorkendaraan === "lainnya") ? input_nopol : nomorkendaraan;

                if (!id || !tanggal || !idkendaraan || !tujuan || !jenisTugas || !nopolFinal || !pic || !dt_tugas) {
                    Swal.fire({
                        icon: "warning",
                        title: "Oops...",
                        text: "Harap mengisi semua data!",
                        confirmButtonColor: "#3085d6"
                    });
                    return;
                }

                let rowData = [
                    `<input type="hidden" name="idlokasi[]" value="${tujuan}">${tujuan}`,
                    `<input type="hidden" name="idkategoritugas[]" value="${jenisTugas}">${jenisTugas}`,
                    `<input type="hidden" name="pic[]" value="${pic}">${pic}`,
                    `<input type="hidden" name="dt_tugas[]" value="${dt_tugas}">${dt_tugas}`,
                    `<button type="button" class="btn btnHapus btn-sm mx-2 mb-0" style="background-color: #FFFFFF; border: 1px solid black;">
                        <i class="fas fa-times" style="color: red; font-size: 16px;"></i>
                    </button>`
                ];

                // Add row to DataTable
                detailTable.row.add(rowData).draw();

                let dataObj = {
                    lokasi: tujuan,
                    kategori_tugas: jenisTugas,
                    pic: pic,
                    dt_tugas: dt_tugas,
                    id: id,
                    tanggal: tanggal,
                    idkendaraan: idkendaraan,
                    jenis_kendaraan: jenis_kendaraan,
                    nomor_kendaraan: nopolFinal
                };
                dataArray.push(dataObj);

                console.log(dataArray);

                $("#json_data").val(JSON.stringify(dataArray));
                $("#idlokasi").val(null).trigger("change");
                $("#idkategoritugas").val(null).trigger("change");
                $("#pic").val(null).trigger("change");
                $("#dt_tugas").val(null).trigger("change");
            }

            function hapusData(event) {
                let row = $(event.target).closest("tr");
                let rowIndex = detailTable.row(row).index();

                Swal.fire({
                    title: "Apakah Anda yakin?",
                    text: "Data ini akan dihapus dari daftar!",
                    icon: "warning",
                    showCancelButton: true,
                    confirmButtonColor: "#d33",
                    cancelButtonColor: "#3085d6",
                    confirmButtonText: "Ya, hapus!",
                    cancelButtonText: "Batal"
                }).then((result) => {
                    if (result.isConfirmed) {
                        // Remove from DataTable
                        detailTable.row(row).remove().draw();

                        // Remove from data array
                        dataArray.splice(rowIndex, 1);

                        $("#json_data").val(JSON.stringify(dataArray));
                        Swal.fire({
                            icon: "success",
                            title: "Terhapus!",
                            text: "Data berhasil dihapus.",
                            confirmButtonColor: "#3085d6"
                        });
                    }
                });
            }

            function simpanData() {
                if (dataArray.length === 0) {
                    Swal.fire({
                        icon: "error",
                        title: "Gagal!",
                        text: "Tidak ada data untuk disimpan!",
                        confirmButtonColor: "#d33"
                    });
                    return;
                }

                // Tampilkan loading SweetAlert dan disable tombol
                Swal.fire({
                    title: 'Menyimpan data...',
                    text: 'Harap tunggu',
                    allowOutsideClick: false,
                    didOpen: () => {
                        Swal.showLoading();
                        $("#btnSimpan").prop("disabled", true); // pastikan id tombol adalah btnSimpan
                    }
                });

                let formData = new FormData();
                formData.append("json_data", JSON.stringify(dataArray));

                $.ajax({
                    url: "{{ URL::to('/') }}/trdrv/store",
                    method: "POST",
                    data: formData,
                    id_trs_pengiriman: $('#selectedUserId').val(),
                    processData: false,
                    contentType: false,
                    headers: {
                        "X-CSRF-TOKEN": "{{ csrf_token() }}",
                        "Accept": "application/json"
                    },
                    success: function(response) {
                        Swal.fire({
                            icon: "success",
                            title: "Berhasil!",
                            text: "Data ID (" + response.id + ") berhasil disimpan.",
                            confirmButtonColor: "#3085d6"
                        }).then(() => {
                            window.location.href = "{{ URL::to('/') }}/trdrv";
                        });
                    },
                    error: function(xhr) {
                        Swal.fire({
                            icon: "error",
                            title: "Terjadi Kesalahan!",
                            text: "Gagal menyimpan data.",
                            confirmButtonColor: "#d33"
                        });
                        console.log(xhr.responseText);
                    },
                    complete: function() {
                        $("#btnSimpan").prop("disabled", false); // aktifkan kembali tombol simpan
                    }
                });
            }
        });
    </script>
    <style>

        /* Style for DataTable */
        #tabelData_wrapper .dataTables_filter input {
            border: 1px solid #ddd;
            padding: 5px;
            border-radius: 4px;
        }

        #tabelData_wrapper .dataTables_length select {
            border: 1px solid #ddd;
            padding: 5px;
            border-radius: 4px;
        }

        #tabelData tbody tr {
            cursor: pointer;
        }

        #tabelData tbody tr:hover {
            background-color: #f5f5f5 !important;
        }
    </style>
@endpush