@extends('admin.layouts.app')

@section('title', 'Add Spare Part')

@section('content')
<style>
    .form-card    { border-radius:16px; border:1.5px solid #e9ecef; }
    .preview-card { border-radius:16px; border:1.5px solid #e9ecef; position:sticky; top:80px; }
    .styled-label { font-size:.85rem; font-weight:600; color:#374151; margin-bottom:6px; display:block; }
    .styled-input { border:1.5px solid #e5e7eb; border-radius:10px; padding:10px 14px; font-size:.9rem; width:100%; transition:border-color .2s, box-shadow .2s; background:#fff; }
    .styled-input:focus { border-color:#f97316; box-shadow:0 0 0 3px rgba(249,115,22,.1); outline:none; }
    .styled-input.is-invalid { border-color:#ef4444; }
    .section-divider { border:none; border-top:1.5px solid #f1f5f9; margin:20px 0; }
    .toggle-switch { position:relative; display:inline-block; width:48px; height:26px; }
    .toggle-switch input { display:none; }
    .toggle-slider { position:absolute; cursor:pointer; top:0; left:0; right:0; bottom:0; background:#d1d5db; border-radius:34px; transition:.3s; }
    .toggle-slider:before { position:absolute; content:""; height:20px; width:20px; left:3px; bottom:3px; background:white; border-radius:50%; transition:.3s; }
    .toggle-switch input:checked + .toggle-slider { background:#f97316; }
    .toggle-switch input:checked + .toggle-slider:before { transform:translateX(22px); }
    .submit-btn { background:linear-gradient(135deg,#f97316,#ea580c); border:none; border-radius:10px; padding:11px 28px; font-weight:600; color:white; width:100%; transition:opacity .2s, transform .1s; }
    .submit-btn:hover { opacity:.92; transform:translateY(-1px); }
    .cancel-btn { border:1.5px solid #e5e7eb; border-radius:10px; padding:11px 20px; font-weight:600; color:#64748b; background:white; width:100%; transition:all .2s; }
    .cancel-btn:hover { border-color:#94a3b8; color:#374151; }
    .price-input-wrap { position:relative; }
    .price-input-wrap .currency-prefix { position:absolute; left:14px; top:50%; transform:translateY(-50%); font-weight:700; color:#f97316; font-size:.9rem; pointer-events:none; }
    .price-input-wrap input { padding-left:46px; }
    /* Preview */
    .part-preview { border:1.5px solid #e9ecef; border-radius:14px; overflow:hidden; }
    .part-preview-header { padding:18px; background:linear-gradient(135deg,#f97316,#ea580c); }
    .part-preview-body   { padding:18px; background:#fff; }
    .preview-meta-row { display:flex; gap:10px; flex-wrap:wrap; margin-bottom:12px; }
    .preview-meta-chip { display:inline-flex; align-items:center; gap:5px; background:#f8fafc; border:1px solid #e5e7eb; border-radius:8px; padding:5px 10px; font-size:.78rem; color:#374151; }
    .preview-meta-chip i { color:#f97316; font-size:.75rem; }
</style>

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

    {{-- Header --}}
    <div class="d-flex align-items-center gap-3 mb-4">
        <a href="{{ route('admin.spare-parts.index') }}"
            style="width:38px; height:38px; border-radius:10px; border:1.5px solid #e5e7eb; background:white; display:flex; align-items:center; justify-content:center; color:#374151; text-decoration:none;">
            <i class="bi bi-arrow-left"></i>
        </a>
        <div>
            <h4 class="fw-bold mb-0" style="color:#1e293b;">Add New Spare Part</h4>
            <small class="text-muted">
                <a href="{{ route('admin.spare-parts.index') }}" class="text-decoration-none text-muted">Spare Parts</a> / Add New
            </small>
        </div>
    </div>

    @if($errors->any())
        <div class="d-flex gap-2 align-items-start mb-4 px-4 py-3"
            style="background:#fef2f2; border:1.5px solid #fecaca; border-radius:12px; color:#dc2626;">
            <i class="bi bi-exclamation-triangle-fill mt-1"></i>
            <div><strong>Please fix:</strong><ul class="mb-0 mt-1">@foreach($errors->all() as $e)<li>{{ $e }}</li>@endforeach</ul></div>
        </div>
    @endif

    <form action="{{ route('admin.spare-parts.store') }}" method="POST" id="partForm">
        @csrf
        <div class="row g-4">

            {{-- LEFT --}}
            <div class="col-lg-7">
                <div class="form-card card p-4">

                    {{-- Category --}}
                    <div class="mb-4">
                        <label class="styled-label">Category <span class="text-danger">*</span></label>
                        <select name="spare_part_category_id" id="catSelect"
                            class="styled-input @error('spare_part_category_id') is-invalid @enderror" required>
                            <option value="">— Select a category —</option>
                            @foreach($categories as $cat)
                                <option value="{{ $cat->id }}"
                                    data-icon="{{ $cat->icon }}"
                                    data-name="{{ $cat->name }}"
                                    {{ old('spare_part_category_id') == $cat->id ? 'selected' : '' }}>
                                    {{ $cat->icon }} {{ $cat->name }}
                                </option>
                            @endforeach
                        </select>
                        @error('spare_part_category_id')<div style="color:#ef4444;font-size:.8rem;margin-top:4px;">{{ $message }}</div>@enderror
                    </div>

                    {{-- Name --}}
                    <div class="mb-4">
                        <label class="styled-label">Part Name <span class="text-danger">*</span></label>
                        <input type="text" name="name" id="partName" value="{{ old('name') }}"
                            class="styled-input @error('name') is-invalid @enderror"
                            placeholder="e.g. Engine Oil Filter, Front Brake Pad" required autocomplete="off">
                        @error('name')<div style="color:#ef4444;font-size:.8rem;margin-top:4px;">{{ $message }}</div>@enderror
                    </div>

                    {{-- Part Number + Brand --}}
                    <div class="row g-3 mb-4">
                        <div class="col-sm-6">
                            <label class="styled-label">Part Number <span class="text-muted fw-normal">(optional)</span></label>
                            <input type="text" name="part_number" id="partNumber" value="{{ old('part_number') }}"
                                class="styled-input @error('part_number') is-invalid @enderror"
                                placeholder="e.g. OIL-FLT-001" autocomplete="off" style="font-family:monospace;">
                        </div>
                        <div class="col-sm-6">
                            <label class="styled-label">Brand <span class="text-muted fw-normal">(optional)</span></label>
                            <input type="text" name="brand" id="partBrand" value="{{ old('brand') }}"
                                class="styled-input @error('brand') is-invalid @enderror"
                                placeholder="e.g. Bosch, NGK, Denso" autocomplete="off">
                        </div>
                    </div>

                    {{-- Description --}}
                    <div class="mb-4">
                        <label class="styled-label">Description <span class="text-muted fw-normal">(optional)</span></label>
                        <textarea name="description" id="partDesc" rows="2"
                            class="styled-input @error('description') is-invalid @enderror"
                            placeholder="Brief description of this part...">{{ old('description') }}</textarea>
                    </div>

                    <hr class="section-divider">

                    {{-- Price + Warranty --}}
                    <div class="row g-3 mb-4">
                        <div class="col-sm-6">
                            <label class="styled-label">Base Price <span class="text-danger">*</span></label>
                            <div class="price-input-wrap">
                                <span class="currency-prefix">Rs</span>
                                <input type="number" name="base_price" id="partPrice" value="{{ old('base_price') }}"
                                    class="styled-input @error('base_price') is-invalid @enderror"
                                    placeholder="0" min="0" step="1" required>
                            </div>
                            @error('base_price')<div style="color:#ef4444;font-size:.8rem;margin-top:4px;">{{ $message }}</div>@enderror
                        </div>
                        <div class="col-sm-6">
                            <label class="styled-label">Warranty <span class="text-muted fw-normal">(optional)</span></label>
                            <input type="text" name="warranty" id="partWarranty" value="{{ old('warranty') }}"
                                class="styled-input @error('warranty') is-invalid @enderror"
                                placeholder="e.g. 6 months, 1 year">
                        </div>
                    </div>

                    {{-- Sort + Active --}}
                    <div class="row g-3 mb-4">
                        <div class="col-sm-6">
                            <label class="styled-label">Sort Order</label>
                            <input type="number" name="sort_order" value="{{ old('sort_order', 0) }}" class="styled-input" min="0">
                        </div>
                        <div class="col-sm-6 d-flex align-items-center">
                            <div class="p-3 rounded-3 w-100 d-flex align-items-center justify-content-between"
                                style="background:#f8fafc; border:1.5px solid #e5e7eb;">
                                <div>
                                    <div class="fw-semibold" style="font-size:.9rem; color:#374151;">Status</div>
                                    <small class="text-muted">Visible to garages</small>
                                </div>
                                <label class="toggle-switch mb-0">
                                    <input type="checkbox" name="is_active" value="1" id="isActive"
                                        {{ old('is_active', '1') ? 'checked' : '' }}>
                                    <span class="toggle-slider"></span>
                                </label>
                            </div>
                        </div>
                    </div>

                    {{-- Buttons --}}
                    <div class="row g-2 mt-2">
                        <div class="col-8">
                            <button type="submit" class="submit-btn">
                                <i class="bi bi-check-lg me-2"></i>Save Spare Part
                            </button>
                        </div>
                        <div class="col-4">
                            <a href="{{ route('admin.spare-parts.index') }}" class="cancel-btn text-decoration-none text-center d-block">Cancel</a>
                        </div>
                    </div>

                </div>
            </div>

            {{-- RIGHT: Preview --}}
            <div class="col-lg-5">
                <div class="preview-card card p-4">
                    <div class="fw-bold mb-3" style="font-size:.85rem; color:#94a3b8; text-transform:uppercase; letter-spacing:.05em;">
                        <i class="bi bi-eye me-1"></i> Live Preview
                    </div>

                    <div class="part-preview">
                        <div class="part-preview-header">
                            <div style="font-size:.72rem; color:rgba(255,255,255,.7); text-transform:uppercase; letter-spacing:.05em;" id="previewCatLabel">
                                Select a category
                            </div>
                            <div class="fw-bold text-white mt-1" style="font-size:1rem;" id="previewName">Part Name</div>
                            <div class="d-flex gap-2 mt-2 align-items-center">
                                <div id="previewPrice" class="fw-bold" style="font-size:1.2rem; color:#fff;">Rs 0</div>
                                <span id="previewStatus"
                                    style="font-size:.72rem; background:rgba(255,255,255,.25); color:#fff; padding:2px 10px; border-radius:20px; font-weight:600; margin-left:4px;">
                                    Active
                                </span>
                            </div>
                        </div>
                        <div class="part-preview-body">
                            <div class="preview-meta-row" id="previewMetaRow">
                                <span class="preview-meta-chip" id="previewPartNo" style="display:none;">
                                    <i class="bi bi-upc"></i><span id="previewPartNoText">—</span>
                                </span>
                                <span class="preview-meta-chip" id="previewBrandChip" style="display:none;">
                                    <i class="bi bi-award"></i><span id="previewBrandText">—</span>
                                </span>
                                <span class="preview-meta-chip" id="previewWarrantyChip" style="display:none;">
                                    <i class="bi bi-shield-check"></i><span id="previewWarrantyText">—</span>
                                </span>
                            </div>

                            <div id="previewDescWrap" style="display:none; padding-top:8px; border-top:1px solid #f1f5f9;">
                                <div style="font-size:.8rem; color:#64748b;" id="previewDesc"></div>
                            </div>

                            <div id="previewEmptyHint" class="text-center py-2" style="color:#94a3b8; font-size:.82rem; font-style:italic;">
                                Fill in the form to see preview
                            </div>
                        </div>
                    </div>

                    <div class="mt-4">
                        <div class="fw-semibold mb-2" style="font-size:.82rem; color:#374151;">
                            <i class="bi bi-lightbulb me-1 text-warning"></i> Tips
                        </div>
                        <ul style="font-size:.8rem; color:#64748b; padding-left:16px; line-height:1.8;">
                            <li>Use a unique part number for easy identification</li>
                            <li>Including the brand builds customer confidence</li>
                            <li>A warranty period helps close the sale</li>
                            <li>Inactive parts won't be available to garages</li>
                        </ul>
                    </div>
                </div>
            </div>

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

<script>
function updateHint(){
    const hasContent = document.getElementById('partName').value ||
                       document.getElementById('partPrice').value;
    document.getElementById('previewEmptyHint').style.display = hasContent ? 'none' : '';
}

document.getElementById('catSelect').addEventListener('change', function(){
    const opt = this.options[this.selectedIndex];
    document.getElementById('previewCatLabel').textContent = opt.value
        ? (opt.dataset.icon + ' ' + opt.dataset.name) : 'Select a category';
});
document.getElementById('partName').addEventListener('input', function(){
    document.getElementById('previewName').textContent = this.value || 'Part Name';
    updateHint();
});
document.getElementById('partPrice').addEventListener('input', function(){
    const v = parseFloat(this.value) || 0;
    document.getElementById('previewPrice').textContent = 'Rs ' + v.toLocaleString('en-PK', {maximumFractionDigits:0});
    updateHint();
});
document.getElementById('isActive').addEventListener('change', function(){
    const el = document.getElementById('previewStatus');
    el.textContent = this.checked ? 'Active' : 'Inactive';
    el.style.background = this.checked ? 'rgba(255,255,255,.25)' : 'rgba(0,0,0,.2)';
});
document.getElementById('partNumber').addEventListener('input', function(){
    const chip = document.getElementById('previewPartNo');
    document.getElementById('previewPartNoText').textContent = this.value || '—';
    chip.style.display = this.value.trim() ? 'inline-flex' : 'none';
});
document.getElementById('partBrand').addEventListener('input', function(){
    const chip = document.getElementById('previewBrandChip');
    document.getElementById('previewBrandText').textContent = this.value || '—';
    chip.style.display = this.value.trim() ? 'inline-flex' : 'none';
});
document.getElementById('partWarranty').addEventListener('input', function(){
    const chip = document.getElementById('previewWarrantyChip');
    document.getElementById('previewWarrantyText').textContent = this.value || '—';
    chip.style.display = this.value.trim() ? 'inline-flex' : 'none';
});
document.getElementById('partDesc').addEventListener('input', function(){
    const wrap = document.getElementById('previewDescWrap');
    document.getElementById('previewDesc').textContent = this.value;
    wrap.style.display = this.value.trim() ? 'block' : 'none';
});
</script>
@endsection