@extends('layouts.admin')

@section('content')
<div class="container-fluid">
    <div class="row mb-4">
        <div class="col-12">
            <div class="d-flex justify-content-between align-items-center">
                <h1>Customers</h1>
                <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#createCustomerModal">
                    <i class="bx bx-plus"></i> Add New Customer
                </button>
            </div>
        </div>
    </div>

    @if(session('success'))
        <div class="alert alert-success alert-dismissible fade show" role="alert">
            {{ session('success') }}
            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
        </div>
    @endif

    <div class="card">
        <div class="card-body">
            <div class="mb-4">
                <ul class="nav nav-tabs">
                    <li class="nav-item">
                        <a class="nav-link {{ $status === 'active' ? 'active' : '' }}" href="{{ route('customers.index', ['status' => 'active']) }}">
                            Active Customers
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link {{ $status === 'inactive' ? 'active' : '' }}" href="{{ route('customers.index', ['status' => 'inactive']) }}">
                            Inactive Customers
                        </a>
                    </li>
                </ul>
            </div>

            <div class="table-responsive">
                <table class="table">
                    <thead>
                        <tr>
                            <th>Name</th>
                            <th>Email</th>
                            <th>Phone</th>
                            <th>Status</th>
                            <th>Verified</th>
                            <th>Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($customers as $customer)
                            <tr>
                                <td>{{ $customer->full_name }}</td>
                                <td>{{ $customer->email }}</td>
                                <td>{{ $customer->phone_number }}</td>
                                <td>
                                    <span class="badge bg-{{ $customer->status === 'active' ? 'success' : 'danger' }}">
                                        {{ ucfirst($customer->status) }}
                                    </span>
                                </td>
                                <td>
                                    @if($customer->verified_at)
                                        <span class="badge bg-success">Verified</span>
                                    @else
                                        <span class="badge bg-warning">Pending</span>
                                    @endif
                                </td>
                                <td>
                                    <div class="btn-group" role="group">
                                        @if(!$customer->verified_at)
                                            <form action="{{ route('customers.verify', $customer) }}" method="POST" class="d-inline">
                                                @csrf
                                                @method('PATCH')
                                                <button type="submit" class="btn btn-sm btn-warning" title="Verify Customer">
                                                    <i class="bx bx-check"></i>
                                                </button>
                                            </form>
                                        @endif

                                        <button type="button" class="btn btn-sm btn-info" data-bs-toggle="modal" data-bs-target="#editCustomerModal{{ $customer->id }}" title="Edit Customer">
                                            <i class="bx bx-edit"></i>
                                        </button>

                                        @if($customer->status === 'active')
                                            <form action="{{ route('customers.deactivate', $customer) }}" method="POST" class="d-inline">
                                                @csrf
                                                @method('PATCH')
                                                <button type="submit" class="btn btn-sm btn-danger" title="Deactivate Customer" onclick="return confirm('Are you sure you want to deactivate this customer?')">
                                                    <i class="bx bx-power-off"></i>
                                                </button>
                                            </form>
                                        @else
                                            <form action="{{ route('customers.activate', $customer) }}" method="POST" class="d-inline">
                                                @csrf
                                                @method('PATCH')
                                                <button type="submit" class="btn btn-sm btn-success" title="Activate Customer">
                                                    <i class="bx bx-power-off"></i>
                                                </button>
                                            </form>
                                        @endif
                                    </div>
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="6" class="text-center">No customers found.</td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>

            <div class="mt-4">
                {{ $customers->appends(request()->query())->links() }}
            </div>
        </div>
    </div>
</div>

@include('customers.modals.create')

@foreach($customers as $customer)
    @include('customers.modals.edit', ['customer' => $customer])
@endforeach

@push('scripts')
<script>
    // Show modal if there are validation errors
    if (document.querySelector('.is-invalid')) {
        var createCustomerModal = new bootstrap.Modal(document.getElementById('createCustomerModal'));
        createCustomerModal.show();
    }
</script>
@endpush
@endsection