<!-- meta tags and other links -->
<!DOCTYPE html>
<html lang="en" data-theme="light">

<x-head />
<style>
    .tombol-setuju {
        background-color: #3085d6 !important;
        color: white !important;
        padding: 10px 24px !important;
        margin: 5px !important;
        border-radius: 8px !important;
        border: none !important;
        opacity: 1 !important;
        display: inline-block !important;
    }

    .tombol-batal {
        background-color: #ef4444 !important;
        color: white !important;
        padding: 10px 24px !important;
        margin: 5px !important;
        border-radius: 8px !important;
        border: none !important;
        opacity: 1 !important;
        display: inline-block !important;
    }

    .tombol-setuju:hover, .tombol-batal:hover {
        filter: brightness(0.9);
        color: white !important;
    }
</style>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

<body class="dark:bg-neutral-800 bg-neutral-100 dark:text-white">

    <!-- ..::  header area start ::.. -->
    <x-sidebar />
    <!-- ..::  header area end ::.. -->

    <main class="dashboard-main">

        <!-- ..::  navbar start ::.. -->
        <x-navbar />
        <!-- ..::  navbar end ::.. -->
        <div class="dashboard-main-body">
            
            <!-- ..::  breadcrumb  start ::.. -->
            <x-breadcrumb title='{{ isset($title) ? $title : "" }}' subTitle='{{ isset($subTitle) ? $subTitle : "" }}' />
            <!-- ..::  header area end ::.. -->

            @yield('content')
        
        </div>
        <!-- ..::  footer  start ::.. -->
        <x-footer />
        <!-- ..::  footer area end ::.. -->

    </main>

    <!-- ..::  scripts  start ::.. -->
    <x-script  script='{!! isset($script) ? $script : "" !!}' />
    <!-- ..::  scripts  end ::.. -->

    {{-- ========================================== --}}
    {{-- MODAL SETTING HARGA (HANYA ADMIN)         --}}
    {{-- ========================================== --}}
    @auth
    @if(Auth::user()->role === 'admin')
    <div id="modalHarga" style="position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); z-index: 99999; display: none; align-items: center; justify-content: center;">
        <div style="background: white; border-radius: 16px; padding: 24px; width: 100%; max-width: 480px; margin: 0 16px; box-shadow: 0 20px 60px rgba(0,0,0,0.3); position: relative;">
            
            {{-- Close Button --}}
            <button onclick="closeModalHarga()" style="position: absolute; top: 16px; right: 16px; width: 32px; height: 32px; border-radius: 50%; border: none; background: #f3f4f6; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 16px;">
                ✕
            </button>

            {{-- Title --}}
            <h6 style="font-size: 18px; font-weight: bold; margin-bottom: 16px; padding-bottom: 12px; border-bottom: 1px solid #e5e7eb;">
                ⚙️ Pengaturan Harga Air
            </h6>

            {{-- Form --}}
            <form action="{{ route('admin.setting-harga.update') }}" method="POST">
                @csrf
                
                {{-- Harga per m3 --}}
                <div style="margin-bottom: 14px;">
                    <label style="display: block; font-weight: 600; font-size: 14px; margin-bottom: 6px;">
                        Harga per m³ (Rp)
                    </label>
                    <input type="number" 
                           name="harga_per_m3" 
                           id="inputHargaM3" 
                           class="form-control rounded-lg w-full" 
                           style="padding: 10px; border: 2px solid #e5e7eb; border-radius: 8px; font-size: 16px;" 
                           required>
                </div>

                {{-- Biaya Admin --}}
                <div style="margin-bottom: 14px;">
                    <label style="display: block; font-weight: 600; font-size: 14px; margin-bottom: 6px;">
                        Biaya Admin Bulanan (Rp)
                    </label>
                    <input type="number" 
                           name="biaya_admin" 
                           id="inputBiayaAdmin" 
                           class="form-control rounded-lg w-full" 
                           style="padding: 10px; border: 2px solid #e5e7eb; border-radius: 8px; font-size: 16px;" 
                           required>
                </div>

                {{-- Simulasi --}}
                <div style="background: #f0f9ff; padding: 12px; border-radius: 8px; margin-bottom: 16px; font-size: 13px; border: 1px solid #bae6fd;">
                    <strong>📊 Simulasi Perhitungan:</strong><br>
                    Pemakaian 10 m³ = 
                    <span id="contohHitung" style="color: #0369a1; font-weight: bold; font-size: 15px;">Rp 42.000</span>
                </div>

                {{-- Buttons --}}
                <div style="display: flex; justify-content: flex-end; gap: 8px; padding-top: 12px; border-top: 1px solid #e5e7eb;">
                    <button type="button" 
                            onclick="closeModalHarga()" 
                            style="padding: 10px 20px; border: 1px solid #d1d5db; border-radius: 8px; background: white; cursor: pointer; font-size: 14px;">
                        Batal
                    </button>
                    <button type="submit" 
                            style="padding: 10px 20px; background: #2563eb; color: white; border: none; border-radius: 8px; cursor: pointer; font-size: 14px; font-weight: 600;">
                        💾 Simpan Harga
                    </button>
                </div>
            </form>
        </div>
    </div>

    {{-- Script Modal --}}
    <script>
    function openModalHarga(hargaM3, biayaAdmin) {
        document.getElementById('inputHargaM3').value = hargaM3;
        document.getElementById('inputBiayaAdmin').value = biayaAdmin;
        hitungContoh();
        document.getElementById('modalHarga').style.display = 'flex';
    }

    function closeModalHarga() {
        document.getElementById('modalHarga').style.display = 'none';
    }

    function hitungContoh() {
        var m3 = parseInt(document.getElementById('inputHargaM3').value) || 0;
        var admin = parseInt(document.getElementById('inputBiayaAdmin').value) || 0;
        var total = (10 * m3) + admin;
        document.getElementById('contohHitung').textContent = 'Rp ' + total.toLocaleString('id-ID');
    }

    // Event listener untuk simulasi real-time
    document.getElementById('inputHargaM3').addEventListener('input', hitungContoh);
    document.getElementById('inputBiayaAdmin').addEventListener('input', hitungContoh);

    // Tutup modal kalau klik di luar
    document.getElementById('modalHarga').addEventListener('click', function(e) {
        if (e.target === this) {
            closeModalHarga();
        }
    });
    </script>
    @endif
    @endauth
    {{-- ========================================== --}}
    {{-- END MODAL SETTING HARGA                   --}}
    {{-- ========================================== --}}

