@extends('layout.layout')

@section('content')
<style>
    /* NOTE: These styles should ideally be placed in your external CSS file.
    They are inline here for a complete, self-contained example.
    */

    #usage_fields {
        display: none;
    }

    #usage_fields2 {
        display: none;
    }

    .accessory-card {
        cursor: pointer;
        border: 1px solid #ccc;
        /* Default border */
        transition: all 0.2s ease-in-out;
        min-height: 80px;
        /* Give cards a consistent height */
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        user-select: none;
        /* Prevent text selection on click */
        border-radius: .5rem;
        /* Match Bootstrap card styling */
        background-color: #f8f9fa;
        /* Light background */
    }

    .accessory-card-input {
        /* Hide the default checkbox input */
        position: absolute;
        opacity: 0;
        pointer-events: none;
    }

    /* Target the card when the hidden input is checked */
    .accessory-card-input:checked+.accessory-card {
        border-color: #0d6efd;
        /* Primary color border */
        background-color: #e0f0ff;
        /* Light blue background */
        box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
        /* Focus/Checked ring */
    }

    /* Icon Placeholder (optional: you can replace this with FontAwesome icons if available) */
    .accessory-card-icon {
        font-size: 1.5rem;
        margin-bottom: 0.25rem;
        color: #6c757d;
    }
