@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
                    :items="[{ 'title': 'Laporan Keseluruhan', 'icon': 'fas fa-users', 'url': '{{ route('reports') }}' },
                    { 'title': 'Stok Audit', 'icon': 'fas fa-users' }]">
                </breadcrumb>

                <div class="container">
                    @if ($errors->any())
                    <div id="error-alert" class="flex justify-center">
                        <div class="flex items-center p-4 text-red-800 border-t-4 border-red-300 bg-red-50 px-10" role="alert">
                            <div class="ms-3 text-sm font-medium ml-2 ">
                            @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">
                            <div class="bg-yellow-600 text-gray-200 text-lg px-6 py-4 rounded-t-lg">
                                <a href="/reports">
                                    <i class="fas fa-backspace text-white"></i>
                                </a>
                                 <span class="text-center mx-auto text-white font-bold">
                                    Laporan Stok Audit
                                </span>
                            </div>

                            <form method="get" id="formStokAudit" action="{{ route('reports.stok-audit.show') }}">
                                <div class="rounded bg-white shadow p-6">

                                    {{-- PILIHAN TARIKH --}}
                                    <div class="pb-4">
                                        <label class="font-semibold text-gray-700 block pb-1">
                                            Pilihan Tarikh
                                        </label>

                                        <div class="flex items-center space-x-6 mb-3">
                                            <label class="flex items-center">
                                                <input type="radio" name="dateOption" value="manual" checked class="mr-2">
                                                Pilih Tarikh
                                            </label>

                                            <label class="flex items-center">
                                                <input type="radio" name="dateOption" value="current" class="mr-2">
                                                Tarikh Semasa (Hari Ini)
                                            </label>
                                        </div>

                                        <label class="font-semibold text-gray-700 block pb-1">
                                            Tarikh
                                        </label>

                                        <div class="flex">
                                            <span
                                                class="text-gray-600 border border-2 rounded-l px-4 py-2"
                                                style="background-color: rgb(249, 250, 251);">
                                                Pilih
                                            </span>

                                            <input type="date"
                                                id="stock_audit_monthYear"
                                                name="monthYear"
                                                value=""
                                                class="border border-2 border-l-0 rounded-r px-4 py-2 w-80 mr-2">

                                            <div class="hidden">
                                                <input type="radio" name="generateType" id="generateTypePdf" value="pdf">
                                                <input type="radio" name="generateType" id="generateTypeExcel" value="excel">
                                            </div>
                                            <button id="generateExcel"
                                                class="border border-yellow-600 text-yellow-600 py-2 px-8 rounded-xl hover:bg-yellow-600 hover:text-white transition-all duration-300 ml-5"
                                                type="button">
                                                <i class="fas fa-file-excel mr-2"></i>Excel
                                            </button>
                                            <button id="generatePdf"
                                                class="border border-yellow-600 text-yellow-600 py-2 px-8 rounded-xl hover:bg-yellow-600 hover:text-white transition-all duration-300 ml-5"
                                                type="button">
                                                <i class="fas fa-eye mr-2"></i>View
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>

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

    </div>
@endsection

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

            let form = document.querySelector('#formStokAudit');

            // ===== BUTTON PDF =====
            document.querySelector('#generatePdf').addEventListener("click", function() {
                document.querySelector('#generateTypePdf').checked = true;
                form.submit();
            });

            // ===== BUTTON EXCEL =====
            document.querySelector('#generateExcel').addEventListener("click", function() {
                document.querySelector('#generateTypeExcel').checked = true;
                form.submit();
            });

            // ===== TARIKH OPTION =====
            const dateInput = document.getElementById('stock_audit_monthYear');
            const dateOptions = document.querySelectorAll('input[name="dateOption"]');

            dateOptions.forEach(option => {
            option.addEventListener('change', function () {

                if (this.value === 'current') {

                    let today = new Date();
                    let day = String(today.getDate()).padStart(2, '0');
                    let month = String(today.getMonth() + 1).padStart(2, '0');
                    let year = today.getFullYear();

                    dateInput.value = year + '-' + month + '-' + day;

                    // Ganti readOnly dengan disable
                    dateInput.disabled = true;

                } else {
                    dateInput.disabled = false;
                    dateInput.value = '';
                }
            });
        });

            // ===== AUTO HIDE ERROR =====
            const errorAlert = document.getElementById("error-alert");

            if (errorAlert) {
                setTimeout(function() {
                    errorAlert.classList.add("opacity-0");
                    setTimeout(function() {
                        errorAlert.style.display = "none";
                    }, 500);
                }, 5000);
            }
        });
    </script>
@endpush