@extends('admin.layouts.app')

@section('title', 'Spare Parts')

@section('content')
@push('styles')
@include('shared.admin-summary-ui-styles')
@endpush

<div class="container-fluid py-2">
<div class="adm-sum-shell">

    <div class="adm-sum-head">
        <div>
            <h1 class="adm-sum-title"><i class="bi bi-box2 me-1" style="color:#f97316;"></i>Spare Parts</h1>
            <nav class="adm-sum-bc" aria-label="breadcrumb">
                <ol class="breadcrumb mb-0">
                    <li class="breadcrumb-item"><a href="{{ route('admin.dashboard') }}" class="text-decoration-none text-muted">Dashboard</a></li>
                    <li class="breadcrumb-item"><a href="{{ route('admin.spare-part-categories.index') }}" class="text-decoration-none text-muted">Categories</a></li>
                    <li class="breadcrumb-item active text-muted" aria-current="page">Spare Parts</li>
                </ol>
            </nav>
            <p class="adm-sum-hint">Master: <code>spare_parts</code> · Per garage: <code>garage_parts</code> + <code>garage_id</code></p>
        </div>
        <button type="button"
            class="btn text-white adm-sum-btn"
            style="background:linear-gradient(135deg,#f97316,#ea580c);"
            data-bs-toggle="modal" data-bs-target="#createSparePartModal">
            <i class="bi bi-plus-lg me-1"></i>Add part
        </button>
    </div>

    @if(session('success'))
        <div class="adm-sum-flash" role="alert">
            <i class="bi bi-check-circle-fill"></i>
            <span class="fw-medium flex-grow-1">{{ session('success') }}</span>
            <button type="button" class="btn-close btn-close-sm" data-bs-dismiss="alert" aria-label="Close"></button>
        </div>
    @endif

    <div class="row g-2 mb-3">
        <div class="col-6 col-lg-3">
            <div class="adm-stat-box" style="background:linear-gradient(135deg,#fff7ed,#ffedd5); border-color:#fed7aa;">
                <div class="adm-stat-icon" style="background:#fed7aa;"><i class="bi bi-box2" style="color:#f97316;"></i></div>
                <div><div class="adm-stat-val" style="color:#c2410c;">{{ $stats['total'] }}</div><div class="adm-stat-lbl">Total Parts</div></div>
            </div>
        </div>
        <div class="col-6 col-lg-3">
            <div class="adm-stat-box" style="background:linear-gradient(135deg,#f0fdf4,#dcfce7); border-color:#bbf7d0;">
                <div class="adm-stat-icon" style="background:#bbf7d0;"><i class="bi bi-check-circle" style="color:#16a34a;"></i></div>
                <div><div class="adm-stat-val" style="color:#15803d;">{{ $stats['active'] }}</div><div class="adm-stat-lbl">Active</div></div>
            </div>
        </div>
        <div class="col-6 col-lg-3">
            <div class="adm-stat-box" style="background:linear-gradient(135deg,#f8fafc,#f1f5f9); border-color:#e2e8f0;">
                <div class="adm-stat-icon" style="background:#e2e8f0;"><i class="bi bi-dash-circle" style="color:#64748b;"></i></div>
                <div><div class="adm-stat-val" style="color:#374151;">{{ $stats['inactive'] }}</div><div class="adm-stat-lbl">Inactive</div></div>
            </div>
        </div>
        <div class="col-6 col-lg-3">
            <div class="adm-stat-box" style="background:linear-gradient(135deg,#f0fdf9,#d1fae5); border-color:#a7f3d0;">
                <div class="adm-stat-icon" style="background:#a7f3d0;"><i class="bi bi-currency-dollar" style="color:#059669;"></i></div>
                <div><div class="adm-stat-val" style="color:#047857;">Rs {{ number_format($stats['avg_price'], 0) }}</div><div class="adm-stat-lbl">Avg. Price</div></div>
            </div>
        </div>
    </div>

    {{-- Filters --}}
    <div class="adm-filter-bar">
        <form method="GET" action="{{ route('admin.spare-parts.index') }}" id="filterForm">
            <div class="row g-2 align-items-center">
                <div class="col-12 col-md-4">
                    <div class="input-group input-group-sm" style="border-radius:7px; overflow:hidden;">
                        <span class="input-group-text bg-light border-end-0 py-1 px-2 text-muted"><i class="bi bi-search" style="font-size:.8rem;"></i></span>
                        <input type="text" name="search" value="{{ request('search') }}"
                            class="form-control form-control-sm adm-filter-input border-start-0"
                            style="border-radius:0 7px 7px 0;"
                            placeholder="Search name, part #, brand…">
                    </div>
                </div>
                <div class="col-6 col-md-3">
                    <select name="category" class="form-select form-select-sm adm-filter-input w-100" onchange="document.getElementById('filterForm').submit()">
                        <option value="">All Categories</option>
                        @foreach($categories as $cat)
                            <option value="{{ $cat->id }}" {{ request('category') == $cat->id ? 'selected' : '' }}>
                                {{ $cat->icon }} {{ $cat->name }}
                            </option>
                        @endforeach
                    </select>
                </div>
                <div class="col-6 col-md-2">
                    <select name="status" class="form-select form-select-sm adm-filter-input w-100" onchange="document.getElementById('filterForm').submit()">
                        <option value="">All Status</option>
                        <option value="active"   {{ request('status') === 'active'   ? 'selected' : '' }}>Active</option>
                        <option value="inactive" {{ request('status') === 'inactive' ? 'selected' : '' }}>Inactive</option>
                    </select>
                </div>
                <div class="col-12 col-md-3 d-flex gap-2">
                    <button type="submit" class="btn btn-sm text-white fw-semibold px-2 py-1"
                        style="background:#f97316; border:none; border-radius:7px; font-size:.8125rem;">
                        <i class="bi bi-funnel me-1"></i>Filter
                    </button>
                    @if(request()->hasAny(['search','category','status']))
                        <a href="{{ route('admin.spare-parts.index') }}"
                            class="btn btn-sm fw-semibold px-2 py-1 border"
                            style="background:#f8fafc; color:#64748b; border-radius:7px; font-size:.8125rem; border-color:#e2e8f0 !important;">
                            <i class="bi bi-x-lg me-1"></i>Clear
                        </a>
                    @endif
                </div>
            </div>
        </form>
    </div>

    <div class="adm-sum-card">
        <div class="adm-sum-card-hd">
            <span class="adm-sum-card-hd-title">Catalog <span class="adm-sum-pill">{{ $parts->total() }}</span></span>
            <span class="adm-sum-card-meta">{{ $parts->firstItem() ?? 0 }}–{{ $parts->lastItem() ?? 0 }} of {{ $parts->total() }}</span>
        </div>

        <div class="table-responsive">
            <table class="adm-table">
                <thead>
                    <tr>
                        <th>Inv no.</th>
                        <th>Part name</th>
                        <th>Category</th>
                        <th>Part no.</th>
                        <th>Brand</th>
                        <th>Price</th>
                        <th>Warranty</th>
                        <th>Status</th>
                        <th style="width:76px; text-align:center;">Act.</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($parts as $part)
                    <tr>
                        <td><span class="adm-mono-chip">{{ $part->inventory_code ?? '—' }}</span></td>
                        <td>
                            <div class="adm-cell-title">{{ $part->name }}</div>
                            @if($part->description)
                                <div class="adm-cell-sub">{{ Str::limit($part->description, 48) }}</div>
                            @endif
                        </td>
                        <td>
                            @if($part->sparePartCategory)
                                <span class="adm-pill">
                                    {{ $part->sparePartCategory->icon }} {{ $part->sparePartCategory->name }}
                                </span>
                            @else
                                <span style="color:#94a3b8; font-size:.8rem;">—</span>
                            @endif
                        </td>
                        <td>
                            @if($part->part_number)
                                <span class="adm-mono-chip">{{ $part->part_number }}</span>
                            @else
                                <span style="color:#cbd5e1; font-size:.8rem;">—</span>
                            @endif
                        </td>
                        <td>
                            @if($part->brand)
                                <span style="font-size:.85rem; font-weight:600; color:#374151;">{{ $part->brand }}</span>
                            @else
                                <span style="color:#cbd5e1; font-size:.8rem;">—</span>
                            @endif
                        </td>
                        <td>
                            <span class="adm-price-tag">Rs {{ number_format($part->base_price, 0) }}</span>
                        </td>
                        <td>
                            @if($part->warranty)
                                <span class="adm-warranty-tag"><i class="bi bi-shield-check"></i>{{ $part->warranty }}</span>
                            @else
                                <span style="color:#cbd5e1; font-size:.8rem;">—</span>
                            @endif
                        </td>
                        <td>
                            @if($part->is_active)
                                <span class="adm-badge-active"><i class="bi bi-circle-fill me-1" style="font-size:.5rem; vertical-align:middle;"></i>Active</span>
                            @else
                                <span class="adm-badge-inactive"><i class="bi bi-circle me-1" style="font-size:.5rem; vertical-align:middle;"></i>Inactive</span>
                            @endif
                        </td>
                        <td>
                            <div class="d-flex justify-content-center gap-1">
                                <button type="button" class="adm-btn-act adm-btn-act-edit" title="Edit"
                                    data-bs-toggle="modal" data-bs-target="#editSparePartModal"
                                    data-id="{{ $part->id }}"
                                    data-part='@json($part->withoutRelations()->toArray())'>
                                    <i class="bi bi-pencil"></i>
                                </button>
                                <button type="button" class="adm-btn-act adm-btn-act-delete" title="Delete"
                                    data-bs-toggle="modal" data-bs-target="#deleteSparePartModal"
                                    data-id="{{ $part->id }}"
                                    data-name="{{ e($part->name) }}">
                                    <i class="bi bi-trash"></i>
                                </button>
                            </div>
                        </td>
                    </tr>
                    @empty
                    <tr>
                        <td colspan="9">
                            <div class="adm-empty-state">
                                <i class="bi bi-box2"></i>
                                <div class="adm-empty-title">No spare parts</div>
                                @if(request()->hasAny(['search','category','status']))
                                    <p class="mb-2">Adjust filters or clear.</p>
                                    <a href="{{ route('admin.spare-parts.index') }}" class="btn btn-sm btn-outline-secondary" style="border-radius:7px; font-size:.8125rem;">Clear</a>
                                @else
                                    <p class="mb-2">Add your first catalog item.</p>
                                    <button type="button" class="btn btn-sm text-white" data-bs-toggle="modal" data-bs-target="#createSparePartModal" style="border-radius:7px; background:linear-gradient(135deg,#f97316,#ea580c); border:none; font-size:.8125rem;">
                                        <i class="bi bi-plus-lg me-1"></i>Add part
                                    </button>
                                @endif
                            </div>
                        </td>
                    </tr>
                    @endforelse
                </tbody>
            </table>
        </div>

        @if($parts->hasPages())
        <div class="adm-sum-card-ft">
            <span>Page {{ $parts->currentPage() }} / {{ $parts->lastPage() }}</span>
            {{ $parts->links('vendor.pagination.bootstrap-5') }}
        </div>
        @endif
    </div>

