@extends('layouts.app')

@section('content')
<div class="container">
    <div class="card">
        <div class="col-12 mt-3">
            <button type="button" class="btn bg-gradient-success float-right" data-bs-toggle="modal" data-bs-target="#tambah-form">
                <i class="fas fa-plus"></i>  Tambah
            </button>
            <!-- Modal Tambah Data -->
            <div class="modal fade" id="tambah-form" tabindex="-1" role="dialog" aria-labelledby="modal-form" aria-hidden="true" data-bs-backdrop="static">
                <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
                    <div class="modal-content">
                        <form id="form-tambah">
                            @csrf
                            <div class="modal-header">
                                <h5 class="modal-title">Tambah Transaksi Tol</h5>
                                <button type="button" class="btn-close text-dark" data-bs-dismiss="modal" aria-label="Close"></button>
                            </div>
                            <div class="modal-body">
                                <div class="row">
                                    <div class="col-sm">
                                        <div class="form-group">
                                            <label>Golongan Kendaraan</label>
                                            <select class="form-control ftambah" id="golongan_id" required>
                                                <option value="">-- Pilih Golongan Kendaraan --</option>
                                                @foreach ($golongan as $item)
                                                    <option value="{{ $item->id }}">{{ $item->golongan }} - {{ $item->deskripsi }}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-sm">
                                        <div class="form-group">
                                            <label>Gerbang Masuk</label>
                                            <select class="form-control ftambah" id="gerbang_masuk_id" required>
                                                <option value="">-- Pilih Gerbang Masuk --</option>
                                                @foreach ($gerbang as $item)
                                                    <option value="{{ $item->id }}">{{ $item->nama }}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="modal-footer">
                                <button type="button" class="btn bg-gradient-secondary" data-bs-dismiss="modal">Tutup</button>
                                <button type="button" class="btn bg-gradient-info" onclick="tambah()">Simpan</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>

            <!-- Modal Edit Data -->
            <div class="modal fade" id="edit-form" tabindex="-1" role="dialog" aria-labelledby="modal-form" aria-hidden="true" data-bs-backdrop="static">
                <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
                    <div class="modal-content">
                        <form id="form-edit">
                            @csrf
                            <div class="modal-header">
                                <h5 class="modal-title">Update Transaksi Tol</h5>
                                <button type="button" class="btn-close text-dark" data-bs-dismiss="modal" aria-label="Close"></button>
                            </div>
                            <div class="modal-body">
                                <input type="hidden" id="id" required>

                                <div class="row">
                                    <div class="col-sm">
                                        <div class="form-group">
                                            <label>Golongan Kendaraan</label>
                                            <select class="form-control fedit" id="golongan_ide" @readonly(true)>
                                                <option value="">-- Pilih Golongan --</option>
                                                @foreach ($golongan as $item)
                                                    <option value="{{ $item->id }}">{{ $item->golongan }} - {{ $item->deskripsi }}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>
                                </div>
                                <div class="row mt-3">
                                    <div class="col-sm">
                                        <div class="form-group">
                                            <label>Gerbang Masuk</label>
                                            <select class="form-control fedit" id="gerbang_masuk_ide" @readonly(true)>
                                                <option value="">-- Pilih Gerbang Masuk --</option>
                                                @foreach ($gerbang as $item)
                                                    <option value="{{ $item->id }}">{{ $item->nama }}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>

                                    <div class="col-sm">
                                        <div class="form-group">
                                            <label>Jam Masuk</label>
                                            <input type="datetime" class="form-control fedit" id="jam_masuke" @readonly(true)>
                                        </div>
                                    </div>

                                    <div class="col-sm">
                                        <div class="form-group">
                                            <label>Gerbang Keluar</label>
                                            <select class="form-control fedit" id="gerbang_keluar_ide" required  onchange="getData(this.value)">
                                                <option value="">-- Pilih Gerbang Keluar --</option>
                                                @foreach ($gerbang as $item)
                                                    <option value="{{ $item->id }}">{{ $item->nama }}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>
                                </div>

                                <div class="row mt-3">
                                    <div class="col-sm">
                                        <div class="form-group">
                                            <label>Jarak (KM)</label>
                                            <input type="number" class="form-control fedit" id="jarake" required>
                                        </div>
                                    </div>

                                    <div class="col-sm">
                                        <div class="form-group">
                                            <label>Tarif (Rp)</label>
                                            <input type="number" class="form-control fedit" id="tarife" required>
                                        </div>
                                    </div>
                                </div>

                            </div>

                            <div class="modal-footer">
                                <button type="button" class="btn bg-gradient-secondary" data-bs-dismiss="modal">Tutup</button>
                                <button type="button" class="btn bg-gradient-info" onclick="update()">Update</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>

        </div>
        <div class="card-body">
            <div class="table-responsive">
                <table id="dt-table" class="table table-striped" style="width:100%">
                    <thead>
                        <tr>
                            <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7 text-center">No</th>
                            <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7 text-center">Golongan</th>
                            <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7 text-center">Gerbang Masuk</th>
                            <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7 text-center">Jam Masuk</th>
                            <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7 text-center">Gerbang Keluar</th>
                            <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7 text-center">Jam Keluar</th>
                            <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7 text-center">Jarak</th>
                            <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7 text-center">Tarif</th>
                            <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7 text-center">Action</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach ($x as $index => $x)
                            <tr>
                                <td><p class="text-center text-sm mb-0">{{ $index + 1 }}</p></td>
                                <td><p class="text-sm mb-0">{{ $x->golongan->golongan ?? '-'}} - {{ $x->golongan->deskripsi ?? '-'}}</p></td>
                                <td><p class="text-sm mb-0">{{ $x->gerbangMasuk->nama ?? "-"}}</p></td>
                                <td><p class="text-sm mb-0">{{ $x->jam_masuk}}</p></td>
                                <td><p class="text-sm mb-0">{{ $x->gerbangKeluar->nama ?? "-" }}</p></td>
                                <td><p class="text-sm mb-0">{{ $x->jam_keluar ?? "-" }}</p></td>
                                <td><p class="text-sm mb-0">{{ isset($x->jarak) ? $x->jarak . ' KM' : '-' }}</p></td>
                                <td><p class="text-sm mb-0">{{ isset($x->tarif) ? 'Rp. ' . number_format($x->tarif, 0, ',', '.') : '-' }}</p></td>
                                <td class="text-center text-sm mb-0">
                                    <button class="badge bg-gradient-info border-0" onclick="printReport({{ $x->id }})">
                                        <i class="fas fa-print"></i>
                                    </button>
                                    <button class="badge bg-gradient-success border-0" data-bs-toggle="modal" onclick="edit({{ $x->id }})">
                                        <i class="fas fa-edit"></i>
                                    </button>
                                    <button class="badge bg-gradient-danger border-0" onclick="destroy('{{ route('transaksi_tol_destroy', ['id' => $x->id]) }}')">
                                        <i class="fas fa-trash"></i>
                                    </button>
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>
<script>
    const successMessage = "{{ session()->get('success') }}";
    const errorMessage = "{{ session()->get('error') }}";

    if (successMessage) {
        Swal.fire({
            icon: 'success',
            title: 'Sukses!',
            text: successMessage,
        });
    }
    if (errorMessage) {
        Swal.fire({
            icon: 'error',
            title: 'Gagal!',
            text: errorMessage,
        });
    }

    $('#gerbang_masuk_ide').on('change', function () {
        let selectedId = $(this).val();
        $('#gerbang_keluar_ide option').show(); // reset dulu semua option
        if (selectedId) {
            $('#gerbang_keluar_ide option[value="' + selectedId + '"]').hide();
            // kalau yang dipilih sebelumnya jadi disembunyikan, clear value
            if ($('#gerbang_keluar_ide').val() === selectedId) {
                $('#gerbang_keluar_ide').val('');
            }
        }
    });

    function tambah()
    {
        let golongan_id = $("#golongan_id").val();
        let gerbang_masuk_id = $("#gerbang_masuk_id").val();

        Swal.fire({
            title: 'Loading...',
            text: "Mohon tunggu sedang diproses...",
            icon: "info",
            allowOutsideClick: false,
            showConfirmButton: false,
            didOpen: () => {
                Swal.showLoading();
            }
        });

        $.ajax({
            url: "{{ route('transaksi_tol_store') }}",
            method: "POST",
            data: {
                _token: "{{ csrf_token() }}",
                golongan_id: golongan_id,
                gerbang_masuk_id: gerbang_masuk_id,
            },
            success: function(response) {
                Swal.close();
                if (response.status === 'success') {
                    Swal.fire({
                        icon: "success",
                        title: "Berhasil",
                        text: response.message
                    }).then(() => {
                        $("#tambah-form").modal('hide');
                        $(".ftambah").val("");
                        location.reload();
                    });
                } else {
                    Swal.fire({
                        icon: "error",
                        title: "Gagal",
                        text: response.message
                    });
                }
            },
            error: function(xhr) {
                Swal.close();
                let errMsg = "Tidak Terhubung dengan Server";
                if (xhr.responseJSON && xhr.responseJSON.message) {
                    errMsg = xhr.responseJSON.message;
                }
                Swal.fire({
                    icon: "error",
                    title: "Gagal",
                    text: errMsg
                });
            }
        });
    }

    function update()
    {
        let id = $("#id").val();
        let golongan_id = $("#golongan_ide").val();
        let gerbang_masuk_id = $("#gerbang_masuk_ide").val();
        let gerbang_keluar_id = $("#gerbang_keluar_ide").val();
        let jam_masuk = $("#jam_masuke").val();
        let jarak = $("#jarake").val();
        let tarif = $("#tarife").val();

        Swal.fire({
            title: 'Loading...',
            text: "Mohon tunggu sedang diproses...",
            icon: "info",
            allowOutsideClick: false,
            showConfirmButton: false,
            didOpen: () => {
                Swal.showLoading();
            }
        });

        $.ajax({
            url: "{{ route('transaksi_tol_update') }}",
            method: "POST",
            data: {
                _token: "{{ csrf_token() }}",
                id: id,
                golongan_id: golongan_id,
                gerbang_masuk_id: gerbang_masuk_id,
                gerbang_keluar_id: gerbang_keluar_id,
                jam_masuk: jam_masuk,
                jarak: jarak,
                tarif: tarif,
            },
            success: function(response) {
                Swal.close();
                if (response.status === 'success') {
                    Swal.fire({
                        icon: "success",
                        title: "Berhasil",
                        text: response.message
                    }).then(() => {
                        $("#edit-form").modal('hide');
                        $(".fedit").val("");
                        // Panggil printReport setelah modal tertutup dan data direset
                        printReport(id, function() {
                            // Callback ini akan dijalankan setelah window.print() selesai
                            // dan halaman asli dikembalikan, lalu reload.
                            location.reload();
                        });
                    });
                } else {
                    Swal.fire({
                        icon: "error",
                        title: "Gagal",
                        text: response.message
                    });
                }
            },
            error: function(xhr) {
                Swal.close();
                let errMsg = "Tidak Terhubung dengan Server";
                if (xhr.responseJSON && xhr.responseJSON.message) {
                    errMsg = xhr.responseJSON.message;
                }
                Swal.fire({
                    icon: "error",
                    title: "Gagal",
                    text: errMsg
                });
            }
        });
    }


    function destroy(url) {
        Swal.fire({
            title: "Apakah Anda yakin?",
            text: "Anda tidak dapat mengembalikan data setelah dihapus!",
            icon: "warning",
            showCancelButton: true,
            confirmButtonColor: "#3085d6",
            cancelButtonColor: "#d33",
            confirmButtonText: "Ya",
            cancelButtonText: "Batal",
        }).then((result) => {
            if (result.isConfirmed) {
                window.location.href = url;
            }
        });
    }

    function edit(id) {
        $.ajax({
            type: 'GET',
            url: "{{ route('transaksi_tol_edit', ':id') }}".replace(':id', id),
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
            success: function (data) {
                if (data) {
                    $('#id').val(data.x.id);
                    $('#gerbang_masuk_ide').val(data.x.gerbang_masuk_id);
                    $('#gerbang_keluar_ide').val(data.x.gerbang_keluar_id);
                    $('#jam_masuke').val(data.x.jam_masuk);
                    $('#jarake').val(data.x.jarak);
                    $('#golongan_ide').val(data.x.golongan_id);
                    $('#tarife').val(data.x.tarif);
                    $('#edit-form').modal('show');
                } else {
                    Swal.fire("Gagal!", "Data tidak ditemukan.", "error");
                }
            },
            error: function (error) {
                Swal.fire("Gagal!", "Terjadi kesalahan saat mengambil data.", "error");
                console.error("Response Text:", error.responseText);
            }
        });
    }

    function getData(id)
    {
        let golongan = $("#golongan_ide").val();
        let masuk = $("#gerbang_masuk_ide").val();
        let keluar = id;

        $.ajax({
            url: "{{ route('transaksi_tol_data') }}",
            method: "POST",
            data: {
                _token: "{{ csrf_token() }}",
                golongan: golongan,
                masuk: masuk,
                keluar: keluar,
            },
            success: function (data) {
                if (data) {
                    $('#jarake').val(data.x.jarak);
                    $('#tarife').val(data.x.tarif);
                } else {
                    Swal.fire("Gagal!", "Data tidak ditemukan.", "error");
                }
            },
            error: function (error) {
                Swal.fire("Gagal!", "Terjadi kesalahan saat mengambil data.", "error");
                console.error("Response Text:", error.responseText);
            }
        });
    }

    function printReport(id, callback) {
        // Ambil data transaksi dari URL menggunakan AJAX
        $.ajax({
            url: "{{ route('transaksi_tol_edit', ':id') }}".replace(':id', id),
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
            success: function (data) {
                if (data) {
                    // Render data transaksi ke dalam elemen yang akan dicetak
                    var printContents = `
                        <div class="print-header">
                            <h5 style="text-align:center; margin-bottom: 5px;">Pembayaran Tol</h5>
                            <p style="text-align:center; font-size:14px;">Laporan Transaksi Tol</p>
                            <p style="text-align:center; font-size:12px;">Tanggal: ${new Date().toLocaleDateString()}</p>
                        </div>

                        <div class="print-body">
                            <table style="width: 100%; border-collapse: collapse; margin-top: 10px;">
                                <tr>
                                    <td style="width: 50%; font-size: 12px; padding: 5px; text-align: left;">Plat Nomor</td>
                                    <td style="font-size: 12px; padding: 5px; text-align: left;">: ${data.x.plat_nomor}</td>
                                </tr>
                                <tr>
                                    <td style="width: 50%; font-size: 12px; padding: 5px; text-align: left;">Golongan</td>
                                    <td style="font-size: 12px; padding: 5px; text-align: left;">: Golongan ${data.x.golongan_id}</td>
                                </tr>
                                <tr>
                                    <td style="width: 50%; font-size: 12px; padding: 5px; text-align: left;">Tarif</td>
                                    <td style="font-size: 12px; padding: 5px; text-align: left;">: ${data.x.tarif}</td>
                                </tr>
                                <tr>
                                    <td style="width: 50%; font-size: 12px; padding: 5px; text-align: left;">Jarak</td>
                                    <td style="font-size: 12px; padding: 5px; text-align: left;">: ${data.x.jarak}</td>
                                </tr>
                                <tr>
                                    <td style="width: 50%; font-size: 12px; padding: 5px; text-align: left;">Gerbang Masuk</td>
                                    <td style="font-size: 12px; padding: 5px; text-align: left;">: ${data.x.gerbang_masuk_id}</td>
                                </tr>
                                <tr>
                                    <td style="width: 50%; font-size: 12px; padding: 5px; text-align: left;">Gerbang Keluar</td>
                                    <td style="font-size: 12px; padding: 5px; text-align: left;">: ${data.x.gerbang_keluar_id}</td>
                                </tr>
                                <tr>
                                    <td style="width: 50%; font-size: 12px; padding: 5px; text-align: left;">Jam Masuk</td>
                                    <td style="font-size: 12px; padding: 5px; text-align: left;">: ${data.x.jam_masuk}</td>
                                </tr>
                            </table>
                        </div>

                        <div class="print-footer">
                            <p style="font-size: 10px; text-align:center; margin-top: 20px;">Terima kasih telah melakukan perjalanan dengan kami.</p>
                            <p style="font-size: 10px; text-align:center;">Selamat jalan dan hati-hati di jalan!</p>
                        </div>
                    `;

                    // Simpan isi halaman saat ini
                    var originalContents = document.body.innerHTML;

                    // Ganti konten halaman dengan konten yang akan dicetak
                    document.body.innerHTML = printContents;

                    // Memanggil perintah print
                    window.print();

                    // Kembalikan konten halaman ke keadaan semula setelah proses print
                    document.body.innerHTML = originalContents;

                    // Panggil callback jika ada, untuk melanjutkan proses (seperti reload)
                    if (typeof callback === 'function') {
                        callback();
                    }
                }
            }
        });
    }



</script>

@endsection