@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 Data Master Gerbang 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>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 class="col-sm">
                                        <div class="form-group">
                                            <label>Gerbang Keluar</label>
                                            <select class="form-control ftambah" id="gerbang_keluar_id" required>
                                                <option value="">-- Pilih Gerbang Keluar --</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>Jarak (KM)</label>
                                            <input type="number" class="form-control ftambah" id="jarak" step="0.01" required>
                                        </div>
                                    </div>
                                </div>
                                <div class="row mt-3">
                                    <div class="col-sm">
                                        <div class="form-group">
                                            <label>Golongan ID</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>Tarif (Rp)</label>
                                            <input type="number" class="form-control ftambah" id="tarif" required>
                                        </div>
                                    </div>
                                    <div class="col-sm">
                                        <div class="form-group">
                                            <label>Status</label>
                                            <select class="form-control ftambah" id="status" required>
                                                <option value="">-- Pilih Status --</option>
                                                <option value="Y">Aktif</option>
                                                <option value="N">Nonaktif</option>
                                            </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 Data Master Gerbang 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>Gerbang Masuk</label>
                                            <select class="form-control fedit" id="gerbang_masuk_ide" required>
                                                <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>Gerbang Keluar</label>
                                            <select class="form-control fedit" id="gerbang_keluar_ide" required>
                                                <option value="">-- Pilih Gerbang Keluar --</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>Jarak (KM)</label>
                                            <input type="number" class="form-control fedit" id="jarake" step="0.01" required>
                                        </div>
                                    </div>
                                </div>
                                <div class="row mt-3">
                                    <div class="col-sm">
                                        <div class="form-group">
                                            <label>Golongan ID</label>
                                            <select class="form-control ftambah" id="golongan_ide" 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>Tarif (Rp)</label>
                                            <input type="number" class="form-control fedit" id="tarife" required>
                                        </div>
                                    </div>
                                    <div class="col-sm">
                                        <div class="form-group">
                                            <label>Status</label>
                                            <select class="form-control fedit" id="statuse" required>
                                                <option value="">-- Pilih Status --</option>
                                                <option value="Y">Aktif</option>
                                                <option value="N">Nonaktif</option>
                                            </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="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">Gerbang 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">Jarak</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">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->gerbangMasuk->nama}}</p></td>
                                <td><p class="text-sm mb-0">{{ $x->gerbangKeluar->nama}}</p></td>
                                <td><p class="text-sm mb-0">{{ $x->jarak}} KM</p></td>
                                <td><p class="text-sm mb-0">{{ $x->golongan->golongan }} - {{ $x->golongan->deskripsi}}</p></td>
                                <td><p class="text-sm mb-0">Rp. {{ $x->tarif}}</p></td>
                                <td class="text-center text-sm mb-0">
                                    <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('master_gerbang_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,
        });
    }

    function syncDropdowns(sourceId, targetId) {
        let selectedId = $(sourceId).val();
        let target = $(targetId);
        
        $('option', target).show(); // Tampilkan semua opsi dulu
        if (selectedId) {
            $('option[value="' + selectedId + '"]', target).hide();
            if (target.val() === selectedId) {
                target.val('');
            }
        }
    }

    $('#gerbang_masuk_id').on('change', () => syncDropdowns('#gerbang_masuk_id', '#gerbang_keluar_id'));
    $('#gerbang_keluar_id').on('change', () => syncDropdowns('#gerbang_keluar_id', '#gerbang_masuk_id'));
    $('#gerbang_masuk_ide').on('change', () => syncDropdowns('#gerbang_masuk_ide', '#gerbang_keluar_ide'));
    $('#gerbang_keluar_ide').on('change', () => syncDropdowns('#gerbang_keluar_ide', '#gerbang_masuk_ide'));

    function tambah() {
        let gerbang_masuk_id = $("#gerbang_masuk_id").val();
        let gerbang_keluar_id = $("#gerbang_keluar_id").val();
        let jarak = $("#jarak").val();
        let golongan_id = $("#golongan_id").val();
        let tarif = $("#tarif").val();
        let status = $("#status").val();

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

        $.ajax({
            url: "{{ route('master_gerbang_tol_store') }}",
            method: "POST",
            data: {
                _token: "{{ csrf_token() }}",
                gerbang_masuk_id,
                gerbang_keluar_id,
                jarak,
                golongan_id,
                tarif,
                status
            },
            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 gerbang_masuk_id = $("#gerbang_masuk_ide").val();
        let gerbang_keluar_id = $("#gerbang_keluar_ide").val();
        let jarak = $("#jarake").val();
        let golongan_id = $("#golongan_ide").val();
        let tarif = $("#tarife").val();
        let status = $("#statuse").val();

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

        $.ajax({
            url: "{{ route('master_gerbang_tol_update') }}",
            method: "POST",
            data: {
                _token: "{{ csrf_token() }}",
                id,
                gerbang_masuk_id,
                gerbang_keluar_id,
                jarak,
                golongan_id,
                tarif,
                status
            },
            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("");
                        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('master_gerbang_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);
                    $('#jarake').val(data.x.jarak);
                    $('#golongan_ide').val(data.x.golongan_id);
                    $('#tarife').val(data.x.tarif);
                    $('#statuse').val(data.x.status);
                    $('#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);
            }
        });
    }

</script>

@endsection