@extends('layouts.app')

@section('content')
<div class="bg-gray-900 opacity-50 hidden fixed inset-0 z-10" id="sidebarBackdrop"></div>

<div id="main-content" class="h-full w-full bg-gray-50 relative overflow-y-auto">
    <main>
        <div class="pt-6 px-4">

            {{-- Breadcrumb --}}
            <breadcrumb
                :items="[
                    { 'title': 'Laporan Keseluruhan', 'icon': 'fas fa-users', 'url': '{{ route('reports') }}' },
                    { 'title': 'Data Pelanggan By Cawangan', 'icon': 'fas fa-users' }
                ]">
            </breadcrumb>

            <div class="container">

                {{-- Error Alert --}}
                @if ($errors->any())
                <div class="flex justify-center mb-4">
                    <div class="flex items-center p-4 text-red-800 border-t-4 border-red-300 bg-red-50 px-10"
                         role="alert">
                        <svg class="w-4 h-4" xmlns="http://www.w3.org/2000/svg" fill="currentColor"
                             viewBox="0 0 20 20">
                            <path d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5Z"/>
                        </svg>
                        <div class="ml-3 text-sm font-medium">
                            @foreach ($errors->all() as $error)
                                {{ $error }}
                            @endforeach
                        </div>
                    </div>
                </div>
                @endif

                <div class="flex w-full">
                    <div class="xl:w-2/3 2xl:w-1/2 p-8 mx-auto">

                        {{-- Header --}}
                        <div class="bg-yellow-600 text-gray-200 text-lg px-6 py-4 rounded-t-lg">
                            <a href="{{ route('reports') }}">
                                <i class="fas fa-backspace text-white"></i>
                            </a>
                            <span class="text-white font-bold ml-2">
                                Laporan Data Pelanggan By Cawangan
                            </span>
                        </div>

                        {{-- FORM --}}
                        <form method="GET"
                              id="formStokAudit"
                              action="{{ route('reports.dataPelangganBycaw.show') }}">

                            <iframe name="downloadFrame" class="hidden"></iframe>

                            <div class="rounded bg-white shadow p-6">

                                {{-- Tahun --}}
                                <div class="pb-6">
                                    <label class="font-semibold text-gray-700 block pb-1">
                                        Tahun Laporan
                                    </label>

                                    <div class="flex items-center">
                                        <span class="text-gray-600 border rounded-l px-4 py-2 bg-gray-50">
                                            Tahun
                                        </span>

                                        <select name="year"
                                                id="report_year"
                                                class="border border-l-0 rounded-r px-4 py-2 w-40 mr-4"
                                                required>
                                            <option value="">-- Pilih Tahun --</option>
                                            @for ($y = now()->year; $y >= 2019; $y--)
                                                <option value="{{ $y }}">{{ $y }}</option>
                                            @endfor
                                        </select>

                                        {{-- Hidden generate type --}}
                                        <input type="radio" name="generateType" id="generateTypePdf" value="pdf" hidden>
                                        <input type="radio" name="generateType" id="generateTypeExcel" value="excel" hidden>

                                        {{-- Excel --}}
                                        <button type="button" id="generateExcel"
                                                class="border border-yellow-600 text-yellow-600 py-2 px-6
                                                       rounded-xl hover:bg-yellow-600 hover:text-white transition-all">
                                            <i class="fas fa-file-excel mr-2"></i> Excel
                                        </button>

                                        {{-- PDF --}}
                                        <button type="button" id="generatePdf"
                                                class="border border-yellow-600 text-yellow-600 py-2 px-6 ml-4
                                                       rounded-xl hover:bg-yellow-600 hover:text-white transition-all">
                                            <i class="fas fa-eye mr-2"></i> View
                                        </button>
                                    </div>
                                </div>

                                {{-- Pilih Cawangan --}}
                                <div class="pb-6">
                                    <label class="font-semibold text-gray-700 block pb-2">
                                        Pilih Cawangan
                                    </label>

                                    {{-- Select All --}}
                                    <div class="mb-2">
                                        <label class="inline-flex items-center">
                                            <input type="checkbox" id="checkAllCawangan"
                                                class="rounded border-gray-300">
                                            <span class="ml-2 text-sm font-medium">Pilih Semua</span>
                                        </label>
                                    </div>

                                    <div id="cawanganContainer"
                                        class="grid grid-cols-2 gap-3 max-h-64 overflow-y-auto
                                                border rounded p-4 bg-gray-50 text-sm text-gray-500">
                                        Memuatkan senarai cawangan...
                                    </div>
                                </div>

                            </div>
                        </form>

                    </div>
                </div>
            </div>
        </div>
    </main>

    @include('layouts.footer')
