@extends('layouts.app')
@section('title', 'Customers')

@section('breadcrumb')
    <li class="breadcrumb-item"><a href="{{ route('dashboard') }}">Dashboard</a></li>
    <li class="breadcrumb-item active">Customers</li>
@endsection

@section('content')
<div class="page-header">
    <div>
        <h1 class="page-title">Customers</h1>
        <p class="page-subtitle">Manage your customer list</p>
    </div>
    @if(auth()->user()->hasPermission('ar','create'))
    <a href="{{ route('masters.customers.create') }}" class="btn btn-primary">
        <i class="bi bi-person-plus me-1"></i><span class="d-none d-sm-inline">Add Customer</span>
    </a>
    @endif
</div>

{{-- Stats --}}
<div class="row g-3 mb-4">
    @foreach([['Total','total','#EBF3FB','#1B4F8A'],['Active','active','#d1e7dd','#0a3622'],['Inactive','inactive','#f8d7da','#842029']] as [$label,$key,$bg,$color])
    <div class="col-4">
        <div class="p-3 rounded-3 text-center" style="background:{{ $bg }}">
            <div style="font-size:11px;color:{{ $color }};font-weight:700;text-transform:uppercase;letter-spacing:.5px">{{ $label }}</div>
            <div style="font-size:24px;font-weight:700;color:{{ $color }}">{{ $stats[$key] }}</div>
        </div>
    </div>
    @endforeach
</div>

{{-- Search --}}
<div class="card mb-3">
    <div class="card-body py-3">
        <form method="GET" action="{{ route('masters.customers.index') }}">
            <div class="row g-2 align-items-end">
                <div class="col-12 col-sm-5 col-md-6">
                    <input type="text" name="search" class="form-control"
                           placeholder="Search by name, code, email or phone…"
                           value="{{ request('search') }}">
                </div>
                <div class="col-6 col-sm-3 col-md-2">
                    <select name="status" class="form-select">
                        <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-3 col-sm-2 col-md-2">
                    <button type="submit" class="btn btn-primary w-100">
                        <i class="bi bi-search"></i>
                    </button>
                </div>
                <div class="col-3 col-sm-2 col-md-2">
                    <a href="{{ route('masters.customers.index') }}" class="btn btn-outline-secondary w-100">
                        <i class="bi bi-x-lg"></i>
                    </a>
                </div>
            </div>
        </form>
    </div>
</div>

{{-- Table --}}
<div class="card">
    <div class="card-header bg-white d-flex justify-content-between align-items-center flex-wrap gap-2 py-2">
        <span class="fw-semibold" style="font-size:13px">Customer &amp; Job List</span>
        <div class="d-flex gap-2">
            <button type="button" class="btn btn-outline-secondary btn-sm" onclick="custExpandAll()">
                <i class="bi bi-arrows-expand me-1"></i>Expand All
            </button>
            <button type="button" class="btn btn-outline-secondary btn-sm" onclick="custCollapseAll()">
                <i class="bi bi-arrows-collapse me-1"></i>Collapse All
            </button>
        </div>
    </div>
    <div class="card-body p-0">
        <div class="table-responsive">
            <table class="table table-hover mb-0 cust-tree-table" style="min-width:500px" data-expand-all="{{ !empty($expandAll) ? '1' : '0' }}">
                <thead class="table-light">
                    <tr>
                        <th>Customer / Job</th>
                        <th class="d-none d-md-table-cell">Contact</th>
                        <th class="d-none d-lg-table-cell">Currency</th>
                        <th class="d-none d-lg-table-cell">Terms</th>
                        <th>Type</th>
                        <th>Status</th>
                        <th class="text-end pe-3" style="width:90px">Actions</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($tree as $customer)
                        @include('masters.customers._tree', ['items' => [$customer], 'level' => 0, 'expandAll' => $expandAll ?? false])
                    @empty
                    <tr>
                        <td colspan="7" class="text-center py-5 text-muted">
                            <i class="bi bi-people display-5 d-block mb-2"></i>
                            <p class="mb-3">No customers found.</p>
                            <a href="{{ route('masters.customers.create') }}" class="btn btn-primary btn-sm">
                                <i class="bi bi-plus-circle me-1"></i>Add First Customer
                            </a>
                        </td>
                    </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', () => {
    const table = document.querySelector('.cust-tree-table');
    if (table?.dataset.expandAll === '1' && typeof custExpandAll === 'function') {
        custExpandAll();
    }
});
</script>
@endpush