@extends('admin.layouts.app')

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

@section('content')
<div class="container-xxl">
    <!-- <div class="row">
        <div class="col-md-6 col-xl-3">
            <div class="card">
                <div class="card-body">                                
                    <div class="d-flex align-items-center gap-2 mb-3">
                        <div class="avatar-md bg-primary bg-opacity-10 rounded">
                            <iconify-icon icon="solar:users-group-two-rounded-bold-duotone" class="fs-32 text-primary avatar-title"></iconify-icon>
                        </div>
                        <div>
                            <h4 class="mb-0">All Customers</h4>
                        </div>
                    </div>
                    <div class="d-flex align-items-center justify-content-between">
                        <p class="text-muted fw-medium fs-22 mb-0">+{{ $customerCount }}k</p>            
      
                    </div>
                </div>
            </div>
        </div>
    </div>-->

    <div class="row">
        <div class="col-xl-12">
            <div class="card">
                <div class="card-header">
                    <div class="d-flex justify-content-between align-items-center">
                        <div>
                            @if($search)
                            <h4 class="card-title mb-0">Showing result list for "{{ $search }}"</h4>
                            @else
                            <h4 class="card-title mb-0">All Customers List ({{ $customerCount }})</h4>
                            @endif
                            <div class="form-check mt-2">
                                <input class="form-check-input" type="checkbox" id="showDeletedUsers" {{ $showDeleted ? 'checked' : '' }}>
                                <label class="form-check-label" for="showDeletedUsers">Show deleted users</label>
                            </div>
                        </div>

                        <div class="d-flex align-items-center">
                            <a href="" class="btn btn-outline-info me-2" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="Refresh"><iconify-icon icon="solar:refresh-bold" class="align-middle fs-18"></iconify-icon></a>
                            <form action="{{ route('admin.user.index') }}" method="GET" class="d-flex align-items-center m-0 me-2">
                                <div class="input-group">
                                    <input type="text" name="search" class="form-control" placeholder="Search users..." value="{{ $search }}" />
                                    <input type="hidden" name="show_deleted" value="{{ $showDeleted ? '1' : '0' }}" />
                                    <button type="submit" class="btn btn-primary">Search</button>
                                </div>
                            </form>

                            @if($search)
                            <a href="{{ route('admin.user.index') }}" class="btn btn-secondary me-2">View All Users</a>
                            @endif

                            <div class="dropdown">
                                <button class="btn btn-secondary dropdown-toggle" type="button" id="exportDropdown" data-bs-toggle="dropdown" aria-expanded="false">
                                    Tools
                                </button>
                                <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="exportDropdown">
                                    <li><a class="dropdown-item" href="{{ route('admin.user.deleted') }}">Restore deleted users</a></li>
                                    <li><a class="dropdown-item" href="{{ route('admin.user.export', ['format' => 'csv']) }}">Export as CSV</a></li>
                                    <li><a class="dropdown-item" href="{{ route('admin.user.export', ['format' => 'xlsx']) }}">Export as Excel</a></li>
                                    <li><a class="dropdown-item" href="{{ route('admin.user.export', ['format' => 'pdf']) }}">Export as PDF</a></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>


                <div>
                    <div class="table-responsive">
                        <table class="table align-middle mb-0 table-hover table-centered">
                            <thead class="bg-light-subtle">
                                <tr>
                                    <th style="width: 20px;"></th>
                                    <th>#</th>
                                    <th>Customer Name</th>
                                    <th>Phone Number</th>
                                    <th>Email</th>
                                    <th>City</th>
                                    <th>Zipcode</th>
                                    <th>Country</th>
                                    <th>
                                        <div class="d-flex justify-content-end">Action</div>
                                    </th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach($users as $customer)
                                <tr class="{{ $customer->trashed() ? 'bg-light-subtle user-deleted' : '' }}">
                                    <td></td>
                                    <td class="{{ $customer->trashed() ? 'text-black-50' : '' }}">{{ $customer->id }}</td>
                                    <td class="{{ $customer->trashed() ? 'text-black-50' : '' }}">
                                        @if($customer->trashed())
                                        {{ $customer->lastname }} {{ $customer->firstname }} <span class="badge bg-danger ms-2">deleted</span>
                                        @else
                                        <a href="{{ route('admin.user.show', $customer) }}" class="text-body">
                                            {{ $customer->lastname }} {{ $customer->firstname }}
                                        </a>
                                        @endif
                                    </td>
                                    <td class="{{ $customer->trashed() ? 'text-black-50' : '' }}">{{ $customer->phonenumber }}</td>
                                    <td class="{{ $customer->trashed() ? 'text-black-50' : '' }}">{{ $customer->email }}</td>
                                    <td class="{{ $customer->trashed() ? 'text-black-50' : '' }}">{{ $customer->defaultAddress->city ?? 'N/A' }}</td>
                                    <td class="{{ $customer->trashed() ? 'text-black-50' : '' }}">{{ $customer->defaultAddress->postal_code ?? 'N/A' }}</td>
                                    <td class="{{ $customer->trashed() ? 'text-black-50' : '' }}">{{ $customer->defaultAddress->country ?? 'N/A' }}</td>
                                    <td>
                                        <div class="d-flex justify-content-end gap-2">
                                            @if($customer->trashed())
                                            <form action="{{ route('admin.user.restore', $customer) }}" method="POST" class="d-inline">
                                                @csrf
                                                @method('PATCH')
                                                <button type="submit" class="btn btn-soft-success btn-sm restoreuser" data-bs-toggle="tooltip" data-bs-placement="top" title="Restore user" data-bs-custom-class="success-tooltip">
                                                    <iconify-icon icon="solar:refresh-circle-broken" class="align-middle fs-18"></iconify-icon>
                                                </button>
                                            </form>
                                            @else
                                            <a href="{{ route('admin.user.show', $customer) }}" class="btn btn-light btn-sm" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="View user">
                                                <iconify-icon icon="solar:eye-broken" class="align-middle fs-18"></iconify-icon>
                                            </a>
                                            <form action="{{ route('admin.user.destroy', $customer) }}" method="POST" class="d-inline">
                                                @csrf
                                                @method('DELETE')
                                                <button type="submit" class="btn btn-soft-danger btn-sm deleteuser" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="Delete user">
                                                    <iconify-icon icon="solar:trash-bin-minimalistic-2-broken" class=" align-middle fs-18"></iconify-icon>
                                                </button>
                                            </form>
                                            @endif
                                        </div>
                                    </td>
                                </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
                <div class="card-footer border-top">
                    {{ $users->links('admin.user.custom-pagination') }}
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@section('scripts')
<script src="{{ asset('admin/assets/js/pages/users.js') }}"></script>
<script>
$(document).ready(function() {
    const $showDeletedCheckbox = $('#showDeletedUsers');
    const $deletedUsers = $('.user-deleted');

    $showDeletedCheckbox.on('change', function() {
        const isChecked = $(this).prop('checked');
        $deletedUsers.toggle(isChecked);

        // Update the URL with the checkbox state
        const url = new URL(window.location);
        url.searchParams.set('show_deleted', isChecked ? '1' : '0');

        // Preserve the existing search parameter, if any
        const existingSearch = url.searchParams.get('search');
        if (existingSearch) {
            url.searchParams.set('search', existingSearch);
        }

        // Reload the page with the new URL
        window.location.href = url.toString();
    });
});
</script>
@endsection