</body>

{{-- SweetAlert & Global Script --}}
<script>

    @if(session('success'))
        Swal.fire({
            icon: 'success',
            title: 'Berhasil!',
            text: "{{ session('success') }}",
            showConfirmButton: false,
            timer: 3000,
            customClass: {
                popup: 'rounded-2xl shadow-lg',
                title: 'text-neutral-800 font-semibold',
            }
        });
    @endif

    @if(session('error'))
        Swal.fire({
            icon: 'error',
            title: 'Gagal!',
            text: "{{ session('error') }}",
            showConfirmButton: true,
            confirmButtonColor: '#ef4444',
            customClass: {
                popup: 'rounded-2xl',
            }
        });
    @endif

    function hapusData(id, nama) {
        Swal.fire({
            title: "Apakah anda yakin?",
            text: "Data " + nama + " akan dihapus permanen!",
            icon: "warning",
            showCancelButton: true,
            confirmButtonText: "Ya, Hapus!",
            cancelButtonText: "Batal",
            customClass: {
                popup: 'rounded-2xl',
                confirmButton: 'tombol-setuju', 
                cancelButton: 'tombol-batal'
            },
            buttonsStyling: false
        }).then((result) => {
            if (result.isConfirmed) {
                document.getElementById('form-hapus-' + id).submit();
            }
        });
    }
</script>

</html>