<x-layout>
    <div class="mb-4">
        <h2 class="text-xl font-semibold text-white">Add Unit</h2>
    </div>
    <div class="bg-slate-800 rounded-md shadow-lg border-t-4 border-t-indigo-500 max-w-full">
        <div class="border-b border-slate-700 px-6 py-3.5">
            <h3 class="text-base font-medium text-slate-100">Unit Details Form</h3>
        </div>
        <form action="{{ route('master_unit.store') }}" method="POST" id="unitForm">
            @csrf
            <div class="p-6 space-y-5">
                <div class="grid grid-cols-1 sm:grid-cols-2 gap-6">
                    <div>
                        <label for="unit_code" class="block text-sm font-medium text-slate-300 mb-1">
                            Unit Code <span class="text-red-400">*</span>
                        </label>
                        <input type="text" name="unit_code" id="unit_code" value="{{ old('unit_code') }}"
                            class="block w-full rounded-sm border border-slate-600 bg-slate-900 py-2 px-3 text-sm text-white placeholder:text-slate-500 focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500 transition-colors" onKeyPress="return preventSpecialChar(event);">
                        @error('unit_code')
                            <span class="text-red-400 text-xs italic mt-1 block">{{ $message }}</span>
                        @enderror
                    </div>
                    <div>
                        <label for="unit_name" class="block text-sm font-medium text-slate-300 mb-1">
                            Unit Name <span class="text-red-400">*</span>
                        </label>
                        <input type="text" name="unit_name" id="unit_name" value="{{ old('unit_name') }}"
                            class="block w-full rounded-sm border border-slate-600 bg-slate-900 py-2 px-3 text-sm text-white placeholder:text-slate-500 focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500 transition-colors">
                        @error('unit_name')
                            <span class="text-red-400 text-xs italic mt-1 block">{{ $message }}</span>
                        @enderror
                    </div>
                </div>
                <div class="grid grid-cols-1 sm:grid-cols-2 gap-6">
                    <div class="w-full">
                        <label for="project_code" class="block text-sm font-medium text-slate-300 mb-1">
                            Project <span class="text-red-400">*</span>
                        </label>
                        <select id="project_code" name="project_code"
                            class="block w-full rounded-sm border border-slate-600 bg-slate-900 py-2 pl-3 pr-10 text-sm text-white focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500 cursor-pointer [&>option]:bg-slate-800">
                            <option value="" disabled selected> --- </option>
                            @forelse ($projects as $project)
                                <option value="{{ $project->project_code }}">{{ $project->project_code . ' - ' .$project->project_name }}</option>
                            @empty
                                <option value="">Project not found</option>
                            @endforelse
                        </select>
                        @error('project_code')
                            <span class="text-red-400 text-xs italic mt-1 block">{{ $message }}</span>
                        @enderror
                    </div>
                    <div class="w-full">
                        <label for="status" class="block text-sm font-medium text-slate-300 mb-1">
                            Status <span class="text-red-400">*</span>
                        </label>
                        <select id="status" name="status"
                            class="block w-full rounded-sm border border-slate-600 bg-slate-900 py-2 pl-3 pr-10 text-sm text-white focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500 cursor-pointer [&>option]:bg-slate-800">
                            <option value="" disabled selected> --- </option>
                            <option value="1">Active</option>
                            <option value="0">Inactive</option>
                        </select>
                        @error('status')
                            <span class="text-red-400 text-xs italic mt-1 block">{{ $message }}</span>
                        @enderror
                    </div>
                </div>
                <div>
                    <label for="description" class="block text-sm font-medium text-slate-300 mb-1">
                        Description
                    </label>
                    <textarea name="description" id="description" rows="3" placeholder="Unit desriptions ..."
                        class="block w-full rounded-sm border border-slate-600 bg-slate-900 py-2 px-3 text-sm text-white placeholder:text-slate-500 focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500 transition-colors"></textarea>
                </div>
            </div>
            <div class="bg-slate-900/50 border-t border-slate-700 px-6 py-4 flex items-center justify-end gap-3 rounded-b-md">
                <a href="/unit/master_unit" class="inline-flex items-center gap-2 text-sm font-medium bg-slate-700 text-white hover:bg-slate-600 px-4 py-2 rounded-sm transition-colors border border-slate-600">
                    <x-iconpark-back class="w-4 h-4" /> Batal
                </a>
                <button type="submit" class="inline-flex items-center gap-2 text-sm font-medium bg-indigo-600 text-white hover:bg-indigo-500 px-4 py-2 rounded-sm transition-colors cursor-pointer shadow-sm">
                    <x-iconpark-save class="w-4 h-4" /> Simpan
                </button>
            </div>
        </form>
    </div>
    <script>
        function preventSpecialChar(evt) {
            if (evt.which) {
                var charCode = evt.which;
            } else if (document.all && event.keyCode) {
                var charCode = event.keyCode;
            } else {
                return true;
            }

            return (
                (charCode >= 48 && charCode <= 57) || // 0-9
                (charCode >= 65 && charCode <= 90) || // A-Z
                (charCode >= 97 && charCode <= 122) || // a-z
                charCode == 45 || // -
                charCode == 46 || // .
                charCode == 8    // Backspace
            );
        }
        
        const form = document.getElementById('unitForm');
	    form.addEventListener('submit', (event) => {
            event.preventDefault();

            let unit_code        = document.getElementById('unit_code');
            let unit_name        = document.getElementById('unit_name');
            let project_code     = document.getElementById('project_code');
            let status           = document.getElementById('status');

            // Konfigurasi warna default untuk SweetAlert agar Dark Mode
            const swalDarkConfig = {
                background: '#1e293b', // bg-slate-800
                color: '#f8fafc'       // text-slate-50
            };

            if(unit_code.value == ''){
                unit_code.blur();
                Swal.fire({
                    // title: "Good job!",
                    text: "Unit code is required",
                    icon: "warning",
                    ...swalDarkConfig
                }).then(() =>{
                    unit_code.focus()
                })

                return false;
            }

            if(unit_name.value == ''){
                unit_name.blur();
                Swal.fire({
                    // title: "Good job!",
                    text: "Unit name is required",
                    icon: "warning",
                    ...swalDarkConfig
                }).then(() =>{
                    unit_name.focus()
                })

                return false;
            }

            if(project_code.value == ''){
                Swal.fire({
                    // title: "Good job!",
                    text: "Project is required",
                    icon: "warning",
                    ...swalDarkConfig
                });
                return false;
            }

            if(status.value == ''){
                Swal.fire({
                    // title: "Good job!",
                    text: "Unit status is required",
                    icon: "warning",
                    ...swalDarkConfig
                });
                return false;
            }

            Swal.fire({
                title: "Data saved",
                // text: "You clicked the button!",
                icon: "success",
                    ...swalDarkConfig
            });

            form.submit();
        })
    </script>
</x-layout>