</div>
</div>

@push('styles')
@include('shared.admin-spare-parts-modal-styles')
@endpush

<!-- Create Modal -->
<div class="modal fade inv-parts-sheet" id="createSparePartModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-xl inv-parts-modal-dialog">
        <div class="modal-content adm-inv-modal-content">
            <form method="POST" action="{{ route('admin.spare-parts.store') }}">
                @csrf
                <div class="modal-header adm-inv-modal-header">
                    <div class="d-flex flex-column">
                        <h5 class="adm-inv-title">Inventory</h5>
                        <div class="adm-inv-subtitle">Add spare part · <span class="opacity-75">saved to spare_parts</span></div>
                    </div>
                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body adm-inv-modal-body p-0">
                    <div class="adm-inv-modal-body-inner">
                        @include('shared.admin-spare-parts-form-fields', ['idSuffix' => 'create', 'categories' => $categories, 'mode' => 'create', 'nextInventoryCode' => $nextSpareInventoryCode])
                    </div>
                </div>
                <div class="modal-footer adm-inv-modal-footer">
                    <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-primary">
                        <i class="bi bi-check-lg me-1"></i>Save
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Edit Modal -->
<div class="modal fade inv-parts-sheet" id="editSparePartModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-xl inv-parts-modal-dialog">
        <div class="modal-content adm-inv-modal-content">
            <form method="POST" id="editSparePartForm">
                @csrf
                @method('PUT')
                <div class="modal-header adm-inv-modal-header">
                    <div class="d-flex flex-column">
                        <h5 class="adm-inv-title">Inventory</h5>
                        <div class="adm-inv-subtitle">Edit spare part (master catalog)</div>
                    </div>
                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body adm-inv-modal-body p-0">
                    <div class="adm-inv-modal-body-inner">
                        @include('shared.admin-spare-parts-form-fields', ['idSuffix' => 'edit', 'categories' => $categories, 'mode' => 'edit', 'nextInventoryCode' => ''])
                    </div>
                </div>
                <div class="modal-footer adm-inv-modal-footer">
                    <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-primary">
                        <i class="bi bi-check-lg me-1"></i>Save
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Delete Modal -->
<div class="modal fade" id="deleteSparePartModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content adm-inv-modal-content">
            <div class="modal-header adm-inv-modal-header">
                <div class="d-flex flex-column">
                    <h5 class="adm-inv-title">Delete Spare Part</h5>
                    <div class="adm-inv-subtitle">This action cannot be undone.</div>
                </div>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body py-4 px-4">
                <p class="mb-0 text-secondary">Delete <span class="fw-semibold" id="deleteSparePartName">this spare part</span>?</p>
            </div>
            <div class="modal-footer adm-inv-modal-footer">
                <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Cancel</button>
                <form method="POST" id="deleteSparePartForm" class="d-inline">
                    @csrf
                    @method('DELETE')
                    <button type="submit" class="btn btn-danger">
                        <i class="bi bi-trash me-1"></i>Delete
                    </button>
                </form>
            </div>
        </div>
    </div>