</div>

{{-- Loading Overlay --}}
<div id="loadingOverlay"
     class="hidden fixed inset-0 bg-black bg-opacity-50 z-50 flex items-center justify-center">
    <div class="bg-white p-6 rounded-xl flex flex-col items-center">
        <svg class="animate-spin h-10 w-10 text-yellow-600 mb-4"
             xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
            <circle class="opacity-25" cx="12" cy="12" r="10"
                    stroke="currentColor" stroke-width="4"></circle>
        </svg>
        <span class="text-gray-700 font-semibold">
            Sedang menjana laporan..
        </span>
    </div>
</div>
@endsection

@push('additional_scripts')
<script>
document.addEventListener('DOMContentLoaded', function () {

    const form = document.getElementById('formStokAudit');
    const loading = document.getElementById('loadingOverlay');

    const container = document.getElementById('cawanganContainer');
    const checkAll  = document.getElementById('checkAllCawangan');

    let downloadFrame = null;
    let forceHideTimeout = null;

    // =====================
    // Fetch Cawangan API
    // =====================
    fetch("{{ config('api.url') }}/api/cawangan")
        .then(res => res.json())
        .then(data => {
            container.innerHTML = '';
            if (!data.length) {
                container.innerHTML = '<span class="text-gray-400">Tiada cawangan</span>';
                return;
            }
            data.forEach(caw => {
                container.innerHTML += `
                    <label class="flex items-center space-x-2">
                        <input type="checkbox"
                               name="cawangan[]"
                               value="${caw.kodcaw}"
                               class="cawangan-item rounded border-gray-300">
                        <span>${caw.kodcaw} - ${caw.details_caw}</span>
                    </label>
                `;
            });
        })
        .catch(() => {
            container.innerHTML = '<span class="text-red-500">Gagal load cawangan</span>';
        });

    // =====================
    // Select All Checkbox
    // =====================
    checkAll.addEventListener('change', function () {
        document.querySelectorAll('.cawangan-item').forEach(cb => cb.checked = this.checked);
    });

    // =====================
    // Submit Form Function
    // =====================
    function submitForm(isExcel = false) {

        if (document.querySelectorAll('.cawangan-item:checked').length === 0) {
            alert('Sila pilih sekurang-kurangnya satu cawangan');
            return;
        }

        // set generateType
        if (isExcel) document.getElementById('generateTypeExcel').checked = true;
        else document.getElementById('generateTypePdf').checked = true;

        // Show loading
        loading.classList.remove('hidden');

        // Excel via iframe
        if (isExcel) {
            if (downloadFrame) downloadFrame.remove();
            downloadFrame = document.createElement('iframe');
            downloadFrame.name = 'downloadFrame';
            downloadFrame.style.display = 'none';
            document.body.appendChild(downloadFrame);
            form.target = 'downloadFrame';
        } else {
            form.removeAttribute('target');
        }

        form.submit();

        // Hide overlay after max 15 sec
        forceHideTimeout = setTimeout(() => loading.classList.add('hidden'), 15000);
    }

    // =====================
    // Button Handlers
    // =====================
    document.getElementById('generateExcel').addEventListener('click', () => submitForm(true));
    document.getElementById('generatePdf').addEventListener('click', () => submitForm(false));

});
</script>
@endpush