@extends('admin.layouts.admin')

@section('title','Customers')
@section('page-title','Customers')

@section('content')

<div class="card border-0 shadow-sm">
    <div class="card-body">

        {{-- TOOLBAR --}}
        <div class="d-flex justify-content-between align-items-center mb-3">

            {{-- SEARCH --}}
            <form class="d-flex gap-2">
                <input type="text"
                       name="search"
                       value="{{ request('search') }}"
                       class="form-control"
                       placeholder="Search by name, email or phone">
                <button class="btn btn-outline-secondary">
                    <i class="bi bi-search"></i>
                </button>
            </form>

            {{-- ACTIONS --}}
            <div class="d-flex gap-2">
                <a href="{{ route('admin.customers.create') }}"
                   class="btn btn-primary">
                    <i class="bi bi-plus-circle"></i> Add Customer
                </a>

                <a href="{{ route('admin.customers.export','csv') }}"
                   class="btn btn-outline-success">
                    CSV
                </a>

                <a href="{{ route('admin.customers.export','excel') }}"
                   class="btn btn-outline-success">
                    Excel
                </a>
            </div>

        </div>

        {{-- TABLE --}}
        <table class="table align-middle">
            <thead class="table-light">
                <tr>
                    <th>#</th>
                    <th>Name</th>
                    <th>Phone</th>
                    <th>Email</th>
                    <th>Status</th>
                    <th>Joined</th>
                    <th class="text-end">Actions</th>
                </tr>
            </thead>

            <tbody>
            @forelse($customers as $customer)
                <tr>
                    <td>{{ $loop->iteration }}</td>
                    <td>{{ $customer->name }}</td>
                    <td>{{ $customer->phone }}</td>
                    <td>{{ $customer->email }}</td>
                    <td>
                        @if($customer->is_active)
                            <span class="badge bg-success">Active</span>
                        @else
                            <span class="badge bg-danger">Inactive</span>
                        @endif
                    </td>
                    <td>{{ $customer->created_at->format('d M Y') }}</td>

                    <td class="text-end">

                        {{-- VIEW --}}
                        <button class="btn btn-sm btn-outline-primary"
                                data-bs-toggle="modal"
                                data-bs-target="#customerModal{{ $customer->id }}">
                            View
                        </button>

                        {{-- EDIT --}}
                        <a href="{{ route('admin.customers.edit',$customer) }}"
                           class="btn btn-sm btn-outline-warning">
                            Edit
                        </a>

                        {{-- ACTIVATE / DEACTIVATE --}}
                        <form action="{{ route('admin.customers.toggle',$customer) }}"
                              method="POST"
                              class="d-inline">
                            @csrf
                            @method('PATCH')
                            <button class="btn btn-sm btn-outline-secondary">
                                {{ $customer->is_active ? 'Deactivate' : 'Activate' }}
                            </button>
                        </form>

                        {{-- DELETE --}}
                        <form action="{{ route('admin.customers.destroy',$customer) }}"
                              method="POST"
                              class="d-inline"
                              onsubmit="return confirm('Delete this customer?')">
                            @csrf
                            @method('DELETE')
                            <button class="btn btn-sm btn-outline-danger">
                                Delete
                            </button>
                        </form>

                    </td>
                </tr>

                {{-- CUSTOMER MODAL --}}
                <div class="modal fade" id="customerModal{{ $customer->id }}" tabindex="-1">
                    <div class="modal-dialog modal-lg modal-dialog-centered">
                        <div class="modal-content">

                            <div class="modal-header">
                                <h5 class="modal-title">Customer Details</h5>
                                <button class="btn-close" data-bs-dismiss="modal"></button>
                            </div>

                            <div class="modal-body">

                                <div class="row mb-3">
                                    <div class="col-md-6">
                                        <p><strong>Name:</strong> {{ $customer->name }}</p>
                                        <p><strong>Email:</strong> {{ $customer->email }}</p>
                                        <p><strong>Phone:</strong> {{ $customer->phone }}</p>
                                    </div>

                                    <div class="col-md-6">
                                        <p><strong>City:</strong> {{ $customer->city ?? '—' }}</p>
                                        <p><strong>Address:</strong> {{ $customer->address ?? '—' }}</p>
                                        <p><strong>Status:</strong>
                                            {{ $customer->is_active ? 'Active' : 'Inactive' }}
                                        </p>
                                    </div>
                                </div>

                                <hr>

                                {{-- ORDER HISTORY --}}
                                <h6 class="mb-3">Order History</h6>

                                <ul class="list-group list-group-flush">
                                    @forelse($customer->orders ?? [] as $order)
                                        <li class="list-group-item d-flex justify-content-between">
                                            <span>
                                                Order #{{ $order->id }} —
                                                {{ ucfirst($order->status) }}
                                            </span>
                                            <span>
                                                {{ number_format($order->total,2) }}
                                            </span>
                                        </li>
                                    @empty
                                        <li class="list-group-item text-muted">
                                            No orders found
                                        </li>
                                    @endforelse
                                </ul>

                            </div>

                            <div class="modal-footer">
                                <button class="btn btn-secondary"
                                        data-bs-dismiss="modal">
                                    Close
                                </button>
                            </div>

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

            @empty
                <tr>
                    <td colspan="7" class="text-center text-muted">
                        No customers found
                    </td>
                </tr>
            @endforelse
            </tbody>
        </table>

        {{-- PAGINATION --}}
        <div class="mt-3">
            {{ $customers->links() }}
        </div>

    </div>
</div>

@endsection