@extends('adminlte::page')

@section('title', 'Create Asset')

@section('content_header')
    <div class="d-flex justify-content-between align-items-center">
        <div>
            <h1 class="mb-0 font-weight-bold text-dark" style="font-size: 1.6rem;">
                <i class="fas fa-cubes text-primary mr-2" style="font-size:1.4rem;"></i> Create New Asset
            </h1>
            <p class="text-muted mb-0 small">Register a new asset into the system</p>
        </div>
        <a class="btn btn-outline-secondary btn-sm px-3" href="{{ route('assets.index') }}">
            <i class="fas fa-arrow-left mr-1"></i> Back to List
        </a>
    </div>
@stop

@section('content')
    <div class="row justify-content-center mt-3">
        <div class="col-lg-12">

            @if ($errors->any())
                <div class="alert alert-danger alert-dismissible fade show mb-4 shadow-sm" role="alert" style="border-left: 4px solid #dc3545; border-radius: 8px;">
                    <div class="d-flex align-items-start">
                        <div class="mr-3 mt-1">
                            <i class="fas fa-exclamation-circle fa-lg text-danger"></i>
                        </div>
                        <div>
                            <h6 class="font-weight-bold mb-1 text-danger">Please correct the following errors:</h6>
                            <ul class="mb-0 pl-3 small">
                                @foreach ($errors->all() as $error)
                                    <li>{{ $error }}</li>
                                @endforeach
                            </ul>
                        </div>
                    </div>
                    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
            @endif

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

                {{-- ===================== SECTION 1: Identity & Classification ===================== --}}
                <div class="form-section-card mb-4">
                    <div class="form-section-header" style="border-left-color: #4361ee;">
                        <div class="section-icon" style="background: linear-gradient(135deg, #4361ee, #3a0ca3);">
                            <i class="fas fa-fingerprint"></i>
                        </div>
                        <div>
                            <h6 class="mb-0 font-weight-bold">Identity &amp; Classification</h6>
                            <small class="text-muted">Core identifiers for this asset</small>
                        </div>
                    </div>
                    <div class="form-section-body">
                        <div class="row">
                            <div class="col-md-3">
                                <div class="form-field">
                                    <label class="field-label">Asset Tag <span class="text-danger">*</span></label>
                                    <div class="input-wrapper">
                                        <span class="input-icon"><i class="fas fa-tag"></i></span>
                                        <input type="text" name="asset_tag" class="styled-input @error('asset_tag') is-invalid @enderror" placeholder="e.g. AST-001" value="{{ old('asset_tag') }}" required>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="form-field">
                                    <label class="field-label">Category Code</label>
                                    <div class="input-wrapper">
                                        <span class="input-icon"><i class="fas fa-code"></i></span>
                                        <input type="text" name="category_code" class="styled-input" placeholder="e.g. IT-EQP" value="{{ old('category_code') }}">
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="form-field">
                                    <label class="field-label">Internal Serial No</label>
                                    <div class="input-wrapper">
                                        <span class="input-icon"><i class="fas fa-barcode"></i></span>
                                        <input type="text" name="serial_no" class="styled-input" placeholder="e.g. SER-12345" value="{{ old('serial_no') }}">
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="form-field">
                                    <label class="field-label">Manufacturer Serial No</label>
                                    <div class="input-wrapper">
                                        <span class="input-icon"><i class="fas fa-industry"></i></span>
                                        <input type="text" name="manufacturer_serial_no" class="styled-input" placeholder="e.g. SN2023ABCD" value="{{ old('manufacturer_serial_no') }}">
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="row mt-2">
                            <div class="col-md-6">
                                <div class="form-field">
                                    <label class="field-label">Asset Name <span class="text-danger">*</span></label>
                                    <div class="input-wrapper">
                                        <span class="input-icon"><i class="fas fa-box"></i></span>
                                        <input type="text" name="name" class="styled-input @error('name') is-invalid @enderror" placeholder="Full descriptive name of the asset" value="{{ old('name') }}" required>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="form-field">
                                    <label class="field-label">Model</label>
                                    <div class="input-wrapper">
                                        <span class="input-icon"><i class="fas fa-laptop"></i></span>
                                        <input type="text" name="model" class="styled-input" placeholder="e.g. ThinkPad T14" value="{{ old('model') }}">
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="form-field">
                                    <label class="field-label">Status <span class="text-danger">*</span></label>
                                    <div class="input-wrapper select-wrapper">
                                        <span class="input-icon"><i class="fas fa-toggle-on"></i></span>
                                        <select name="status" class="styled-input styled-select @error('status') is-invalid @enderror" required>
                                            <option value="active" {{ old('status', 'active') == 'active' ? 'selected' : '' }}>Active</option>
                                            <option value="disposed" {{ old('status') == 'disposed' ? 'selected' : '' }}>Disposed</option>
                                            <option value="under_maintenance" {{ old('status') == 'under_maintenance' ? 'selected' : '' }}>Under Maintenance</option>
                                            <option value="transferred" {{ old('status') == 'transferred' ? 'selected' : '' }}>Transferred</option>
                                            <option value="missing" {{ old('status') == 'missing' ? 'selected' : '' }}>Missing</option>
                                            <option value="condemned" {{ old('status') == 'condemned' ? 'selected' : '' }}>Condemned</option>
                                        </select>
                                        <span class="select-arrow"><i class="fas fa-chevron-down"></i></span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                {{-- ===================== SECTION 2: Assignment & Sourcing ===================== --}}
                <div class="form-section-card mb-4">
                    <div class="form-section-header" style="border-left-color: #4cc9f0;">
                        <div class="section-icon" style="background: linear-gradient(135deg, #4cc9f0, #4895ef);">
                            <i class="fas fa-sitemap"></i>
                        </div>
                        <div>
                            <h6 class="mb-0 font-weight-bold">Assignment &amp; Sourcing</h6>
                            <small class="text-muted">Where this asset lives and who supplies it</small>
                        </div>
                    </div>
                    <div class="form-section-body">
                        <div class="row">
                            <div class="col-md-3">
                                <div class="form-field">
                                    <label class="field-label">Main Category <span class="text-danger">*</span></label>
                                    <div class="input-wrapper select-wrapper">
                                        <span class="input-icon"><i class="fas fa-layer-group"></i></span>
                                        <select id="main_category_id" class="styled-input styled-select" required>
                                            <option value="">Select Main Category</option>
                                            @foreach($categories->where('parent_id', 2) as $category)
                                                <option value="{{ $category->id }}">{{ $category->name }} — {{ $category->code }}</option>
                                            @endforeach
                                        </select>
                                        <span class="select-arrow"><i class="fas fa-chevron-down"></i></span>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="form-field">
                                    <label class="field-label">Sub Category <span class="text-danger">*</span></label>
                                    <div class="input-wrapper select-wrapper">
                                        <span class="input-icon"><i class="fas fa-list-ul"></i></span>
                                        <select name="category_id" id="category_id" class="styled-input styled-select @error('category_id') is-invalid @enderror" required>
                                            <option value="">Select Sub Category</option>
                                        </select>
                                        <span class="select-arrow"><i class="fas fa-chevron-down"></i></span>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="form-field">
                                    <label class="field-label">Location <span class="text-danger">*</span></label>
                                    <div class="input-wrapper select-wrapper">
                                        <span class="input-icon"><i class="fas fa-map-marker-alt"></i></span>
                                        <select name="location_id" class="styled-input styled-select @error('location_id') is-invalid @enderror" required>
                                            <option value="">Select Location</option>
                                            @foreach($locations as $location)
                                                <option value="{{ $location->id }}" {{ old('location_id') == $location->id ? 'selected' : '' }}>{{ $location->name }}</option>
                                            @endforeach
                                        </select>
                                        <span class="select-arrow"><i class="fas fa-chevron-down"></i></span>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="form-field">
                                    <label class="field-label">Department</label>
                                    <div class="input-wrapper select-wrapper">
                                        <span class="input-icon"><i class="fas fa-building"></i></span>
                                        <select name="department_id" class="styled-input styled-select">
                                            <option value="">Select Department</option>
                                            @foreach($departments as $department)
                                                <option value="{{ $department->id }}" {{ old('department_id') == $department->id ? 'selected' : '' }}>{{ $department->name }}</option>
                                            @endforeach
                                        </select>
                                        <span class="select-arrow"><i class="fas fa-chevron-down"></i></span>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="row mt-2">
                            <div class="col-md-3">
                                <div class="form-field">
                                    <label class="field-label">Manufacturer</label>
                                    <div class="input-wrapper">
                                        <span class="input-icon"><i class="fas fa-industry"></i></span>
                                        <input type="text" name="manufacturer" class="styled-input" placeholder="e.g. Dell, HP, Samsung" value="{{ old('manufacturer') }}">
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="form-field">
                                    <label class="field-label">Vendor</label>
                                    <div class="input-wrapper select-wrapper">
                                        <span class="input-icon"><i class="fas fa-store"></i></span>
                                        <select name="vendor_id" class="styled-input styled-select">
                                            <option value="">Select Vendor</option>
                                            @foreach($vendors as $vendor)
                                                <option value="{{ $vendor->id }}" {{ old('vendor_id') == $vendor->id ? 'selected' : '' }}>{{ $vendor->name }}</option>
                                            @endforeach
                                        </select>
                                        <span class="select-arrow"><i class="fas fa-chevron-down"></i></span>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="form-field">
                                    <label class="field-label">Quantity</label>
                                    <div class="input-wrapper">
                                        <span class="input-icon"><i class="fas fa-sort-numeric-up"></i></span>
                                        <input type="number" name="quantity" class="styled-input" min="1" value="{{ old('quantity', 1) }}">
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="form-field">
                                    <label class="field-label">Year of Manufacture</label>
                                    <div class="input-wrapper">
                                        <span class="input-icon"><i class="fas fa-calendar-alt"></i></span>
                                        <input type="number" name="year_of_manufacture" class="styled-input" placeholder="YYYY" min="1900" max="{{ date('Y') }}" value="{{ old('year_of_manufacture') }}">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                {{-- ===================== SECTION 3: Financial Information ===================== --}}
                <div class="form-section-card mb-4">
                    <div class="form-section-header" style="border-left-color: #2ecc71;">
                        <div class="section-icon" style="background: linear-gradient(135deg, #2ecc71, #27ae60);">
                            <i class="fas fa-money-bill-wave"></i>
                        </div>
                        <div>
                            <h6 class="mb-0 font-weight-bold">Financial Information</h6>
                            <small class="text-muted">Purchase details and current valuation</small>
                        </div>
                    </div>
                    <div class="form-section-body">
                        <div class="row">
                            <div class="col-md-3">
                                <div class="form-field">
                                    <label class="field-label">Purchase Date <span class="text-danger">*</span></label>
                                    <div class="input-wrapper">
                                        <span class="input-icon"><i class="fas fa-calendar-check"></i></span>
                                        <input type="date" name="purchase_date" id="purchase_date" class="styled-input @error('purchase_date') is-invalid @enderror" value="{{ old('purchase_date') }}" required>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="form-field">
                                    <label class="field-label">Purchase Cost <span class="text-danger">*</span></label>
                                    <div class="input-wrapper">
                                        <span class="input-icon currency-symbol">₦</span>
                                        <input type="text" name="purchase_cost" id="purchase_cost" class="styled-input currency-input @error('purchase_cost') is-invalid @enderror" placeholder="0.00" value="{{ old('purchase_cost') }}" required>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="form-field">
                                    <label class="field-label">Current Value <span class="text-danger">*</span></label>
                                    <div class="input-wrapper">
                                        <span class="input-icon currency-symbol">₦</span>
                                        <input type="text" name="current_value" id="current_value" class="styled-input currency-input @error('current_value') is-invalid @enderror" placeholder="0.00" value="{{ old('current_value') }}" required>
                                    </div>
                                    <p class="field-hint"><i class="fas fa-info-circle mr-1"></i>Auto-filled from purchase cost</p>
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="form-field">
                                    <label class="field-label">Salvage Value</label>
                                    <div class="input-wrapper">
                                        <span class="input-icon currency-symbol">₦</span>
                                        <input type="text" name="salvage_value" class="styled-input currency-input" placeholder="0.00" value="{{ old('salvage_value', 0) }}">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                {{-- ===================== SECTION 4: Depreciation Details ===================== --}}
                <div class="form-section-card mb-4">
                    <div class="form-section-header" style="border-left-color: #f39c12;">
                        <div class="section-icon" style="background: linear-gradient(135deg, #f39c12, #e67e22);">
                            <i class="fas fa-chart-line"></i>
                        </div>
                        <div>
                            <h6 class="mb-0 font-weight-bold">Depreciation Details</h6>
                            <small class="text-muted">Configure how this asset depreciates over time</small>
                        </div>
                    </div>
                    <div class="form-section-body">
                        <div class="row mb-3">
                            <div class="col-12">
                                <div class="depreciable-toggle-wrap">
                                    <div class="custom-control custom-switch custom-switch-lg">
                                        <input type="checkbox" class="custom-control-input" id="is_depreciable" name="is_depreciable" value="1" {{ old('is_depreciable', '1') == '1' ? 'checked' : '' }}>
                                        <label class="custom-control-label" for="is_depreciable">
                                            <span class="toggle-label-text">Is this a Depreciable Asset?</span>
                                        </label>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div id="depreciation_fields">
                            <div class="row">
                                <div class="col-md-3">
                                    <div class="form-field">
                                        <label class="field-label">Depreciation Method</label>
                                        <div class="input-wrapper select-wrapper">
                                            <span class="input-icon"><i class="fas fa-sliders-h"></i></span>
                                            <select name="depreciation_method_id" class="styled-input styled-select">
                                                <option value="">Select Method</option>
                                                @foreach($depreciationMethods as $method)
                                                    <option value="{{ $method->id }}" {{ old('depreciation_method_id') == $method->id ? 'selected' : '' }}>{{ $method->name }}</option>
                                                @endforeach
                                            </select>
                                            <span class="select-arrow"><i class="fas fa-chevron-down"></i></span>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-3">
                                    <div class="form-field">
                                        <label class="field-label">Frequency</label>
                                        <div class="input-wrapper select-wrapper">
                                            <span class="input-icon"><i class="fas fa-sync-alt"></i></span>
                                            <select name="depreciation_frequency" id="depreciation_frequency" class="styled-input styled-select">
                                                <option value="monthly" {{ old('depreciation_frequency') == 'monthly' ? 'selected' : '' }}>Monthly</option>
                                                <option value="quarterly" {{ old('depreciation_frequency') == 'quarterly' ? 'selected' : '' }}>Quarterly</option>
                                                <option value="bi_annually" {{ old('depreciation_frequency') == 'bi_annually' ? 'selected' : '' }}>Bi-Annually</option>
                                                <option value="annually" {{ old('depreciation_frequency') == 'annually' ? 'selected' : '' }}>Annually</option>
                                            </select>
                                            <span class="select-arrow"><i class="fas fa-chevron-down"></i></span>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-3">
                                    <div class="form-field">
                                        <label class="field-label" id="useful_life_label">Useful Life</label>
                                        <div class="input-wrapper">
                                            <span class="input-icon"><i class="fas fa-hourglass-half"></i></span>
                                            <input type="number" name="useful_life" class="styled-input" placeholder="e.g. 60" value="{{ old('useful_life') }}">
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-3">
                                    <div class="form-field">
                                        <label class="field-label">Start Depreciation Date</label>
                                        <div class="input-wrapper">
                                            <span class="input-icon"><i class="fas fa-calendar-day"></i></span>
                                            <input type="date" name="start_depreciation_date" id="start_depreciation_date" class="styled-input" value="{{ old('start_depreciation_date') }}">
                                        </div>
                                        <p class="field-hint"><i class="fas fa-info-circle mr-1"></i>Defaults to purchase date if empty</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                {{-- ===================== SECTION 5: Additional Information ===================== --}}
                <div class="form-section-card mb-4">
                    <div class="form-section-header" style="border-left-color: #9b59b6;">
                        <div class="section-icon" style="background: linear-gradient(135deg, #9b59b6, #6c3483);">
                            <i class="fas fa-clipboard-list"></i>
                        </div>
                        <div>
                            <h6 class="mb-0 font-weight-bold">Additional Information</h6>
                            <small class="text-muted">Notes, ownership details and asset description</small>
                        </div>
                    </div>
                    <div class="form-section-body">
                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-field">
                                    <label class="field-label">Ownership Sign</label>
                                    <div class="input-wrapper">
                                        <span class="input-icon"><i class="fas fa-signature"></i></span>
                                        <input type="text" name="ownership_sign" class="styled-input" placeholder="e.g. Property of IT Dept" value="{{ old('ownership_sign') }}">
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-field">
                                    <label class="field-label">Improvement Notes</label>
                                    <div class="input-wrapper">
                                        <span class="input-icon"><i class="fas fa-wrench"></i></span>
                                        <input type="text" name="improvement_notes" class="styled-input" placeholder="Notes on asset upgrades / improvements" value="{{ old('improvement_notes') }}">
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="row mt-2">
                            <div class="col-12">
                                <div class="form-field">
                                    <label class="field-label">Asset Description</label>
                                    <textarea name="description" class="styled-input styled-textarea" placeholder="Detailed description of the asset, its condition and intended use...">{{ old('description') }}</textarea>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                {{-- ===================== FORM ACTIONS ===================== --}}
                <div class="form-actions d-flex justify-content-between align-items-center">
                    <a href="{{ route('assets.index') }}" class="btn btn-outline-secondary px-4">
                        <i class="fas fa-times mr-2"></i> Cancel
                    </a>
                    <button type="submit" class="btn btn-save px-5">
                        <i class="fas fa-save mr-2"></i> Save Asset
                    </button>
                </div>

            </form>
        </div>
    </div>