</style>
<div class="container-fluid py-4">

    <form action="{{ route('asset.store') }}" method="POST">
        @csrf

        {{-- --- 1. ASSET DETAILS --- --}}
        <div class="card shadow-sm mb-4">
            <div class="card-header bg-primary text-white fw-bold">
                Asset Details
            </div>
            <div class="card-body">
                <div class="row g-3">
                    <div class="col-md-6">
                        <div class="form-floating">
                            <input type="text" 
                                   class="form-control @error('name') is-invalid @enderror" 
                                   id="name" 
                                   placeholder="Asset Name" 
                                   name="name" 
                                   value="{{ request('name', old('name')) }}" 
                                   required>
                            <label for="name">Asset Name</label>
                            @error('name')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>

                    <div class="col-md-6">
                        <div class="form-floating">
                            <input
                                type="text"
                                class="form-control @error('vendor') is-invalid @enderror"
                                id="vendor"
                                name="vendor"
                                value="{{ old('vendor') }}"
                                placeholder="Enter vendors separated by commas"
                                required>
                            <label for="vendor">Vendors (comma-separated)</label>
                            @error('vendor')
                            <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>

                    <div class="col-md-6">
                        <div class="form-floating">
                            <input type="text" class="form-control @error('product') is-invalid @enderror" id="product" name="product" value="{{ old('product') }}" placeholder="Enter products separated by comma" required>
                            <label for="product">Products (comma-separated)</label>
                            @error('product')
                            <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="input-group">
                            <input type="number" step="0.01" class="form-control @error('purchase_cost') is-invalid @enderror" id="purchase_cost" name="purchase_cost" value="{{ old('purchase_cost') }}" placeholder="Purchase Cost" min="0" required>
                            <span class="input-group-text">EGP</span>
                            @error('purchase_cost')<div class="invalid-feedback">{{ $message }}</div>@enderror
                        </div>
                    </div>

                    <div class="col-md-6">
                        <div class="form-floating">
                            <input
                                type="text"
                                class="form-control @error('model') is-invalid @enderror"
                                id="model"
                                name="model"
                                value="{{ old('model') }}"
                                placeholder="Enter models separated by commas"
                                required>
                            <label for="model">Models (comma-separated)</label>
                            @error('model')
                            <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>

                    <div class="col-md-6">
                        <div class="input-group">
                            <span class="input-group-text"><i class="fas fa-calendar-alt"></i>Acquisition date</span>
                            <input type="date" class="form-control @error('acquisition_date') is-invalid @enderror" id="acquisition_date" name="acquisition_date" value="{{ old('acquisition_date') ?? now()->format('Y-m-d') }}" required>
                            @error('acquisition_date')<div class="invalid-feedback">{{ $message }}</div>@enderror
                        </div>
                    </div>

                    <div class="col-md-6">
                        <div class="form-floating">
                            <input type="text" class="form-control @error('serial_number') is-invalid @enderror" id="serial_number" placeholder="Serial Number" name="serial_number" value="{{ old('serial_number') }}" required>
                            <label for="serial_number">Serial Number</label>
                            @error('serial_number')<div class="invalid-feedback">{{ $message }}</div>@enderror
                        </div>
                    </div>

                    <div class="col-md-6">
                        <div class="input-group">
                            <span class="input-group-text"><i class="fas fa-calendar-alt"></i>Warranty Expiry Date</span>
                            <input type="date" class="form-control @error('warranty_expiry_date') is-invalid @enderror" id="warranty_expiry_date" name="warranty_expiry_date" value="{{ old('warranty_expiry_date') }}">
                            @error('warranty_expiry_date')<div class="invalid-feedback">{{ $message }}</div>@enderror
                        </div>
                    </div>

                    <div class="col-md-6">
                        <div class="form-floating">
                            <input type="text" class="form-control @error('manufacturer') is-invalid @enderror" id="manufacturer" placeholder="Manufacturer" name="manufacturer" value="{{ old('manufacturer') }}">
                            <label for="manufacturer">Manufacturer</label>
                            @error('manufacturer')<div class="invalid-feedback">{{ $message }}</div>@enderror
                        </div>
                    </div>

                    <div class="col-md-6">
                        <div class="form-floating">
                            <input type="text" class="form-control @error('barcode') is-invalid @enderror" id="barcode" placeholder="Barcode / QR Code" name="barcode" value="{{ old('barcode') }}">
                            <label for="barcode">Barcode / QR Code</label>
                            @error('barcode')<div class="invalid-feedback">{{ $message }}</div>@enderror
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="card shadow-sm mb-4">

            <div class="card-header bg-info text-white fw-bold">
                State
            </div>

            <div class="card-body">
                <div class="row g-3">
                    <div class="col-md-6">
                        <label for="is_currently_in_use" class="form-label fw-bold">Asset is Currently</label>
                        <select class="form-select @error('is_currently_in_use') is-invalid @enderror" id="is_currently_in_use" name="is_currently_in_use" required>
                            <option value="">Select Option</option>
                            <option value="in_use" {{ old('is_currently_in_use') == 'in_use' ? 'selected' : '' }}>In Use</option>
                            <option value="in_store" {{ old('is_currently_in_use') == 'in_store' ? 'selected' : '' }}>In Store</option>
                            <option value="in_repair" {{ old('is_currently_in_use') === 'in_repair' ? 'selected' : '' }}>In Repair</option>
                        </select>
                        @error('is_currently_in_use')<div class="invalid-feedback">{{ $message }}</div>@enderror
                    </div>
                    <div class="col-md-6" id="usage_fields">
                        <label for="department_id" class="form-label fw-bold">Department</label>
                        <select name="department_id" id="department_id" class="form-select rounded-3">
                            <option value="">Select</option>
                            @foreach ($departments as $department)
                            <option value="{{ $department->id }}">{{ $department->name }}</option>
                            @endforeach
                        </select>
                    </div>


                    <div class="col-md-6">
                        <label for="site" class="form-label fw-bold">Site</label>
                        <select class="form-select @error('site') is-invalid @enderror" id="site" name="site">
                            <option value="1" {{ old('site') == '1' ? 'selected' : '' }}>In Use</option>
                            <option value="0" {{ old('site') == '0' ? 'selected' : '' }}>Available</option>
                            {{-- Add other site options --}}
                        </select>
                        @error('site')<div class="invalid-feedback">{{ $message }}</div>@enderror
                    </div>


                    <div class="col-md-6" id="usage_fields2">
                        <label for="user_id" class="form-label fw-bold">Associated To User</label>
                        <select class="form-select" id="user_id" name="user_id">
                            <option value="">Select User</option>
                        </select>
                    </div>



                </div>
            </div>
        </div>
        {{-- --- 2. SPECS --- --}}
        <div class="card shadow-sm mb-4">
            <div class="card-header bg-info text-white fw-bold">
                Specs & Hardware
            </div>
            <div class="card-body">
                <div class="row g-3">
                    <div class="col-md-6">
                        <div class="form-floating">
                            <input type="text" class="form-control @error('processor') is-invalid @enderror" id="processor" placeholder="Processor" name="processor" value="{{ old('processor') }}">
                            <label for="processor">Processor</label>
                            @error('processor')<div class="invalid-feedback">{{ $message }}</div>@enderror
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="input-group">
                            <input type="number" class="form-control @error('ram') is-invalid @enderror" id="ram" placeholder="RAM" name="ram" value="{{ old('ram') }}">
                            <span class="input-group-text">GB</span>
                            @error('ram')<div class="invalid-feedback">{{ $message }}</div>@enderror
                        </div>
                    </div>
                    
                    <div class="col-md-6">
                        <div class="input-group">
                            <input type="text" class="form-control @error('hard_disk') is-invalid @enderror" id="hard_disk" placeholder="Hard Disk" name="hard_disk" value="{{ old('hard_disk') }}">
                            <span class="input-group-text">Hard Disk</span>
                            @error('hard_disk')<div class="invalid-feedback">{{ $message }}</div>@enderror
                        </div>
                    </div>
                </div>
            </div>
        </div>
        {{-- --- 3. ASSIGNMENT & ACCESSORIES --- --}}
        <div class="card shadow-sm mb-4">
            <div class="card-header bg-success text-white fw-bold">
                Accessories
            </div>
            <div class="card-body">
                <div class="row g-3">

                    {{-- Accessories Grid --}}
                    <div class="col-12">
                        <div class="row g-3">
                            @php
                            $accessories = [
                            'keyboard' => ['label' => 'Keyboard', 'icon' => '⌨️'],
                            'mouse' => ['label' => 'Mouse', 'icon' => '🖱️'],
                            'monitor' => ['label' => 'Monitor', 'icon' => '🖥️'],
                            'headphone' => ['label' => 'Headphone', 'icon' => '🎧'],
                            'bag' => ['label' => 'Bag/Case', 'icon' => '🎒'],
                            'usb_flash' => ['label' => 'USB Flash', 'icon' => '💾'],
                            ];
                            @endphp

                            @foreach ($accessories as $key => $details)
                            <div class="col-6 col-sm-4 col-lg-2">

                                {{-- Use a label that encompasses the card, tied to the input --}}
                                <label for="has_{{ $key }}" class="w-100">

                                    {{-- Hidden Checkbox Input --}}
                                    <input
                                        class="accessory-card-input"
                                        type="checkbox"
                                        id="has_{{ $key }}"
                                        name="has_{{ $key }}"
                                        value="1"
                                        {{ old('has_'.$key) ? 'checked' : '' }}>

                                    {{-- The Card UI that acts as the visual selector --}}
                                    <div class="accessory-card shadow-sm">
                                        <span class="accessory-card-icon">{{ $details['icon'] }}</span>
                                        <span class="fw-bold small">{{ $details['label'] }}</span>
                                    </div>
                                </label>

                            </div>
                            @endforeach
                        </div>
                    </div>
                </div>
            </div>
        </div>
        {{-- --- FORM ACTION BUTTONS --- --}}
        <div class="d-flex justify-content-end mb-5">
            <button type="submit" name="action" value="add_request" class="btn btn-success me-2">
                <i class="fas fa-plus me-1"></i> Save
            </button>
            <a href="{{ route('asset.index') }}" class="btn btn-danger">
                <i class="fas fa-times me-1"></i> Cancel
            </a>
        </div>
    </form>
</div>
@endsection
@push('scripts')
<script>
    const departments = @json($departments);
    $('#department_id').on('change', function() {
        const deptId = parseInt($(this).val());
        const userSelect = $('#user_id');

        userSelect.empty().append('<option value="">Select User</option>');

        const selectedDept = departments.find(dept => dept.id === deptId);
        if (selectedDept && selectedDept.staffs.length > 0) {
            selectedDept.staffs.forEach(user => {
                userSelect.append(new Option(`${user.first_name} ${user.last_name}`, user.user_id));
            });
        }

    });


    function toggleUsageFields() {
        const value = $('#is_currently_in_use').val();

        if (value === 'in_use') {
            $('#usage_fields').show();
            $('#usage_fields2').show();
            $('#department_id').prop('required', true);
            $('#user_id').prop('required', true);
        } else {
            $('#usage_fields').hide();
            $('#usage_fields2').hide();
            $('#department_id').prop('required', false);
            $('#user_id').prop('required', false);
        }
    }

    // trigger on load
    toggleUsageFields();

    // trigger on change
    $('#is_currently_in_use').on('change', function() {
        toggleUsageFields();
    });
</script>
@endpush