@extends('layouts.master')
@section('title')
    @lang('translation.dashboards')
@endsection
@section('css')
    <link href="{{ URL::asset('build/libs/jsvectormap/css/jsvectormap.min.css') }}" rel="stylesheet" type="text/css" />
    <link href="{{ URL::asset('build/libs/swiper/swiper-bundle.min.css') }}" rel="stylesheet" type="text/css" />
@endsection
@section('content')
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            $('.insert-btn').on('click', function() {
                var customerId = $(this).data('customer-id');
                var customerName = $(this).data('customer-name');
                $('#formCustomerName').val(customerName);
                $('#formCustomerId').val(customerId);
            });
            $('#insertForm').on('submit', function(e) {
                e.preventDefault();

                $.ajax({
                    url: '/api/insert-delivery',
                    method: 'POST',
                    data: $(this).serialize(),
                    success: function(response) {
                        if (response.success) {
                            $('#successAlert').show();
                            $('#errorAlert').hide();
                            $('#insertModal').modal('hide');
                        } else {
                            $('#errorAlert').show();
                            $('#successAlert').hide();
                        }
                    },
                    error: function(jqXHR) {
                        if (jqXHR.status === 422) {
                            var errors = jqXHR.responseJSON.errors;
                            var errorMessage = 'Validation errors:';
                            for (var field in errors) {
                                errorMessage += '\n' + field + ': ' + errors[field].join(', ');
                            }
                            $('#errorAlert').text(errorMessage).show();
                        } else {
                            $('#errorAlert').text('Failed to insert data.').show();
                        }
                        $('#successAlert').hide();
                    }
                });
            });
        });
    </script>
    <div class="container-fluid page-body-wrapper">
        <div class="main-panel">
            <div class="content-wrapper">
                <div class="row">
                    <div class="col-lg-12 grid-margin stretch-card">
                        <div class="card">
                            <div class="card-header">
                                <h4 class="card-title"><i class="ri-gas-station-fill me-1"></i>Status Tekanan Gas</h4>
                            </div>
                            <div class="card-body">
                                <p class="card-description">
                                </p>
                                <div class="alert alert-success" id="successAlert" role="alert" style="display:none;">
                                    Data inserted successfully!
                                </div>
                                <div class="alert alert-danger" id="errorAlert" role="alert" style="display:none;">
                                    Failed to insert data.
                                </div>
                                @livewire('pressure-table')
                            </br>
                                  @if (Auth::user()->hasRole('superadmin'))
                                             <livewire:buffer-customer-error />
                                            @endif
                                <div class="modal fade" id="insertModal" tabindex="-1" aria-labelledby="insertModalLabel"
                                    aria-hidden="true">
                                    <div class="modal-dialog modal-lg">
                                        <div class="modal-content">
                                            <div class="modal-header">
                                                <h5 class="modal-title" id="insertModalLabel">Pilih Trip</h5>
                                                                      <button type="button" class="btn-close" data-dismiss="modal" aria-label="Close">

                                            </div>
                                            <div class="modal-body">
                                                <livewire:select-trip-tambahan-table />
                                             
                                            </div>
                                         

                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection
@section('script')
    <script src="{{ URL::asset('build/libs/apexcharts/apexcharts.min.js') }}"></script>
    <script src="{{ URL::asset('build/libs/jsvectormap/js/jsvectormap.min.js') }}"></script>
    <script src="{{ URL::asset('build/libs/jsvectormap/maps/world-merc.js') }}"></script>
    <script src="{{ URL::asset('build/libs/swiper/swiper-bundle.min.js') }}"></script>
    <!-- dashboard init -->
    <script src="{{ URL::asset('build/js/pages/dashboard-nft.init.js') }}"></script>
    <script src="{{ URL::asset('build/js/pages/dashboard-ecommerce.init.js') }}"></script>


    {{-- ini script popup --}}
    {{-- <script>
        document.addEventListener('DOMContentLoaded', function () {
            Livewire.on('showNotification', (data) => {
                Swal.fire({
                    icon: data.type || 'info',
                    title: data.message || 'Terjadi kesalahan!',
                    showConfirmButton: false,
                    timer: 3000
                });
            });
        });
    </script> --}}

    {{-- ini script untuk close modal --}}
    {{-- <script>
        document.addEventListener('DOMContentLoaded', function() {
            // Fix modal close issue
            $('#insertModal').on('hidden.bs.modal', function() {
                $('.modal-backdrop').remove(); // Hapus layer gelap yang bikin nge-freeze
                $('body').removeClass('modal-open'); // Pastikan body bisa di-scroll lagi
                Livewire.dispatch('modalClosed'); // Kirim event ke Livewire
            });

            // Button pilih trip klik -> buka modal & set data
            $('.insert-btn').on('click', function() {
                var customerId = $(this).data('customer-id');
                var customerName = $(this).data('customer-name');

                $('#formCustomerName').val(customerName);
                $('#formCustomerId').val(customerId);

                $('#insertModal').modal('show'); // Pastikan modal kebuka
            });

            // Kirim form via AJAX
            $('#insertForm').on('submit', function(e) {
                e.preventDefault();

                $.ajax({
                    url: '/api/insert-delivery',
                    method: 'POST',
                    data: $(this).serialize(),
                    success: function(response) {
                        if (response.success) {
                            $('#successAlert').text('Data berhasil dikirim!').show();
                            $('#errorAlert').hide();
                            $('#insertModal').modal('hide'); // Tutup modal setelah sukses
                        } else {
                            $('#errorAlert').text('Terjadi kesalahan!').show();
                            $('#successAlert').hide();
                        }
                    },
                    error: function(jqXHR) {
                        $('#errorAlert').text('Gagal mengirim data!').show();
                        $('#successAlert').hide();
                    }
                });
            });
        });

        // Event dari Livewire buat tutup modal
        Livewire.on('hideModal', () => {
            $('#insertModal').modal('hide');
        });

        // Event dari Livewire buat nampilin popup notif
        Livewire.on('showNotification', (data) => {
            alert(data.message); // Bisa ganti jadi Toast atau SweetAlert
        });
    </script> --}}
@endsection