@stop

@section('css')
<style>
    /* ─── Google Font ─── */
    @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

    body, .content-wrapper { font-family: 'Inter', sans-serif; }

    /* ─── Form Section Card ─── */
    .form-section-card {
        background: #fff;
        border-radius: 14px;
        box-shadow: 0 2px 16px rgba(0,0,0,0.06);
        overflow: hidden;
        border: 1px solid #f0f0f0;
        transition: box-shadow 0.2s ease;
    }
    .form-section-card:hover {
        box-shadow: 0 4px 24px rgba(0,0,0,0.10);
    }

    /* ─── Section Header ─── */
    .form-section-header {
        display: flex;
        align-items: center;
        gap: 14px;
        padding: 16px 24px;
        background: #fafbfc;
        border-bottom: 1px solid #f0f0f0;
        border-left: 4px solid #4361ee;
    }
    .form-section-header h6 {
        font-size: 0.9rem;
        color: #1a1a2e;
        letter-spacing: 0.2px;
    }
    .form-section-header small {
        font-size: 0.78rem;
    }
    .section-icon {
        width: 40px;
        height: 40px;
        border-radius: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #fff;
        font-size: 1rem;
        flex-shrink: 0;
    }

    /* ─── Section Body ─── */
    .form-section-body {
        padding: 24px;
    }

    /* ─── Form Field ─── */
    .form-field {
        margin-bottom: 4px;
    }
    .field-label {
        display: block;
        font-size: 0.72rem;
        font-weight: 600;
        color: #8a94a6;
        text-transform: uppercase;
        letter-spacing: 0.6px;
        margin-bottom: 6px;
    }
    .field-hint {
        font-size: 0.72rem;
        color: #adb5bd;
        margin-top: 4px;
        margin-bottom: 0;
    }

    /* ─── Input Wrapper ─── */
    .input-wrapper {
        position: relative;
        display: flex;
        align-items: center;
    }
    .input-icon {
        position: absolute;
        left: 12px;
        color: #adb5bd;
        font-size: 0.82rem;
        z-index: 2;
        pointer-events: none;
        transition: color 0.2s;
    }
    .currency-symbol {
        font-size: 0.9rem;
        font-weight: 600;
        color: #6c757d;
    }

    /* ─── Styled Inputs ─── */
    .styled-input {
        width: 100%;
        height: 44px;
        padding: 0 14px 0 38px;
        background: #f7f8fa;
        border: 1.5px solid #eaecf0;
        border-radius: 9px;
        font-size: 0.875rem;
        color: #1a1a2e;
        font-family: 'Inter', sans-serif;
        transition: all 0.2s ease;
        outline: none;
        -webkit-appearance: none;
        appearance: none;
    }
    .styled-input::placeholder {
        color: #c4cbd6;
        font-weight: 400;
    }
    .styled-input:focus {
        background: #fff;
        border-color: #4361ee;
        box-shadow: 0 0 0 3px rgba(67, 97, 238, 0.12);
        color: #1a1a2e;
    }
    .styled-input:focus + .input-icon,
    .input-wrapper:focus-within .input-icon {
        color: #4361ee;
    }
    .styled-input.is-invalid {
        border-color: #dc3545;
        box-shadow: 0 0 0 3px rgba(220,53,69,0.10);
    }

    /* ─── Textarea ─── */
    .styled-textarea {
        height: 110px;
        padding-top: 12px;
        resize: vertical;
        line-height: 1.6;
    }

    /* ─── Select ─── */
    .select-wrapper {
        position: relative;
    }
    .select-arrow {
        position: absolute;
        right: 12px;
        color: #adb5bd;
        font-size: 0.7rem;
        pointer-events: none;
        z-index: 2;
    }
    .styled-select {
        padding-right: 32px;
        cursor: pointer;
    }

    /* ─── Custom Toggle Switch ─── */
    .depreciable-toggle-wrap {
        background: #f7f8fa;
        border: 1.5px solid #eaecf0;
        border-radius: 10px;
        padding: 14px 18px;
        display: inline-flex;
        align-items: center;
        gap: 10px;
    }
    .custom-switch-lg .custom-control-label {
        padding-left: 1.8rem;
        cursor: pointer;
    }
    .custom-switch-lg .custom-control-label::before {
        height: 1.5rem;
        width: 2.8rem;
        border-radius: 2rem;
        top: 0;
        background-color: #cdd3da;
        border-color: #cdd3da;
        transition: background 0.25s ease, border-color 0.25s ease;
    }
    .custom-switch-lg .custom-control-label::after {
        width: 1.15rem;
        height: 1.15rem;
        border-radius: 50%;
        top: 0.18rem;
        left: -2.18rem;
        background: #fff;
        box-shadow: 0 1px 4px rgba(0,0,0,0.18);
        transition: transform 0.25s ease;
    }
    .custom-switch-lg .custom-control-input:checked ~ .custom-control-label::before {
        background-color: #4361ee;
        border-color: #4361ee;
    }
    .custom-switch-lg .custom-control-input:checked ~ .custom-control-label::after {
        transform: translateX(1.3rem);
    }
    .toggle-label-text {
        font-size: 0.875rem;
        font-weight: 600;
        color: #1a1a2e;
    }

    /* ─── Save Button ─── */
    .btn-save {
        background: linear-gradient(135deg, #4361ee, #3a0ca3);
        color: #fff;
        border: none;
        border-radius: 9px;
        font-weight: 600;
        font-size: 0.9rem;
        height: 46px;
        letter-spacing: 0.3px;
        box-shadow: 0 4px 14px rgba(67,97,238,0.35);
        transition: all 0.2s ease;
    }
    .btn-save:hover {
        background: linear-gradient(135deg, #3a56d4, #2f0a8a);
        box-shadow: 0 6px 20px rgba(67,97,238,0.45);
        color: #fff;
        transform: translateY(-1px);
    }
    .btn-save:active { transform: translateY(0); }

    .btn-outline-secondary {
        border-radius: 9px;
        font-size: 0.875rem;
        font-weight: 500;
        height: 46px;
    }

    /* ─── Form Actions ─── */
    .form-actions {
        padding: 8px 0 24px;
    }

    /* ─── Responsive row spacing ─── */
    .row > [class*='col-'] { margin-bottom: 16px; }
</style>
@stop

@section('js')
<script>
    $(document).ready(function() {

        // ── Category Cascading ──
        var allCategories = @json($categories);
        var oldCategoryId = "{{ old('category_id') }}";

        $('#main_category_id').change(function() {
            var parentId = $(this).val();
            var $sub = $('#category_id');
            $sub.empty().append('<option value="">Select Sub Category</option>');
            if (parentId) {
                var subs = allCategories.filter(c => c.parent_id == parentId);
                $.each(subs, function(i, c) {
                    $sub.append('<option value="' + c.id + '">' + c.name + ' — ' + c.code + '</option>');
                });
            }
        });

        if (oldCategoryId) {
            var oldCat = allCategories.find(c => c.id == oldCategoryId);
            if (oldCat && oldCat.parent_id) {
                $('#main_category_id').val(oldCat.parent_id).trigger('change');
                $('#category_id').val(oldCategoryId);
            }
        }

        // ── Currency Formatting ──
        function formatCurrency(el) {
            var v = el.val().replace(/,/g, '');
            if (v && !isNaN(v)) {
                el.val(parseFloat(v).toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 }));
            }
        }

        $('.currency-input').on('blur', function() { formatCurrency($(this)); });
        $('.currency-input').on('focus', function() {
            var v = $(this).val().replace(/,/g, '');
            if (v && !isNaN(v)) $(this).val(v);
        });
        $('.currency-input').each(function() { formatCurrency($(this)); });

        // Strip commas on submit
        $('#assetForm').on('submit', function() {
            $('.currency-input').each(function() {
                $(this).val($(this).val().replace(/,/g, ''));
            });
        });

        // ── Auto-fill Current Value from Purchase Cost ──
        $('#purchase_cost').on('blur', function() {
            var cost = $(this).val().replace(/,/g, '');
            if ($('#current_value').val() === '' || $('#current_value').data('auto-filled') === true) {
                if (cost && !isNaN(cost)) {
                    $('#current_value').val(cost);
                    formatCurrency($('#current_value'));
                    $('#current_value').data('auto-filled', true);
                }
            }
        });
        $('#current_value').on('input', function() { $(this).data('auto-filled', false); });

        // ── Auto-fill Start Depreciation Date from Purchase Date ──
        $('#purchase_date').on('change', function() {
            if ($('#start_depreciation_date').val() === '') {
                $('#start_depreciation_date').val($(this).val());
            }
        });

        // ── Useful Life Label ──
        function updateUsefulLifeLabel() {
            var freq = $('#depreciation_frequency').val();
            var suffixes = { monthly: '(Months)', quarterly: '(Quarters)', bi_annually: '(Half-Years)', annually: '(Years)' };
            var txt = 'Useful Life ' + (suffixes[freq] || '(Periods)');
            if ($('#is_depreciable').is(':checked')) txt += ' <span class="text-danger">*</span>';
            $('#useful_life_label').html(txt);
        }

        // ── Depreciation Toggle ──
        function toggleDepreciationFields() {
            if ($('#is_depreciable').is(':checked')) {
                $('#depreciation_fields').slideDown(250);
                $('select[name="depreciation_method_id"], select[name="depreciation_frequency"], input[name="useful_life"]').prop('required', true);
                updateUsefulLifeLabel();
                // Asterisk for method & frequency labels
                $('#depreciation_fields .field-label').each(function() {
                    $(this).find('.text-danger').remove();
                });
                $('select[name="depreciation_method_id"]').closest('.form-field').find('.field-label').append(' <span class="text-danger">*</span>');
                $('select[name="depreciation_frequency"]').closest('.form-field').find('.field-label').append(' <span class="text-danger">*</span>');
            } else {
                $('#depreciation_fields').slideUp(250);
                $('select[name="depreciation_method_id"], select[name="depreciation_frequency"], input[name="useful_life"]').prop('required', false);
            }
        }

        $('#is_depreciable').on('change', toggleDepreciationFields);
        $('#depreciation_frequency').on('change', updateUsefulLifeLabel);

        // Initial calls
        toggleDepreciationFields();
        updateUsefulLifeLabel();
    });
</script>
@stop