</div>

@push('scripts')
<script>
function fillAdminInventoryForm(form, data) {
    if (!form || !data) return;
    Object.keys(data).forEach(function (k) {
        if (k === 'id' || k === 'slug' || k === 'created_at' || k === 'updated_at' || k === 'deleted_at') return;
        var el = form.querySelector('[name="' + k + '"]');
        if (!el) return;
        var v = data[k];
        if (el.type === 'checkbox') {
            el.checked = v === true || v === 1 || v === '1';
            return;
        }
        if (v === null || v === undefined) {
            el.value = '';
            return;
        }
        el.value = v;
    });
    var invNo = form.querySelector('.js-adm-inv-no');
    if (invNo && data.inventory_code) invNo.value = data.inventory_code;
}

document.addEventListener('DOMContentLoaded', function () {
    var nextInv = {!! json_encode($nextSpareInventoryCode ?? '') !!};

    document.getElementById('createSparePartModal')?.addEventListener('show.bs.modal', function () {
        var form = this.querySelector('form');
        if (!form) return;
        form.reset();
        var a = form.querySelector('[name="is_active"]');
        var t = form.querySelector('[name="is_taxable"]');
        if (a) a.checked = true;
        if (t) t.checked = true;
        var u = form.querySelector('[name="unit"]');
        if (u) u.value = 'piece';
        var us = form.querySelector('[name="uom_scale_value"]');
        if (us) us.value = '1';
        var it = form.querySelector('[name="inventory_type"]');
        if (it) it.value = 'Parts';
        var bpo = form.querySelector('[name="base_price_option"]');
        if (bpo) bpo.value = 'market_price';
        var inv = form.querySelector('.js-adm-inv-no');
        if (inv) inv.value = nextInv;
    });

    var editModal = document.getElementById('editSparePartModal');
    if (editModal) {
        editModal.addEventListener('show.bs.modal', function (event) {
            var btn = event.relatedTarget;
            var id = btn.getAttribute('data-id');
            var form = document.getElementById('editSparePartForm');
            form.action = '{{ route("admin.spare-parts.update", ":id") }}'.replace(':id', id);
            var payload = {};
            try { payload = JSON.parse(btn.getAttribute('data-part') || '{}'); } catch (e) {}
            fillAdminInventoryForm(form, payload);
        });
    }

    document.getElementById('deleteSparePartModal')?.addEventListener('show.bs.modal', function (event) {
        var btn = event.relatedTarget;
        var id = btn.getAttribute('data-id');
        var name = btn.getAttribute('data-name') || 'this spare part';
        document.getElementById('deleteSparePartName').textContent = name;
        document.getElementById('deleteSparePartForm').action = '{{ route("admin.spare-parts.destroy", ":id") }}'.replace(':id', id);
    });
});
</script>
@endpush
@endsection