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

@section('pageCSS')
    <style>
        .kpi {
            border: 0;
            border-radius: 16px;
            box-shadow: 0 8px 24px rgba(2, 6, 23, .06);
            background: #fff;
        }

        .kpi .label {
            color: #6b7280;
            font-size: .85rem;
        }

        .kpi .value {
            font-size: 1.25rem;
            font-weight: 700;
        }

        .soft {
            background: rgba(13, 110, 253, .08);
            border-radius: 16px;
        }

        .table thead th {
            font-weight: 700;
            color: #0f172a;
        }
    </style>
@endsection

@section('body')
    <main class="app-content">
        <section>
            <div class="card border-0 shadow-sm" style="border-radius:16px;">

                {{-- Header --}}
                <div class="card-header bg-white border-0 d-flex justify-content-between align-items-center">
                    <div>
                        <h4 class="mb-0">Customers</h4>
                        <small class="text-muted">Manage customers, search & filter quickly</small>
                    </div>

                    <div class="d-flex gap-2 flex-wrap">
                        @can('customer_reporting')
                            <a href="{{ route('customer.report_show') }}" class="btn btn-sm btn-outline-primary">
                                <i class="fa fa-print"></i> Report
                            </a>
                        @endcan

                        <a href="{{ route('customers.index') }}" class="btn btn-sm btn-outline-secondary">
                            <i class="fa fa-refresh"></i> Reset
                        </a>

                        <a href="{{ route('customers.create') }}" class="btn btn-sm btn-primary btn-rounded">
                            <i class="fa fa-plus"></i> Add Customer
                        </a>
                    </div>
                </div>

                <div class="card-body">

                    {{-- Alerts --}}
                    @if (session('msg'))
                        <div class="alert alert-success py-2">{{ session('msg') }}</div>
                    @endif

                    {{-- KPI Cards --}}
                    <div class="row g-3 mb-3">
                        <div class="col-md-3">
                            <div class="kpi p-3">
                                <div class="label">Total Customers</div>
                                <div class="value">{{ $stats['total'] ?? 0 }}</div>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="kpi p-3" style="background:rgba(25,135,84,.07);">
                                <div class="label">Active</div>
                                <div class="value">{{ $stats['active'] ?? 0 }}</div>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="kpi p-3" style="background:rgba(255,193,7,.12);">
                                <div class="label">Type C</div>
                                <div class="value">{{ $stats['c'] ?? 0 }}</div>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="kpi p-3" style="background:rgba(108,117,125,.10);">
                                <div class="label">Type S</div>
                                <div class="value">{{ $stats['s'] ?? 0 }}</div>
                            </div>
                        </div>
                    </div>

                    {{-- Filter Bar --}}
                    <div class="card border-0 soft mb-3">
                        <div class="card-body">
                            <form method="GET" action="{{ route('customers.index') }}">
                                <div class="row g-2 align-items-end">

                                    <div class="col-md-4">
                                        <label class="form-label mb-1">Search</label>
                                        <input type="text" name="keyword" value="{{ request('keyword') }}"
                                            class="form-control" placeholder="Name / Phone / Address">
                                    </div>

                                    <div class="col-md-2">
                                        <label class="form-label mb-1">Type</label>
                                        <select name="type_id" class="form-control">
                                            <option value="">All</option>
                                            <option value="1" @selected(request('type_id') == '1')>C</option>
                                            <option value="2" @selected(request('type_id') == '2')>S</option>
                                        </select>
                                    </div>

                                    <div class="col-md-3">
                                        <label class="form-label mb-1">Province</label>
                                        <select name="province_id" class="form-control">
                                            <option value="">All</option>
                                            @foreach ($provinces as $p)
                                                <option value="{{ $p->id }}" @selected(request('province_id') == $p->id)>
                                                    {{ $p->title_ps ?? ($p->title_ps ?? 'Province #' . $p->id) }}
                                                </option>
                                            @endforeach
                                        </select>
                                    </div>

                                    <div class="col-md-3">
                                        <label class="form-label mb-1">Status</label>
                                        <select name="status" class="form-control">
                                            <option value="">All</option>
                                            <option value="1" @selected(request('status') === '1')>Active</option>
                                            <option value="0" @selected(request('status') === '0')>Inactive</option>
                                        </select>
                                    </div>

                                    <div class="col-md-2">
                                        <label class="form-label mb-1">From</label>
                                        <input type="date" name="from" value="{{ request('from') }}"
                                            class="form-control">
                                    </div>

                                    <div class="col-md-2">
                                        <label class="form-label mb-1">To</label>
                                        <input type="date" name="to" value="{{ request('to') }}"
                                            class="form-control">
                                    </div>

                                    <div class="col-md-4 d-flex gap-2">
                                        <button class="btn btn-primary btn-rounded btn-sm px-4" type="submit">
                                            <i class="fa fa-filter"></i> Filter
                                        </button>

                                        <a href="{{ route('customers.index') }}"
                                            class="btn btn-outline-dark btn-rounded btn-sm px-4">
                                            Clear
                                        </a>
                                    </div>

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

                    {{-- Table --}}
                    <div class="table-responsive">
                        <table class="table table-striped align-middle">
                            <thead>
                                <tr>
                                    <th style="width:60px;">#</th>
                                    <th>Name</th>
                                    <th>Phone</th>
                                    <th>Address</th>
                                    <th>Province</th>
                                    <th>Type</th>
                                    <th>Status</th>
                                    <th style="width:120px;">Actions</th>
                                </tr>
                            </thead>
                            <tbody>
                                @forelse($customers as $row)
                                    <tr>
                                        <td>{{ $loop->iteration + ($customers->currentPage() - 1) * $customers->perPage() }}
                                        </td>
                                        <td class="fw-semibold">
                                            {{ $row->name ?? '—' }}
                                            @if ($row->email)
                                                <div class="small text-muted">{{ $row->email }}</div>
                                            @endif
                                        </td>
                                        <td>{{ $row->phone ?? '—' }}</td>
                                        <td style="max-width:280px;">
                                            <span class="text-truncate d-inline-block" style="max-width:280px;">
                                                {{ $row->address ?? '—' }}
                                            </span>
                                        </td>
                                        <td>{{ $row->province->title_ps ?? ($row->province->title_ps ?? '—') }}</td>
                                        <td>
                                            @if ($row->type_id == 1)
                                                <span class="badge bg-primary">C</span>
                                            @else
                                                <span class="badge bg-dark">S</span>
                                            @endif
                                        </td>
                                        <td>
                                            @if ($row->status == 1)
                                                <span class="badge bg-success">Active</span>
                                            @else
                                                <span class="badge bg-secondary">Inactive</span>
                                            @endif
                                        </td>
                                        <td>
                                            <div class="d-flex gap-2">
                                                <a href="{{ route('customers.show', $row->id) }}"
                                                    class="btn btn-sm btn-outline-secondary" title="View">
                                                    <i class="fa fa-eye"></i>
                                                </a>
                                                <a href="{{ route('customers.edit', $row->id) }}"
                                                    class="btn btn-sm btn-outline-primary" title="Edit">
                                                    <i class="fa fa-pencil"></i>
                                                </a>
                                            </div>
                                        </td>
                                    </tr>
                                @empty
                                    <tr>
                                        <td colspan="8" class="text-center text-muted py-4">
                                            No customers found.
                                        </td>
                                    </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>

                    {{-- Pagination --}}
                    <div class="d-flex justify-content-end">
                        {{ $customers->links('pagination::bootstrap-4') }}
                    </div>

                </div>
            </div>
        </section>
    </main>
@endsection

@section('pageJs')
    <script type="text/javascript">
        $(".app-menu").removeClass("active");
        $("#nav_salei").addClass("active");
        $("#salei").addClass("is-expanded");
        $("#customer_add").addClass("active");

        // prevent double submit
        $('form').submit(function() {
            $(this).find(':submit').attr('disabled', 'disabled');
            setTimeout(() => $(this).find(':submit').attr('disabled', false), 1200);
        });
    </script>
@endsection