@extends('layout.layout')

@section('content')
<style>
    .accessory-card {
        cursor: pointer;
        border: 1px solid #ccc;
        transition: all 0.2s ease-in-out;
        min-height: 80px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        user-select: none;
        border-radius: .5rem;
        background-color: #f8f9fa;
    }

    #usage_fields {
        display: none;
    }

    #usage_fields2 {
        display: none;
    }

    .accessory-card-input {
        position: absolute;
        opacity: 0;
        pointer-events: none;
    }

    .accessory-card-input:checked+.accessory-card {
        border-color: #0d6efd;
        background-color: #e0f0ff;
        box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
    }

    .accessory-card-icon {
        font-size: 1.5rem;
        margin-bottom: 0.25rem;
        color: #6c757d;
    }
</style>

<div class="container-fluid py-4">

    <form action="{{ route('asset.update', $asset->id) }}" method="POST">
        @csrf
        @method('PUT')

        {{-- --- 1. ASSET DETAILS --- --}}
        <div class="card shadow-sm mb-4">
            <div class="card-header bg-primary text-white fw-bold">Edit Asset</div>
            <div class="card-body">
                <div class="row g-3">

                    <div class="col-md-6">
                        <div class="form-floating">
                            <input type="text" name="name" id="name"
                                class="form-control @error('name') is-invalid @enderror"
                                value="{{ old('name', $asset->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" name="vendor" id="vendor"
                                class="form-control @error('vendor') is-invalid @enderror"
                                value="{{ old('vendor', $asset->vendor) }}" 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" name="product" id="product"
                                class="form-control @error('product') is-invalid @enderror"
                                value="{{ old('product', $asset->product) }}" 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" name="purchase_cost" id="purchase_cost"
                                class="form-control @error('purchase_cost') is-invalid @enderror"
                                value="{{ old('purchase_cost', $asset->purchase_cost) }}" 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" name="model" id="model"
                                class="form-control @error('model') is-invalid @enderror"
                                value="{{ old('model', $asset->model) }}" 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></span>
                            <input type="date" name="acquisition_date" id="acquisition_date"
                                class="form-control @error('acquisition_date') is-invalid @enderror"
                                value="{{ old('acquisition_date', $asset->acquisition_date) }}" 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" name="serial_number" id="serial_number"
                                class="form-control @error('serial_number') is-invalid @enderror"
                                value="{{ old('serial_number', $asset->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></span>
                            <input type="date" name="warranty_expiry_date" id="warranty_expiry_date"
                                class="form-control @error('warranty_expiry_date') is-invalid @enderror"
                                value="{{ old('warranty_expiry_date', $asset->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" name="manufacturer" id="manufacturer"
                                class="form-control @error('manufacturer') is-invalid @enderror"
                                value="{{ old('manufacturer', $asset->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" name="barcode" id="barcode"
                                class="form-control @error('barcode') is-invalid @enderror"
                                value="{{ old('barcode', $asset->barcode) }}">
                            <label for="barcode">Barcode / QR Code</label>
                            @error('barcode')<div class="invalid-feedback">{{ $message }}</div>@enderror
                        </div>
                    </div>

                </div>
            </div>
        </div>
        {{-- --- 2. STATE --- --}}
        <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 name="is_currently_in_use" id="is_currently_in_use" class="form-select">
                            <option value="in_use" {{ old('is_currently_in_use', $asset->is_currently_in_use) == 'in_use' ? 'selected' : '' }}>In Use</option>
                            <option value="in_store" {{ old('is_currently_in_use', $asset->is_currently_in_use) == 'in_store' ? 'selected' : '' }}>In Store</option>
                            <option value="in_repair" {{ old('is_currently_in_use', $asset->is_currently_in_use) == 'in_repair' ? 'selected' : '' }}>In Repair</option>
                        </select>
                    </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 }}" {{ old('department_id', $asset->department_id) == $department->id ? 'selected' : '' }}>
                                {{ $department->name }}
                            </option>
                            @endforeach
                        </select>
                    </div>



                    <div class="col-md-6">
                        <label for="site" class="form-label fw-bold">Site</label>
                        <select name="site" id="site" class="form-select">
                            <option value="1" {{ old('site', $asset->site) == '1' ? 'selected' : '' }}>In Use</option>
                            <option value="0" {{ old('site', $asset->site) == '0' ? 'selected' : '' }}>Available</option>
                        </select>
                    </div>

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

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

        {{-- --- 3. 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" name="processor" id="processor"
                                class="form-control @error('processor') is-invalid @enderror"
                                value="{{ old('processor', $asset->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" name="ram" id="ram"
                                class="form-control @error('ram') is-invalid @enderror"
                                value="{{ old('ram', $asset->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" name="hard_disk" id="hard_disk"
                                class="form-control @error('hard_disk') is-invalid @enderror"
                                value="{{ old('hard_disk', $asset->hard_disk) }}">
                            @error('hard_disk')<div class="invalid-feedback">{{ $message }}</div>@enderror
                        </div>
                    </div>
                </div>
            </div>
        </div>

        {{-- --- 4. 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">
                    @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">
                        <label for="has_{{ $key }}" class="w-100">
                            <input
                                class="accessory-card-input"
                                type="checkbox"
                                id="has_{{ $key }}"
                                name="has_{{ $key }}"
                                value="1"
                                {{ old('has_'.$key, $asset->{'has_'.$key}) ? 'checked' : '' }}>
                            <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>

        {{-- --- FORM ACTION BUTTONS --- --}}
        <div class="d-flex justify-content-end mb-5">
            <button type="submit" class="btn btn-primary me-2">
                <i class="fas fa-save me-1"></i> Update Asset
            </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);
const currentUserId = {{ $asset->user_id ?? 'null' }};

$('#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 => {
            const isSelected = user.user_id === currentUserId;
            userSelect.append(new Option(`${user.first_name} ${user.last_name}`, user.user_id, isSelected, isSelected));
        });
    }
});


    // Trigger once for preloaded department
    $('#department_id').trigger('change');



    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);
        }
    }

    $('#is_currently_in_use').on('change', toggleUsageFields);

    // Run on page load (important for edit)
    toggleUsageFields();
</script>
@endpush