@extends('layouts.master')
@section('content')
    <style>
        .user-card {
            transition: all 0.3s ease;
            border-radius: 20px;
        }
        .user-card:hover {
            transform: translateY(-8px);
            box-shadow: 0 15px 35px rgba(0,0,0,0.08);
        }
        .avatar-gradient {
            background: linear-gradient(135deg, #4e73df, #1cc88a);
            color: white;
            font-weight: 600;
            font-size: 26px;
        }
    </style>
    <div class="container-xxl flex-grow-1 container-p-y">

        <div class="col-xxl">
            <div class="card mb-4 shadow-sm border-0">
                <div class="card-header bg-white d-flex align-items-center justify-content-between">
                    <h5 class="mb-0 fw-bold text-primary text-capitalize">{{$agent}}s</h5>

                    <button class="btn btn-primary btn-sm shadow-sm text-capitalize"
                            data-bs-toggle="modal"
                            data-bs-target="#openmodal">
                        <i class="fa fa-plus me-1"></i> Add {{$agent}}
                    </button>
                </div>
            </div>

            <div class="row mt-4">
                @forelse($users as $user)
                    <div class="col-xl-3 col-lg-4 col-md-6 mb-4">
                        <div class="card user-card shadow-sm border-0 h-100 position-relative">
                            <div class="card-body text-center p-4">
                                {{-- Avatar --}}
                                <div class="mb-3">
                                    @if($user->image)
                                        <img src="{{ asset('assets/images/users/'.$user->image) }}"
                                             class="rounded-circle shadow"
                                             width="90" height="90"
                                             style="object-fit:cover;">
                                    @else
                                        @php
                                            $words = explode(' ', trim($user->name));
                                            if(count($words) == 1){
                                                $initials = strtoupper(substr($words[0],0,1));
                                            } else {
                                                $initials = strtoupper(substr($words[0],0,1) . substr($words[1],0,1));
                                            }
                                        @endphp
                                        <div class="rounded-circle avatar-gradient d-flex align-items-center justify-content-center mx-auto shadow"
                                             style="width:90px;height:90px;">
                                            {{ $initials }}
                                        </div>
                                    @endif
                                </div>

                                {{-- Name --}}
                                <h5 class="fw-bold mb-1 text-capitalize">{{ $user->name }}</h5>
                                <span class="text-muted small text-capitalize">{{ $user->role }}</span>

                                <hr class="my-3">

                                <p class="mb-2 small text-muted">
                                    <i class="fa fa-envelope me-2"></i>{{ $user->email }}
                                </p>

                                <p class="mb-2 small text-muted">
                                    <i class="fa fa-phone me-2"></i>{{ $user->cntctnum }}
                                </p>

                                <p class="mb-3 small text-muted text-capitalize">
                                    <i class="fa fa-map-marker-alt me-2"></i>{{ $user->city ?? 'N/A' }}
                                </p>
                                @if($user->isactive)
                                    @if(auth()->user()->role === 'owner')
                                        <a href="{{ route('agent.status.toggle', $user->id) }}"
                                           class="badge bg-success text-white text-decoration-none">
                                            <i class="fas fa-check me-1"></i> Active
                                        </a>
                                    @else
                                        <span class="badge bg-success text-white opacity-75" style="cursor: not-allowed;">
                                            <i class="fas fa-check me-1"></i> Active
                                        </span>
                                    @endif
                                @else
                                    @if(auth()->user()->role === 'owner')
                                        <a href="{{ route('agent.status.toggle', $user->id) }}"
                                           class="badge bg-danger text-white text-decoration-none">
                                            <i class="fas fa-ban me-1"></i> Blocked
                                        </a>
                                    @else
                                        <span class="badge bg-danger text-white opacity-75" style="cursor: not-allowed;">
                                            <i class="fas fa-ban me-1"></i> Blocked
                                        </span>
                                    @endif
                                @endif
                            </div>
                        </div>

                    </div>
                @empty
                    <div class="col-12">
                        <div class="card border-0 shadow-sm rounded-4">
                            <div class="card-body text-center p-5">
                                <h6 class="text-muted">No {{ ucfirst($agent) }} Found</h6>
                            </div>
                        </div>
                    </div>
                @endforelse
            </div>

        </div>
    </div>


    <!-- Modal -->
    <div class="modal fade" id="openmodal" data-bs-backdrop="static" tabindex="-1">
        <div class="modal-dialog modal-lg modal-dialog-centered">
            @if(auth()->user()->role=="owner")
                <form class="modal-content" method="POST" action="{{ route('owner.agent.store') }}">
            @elseif(auth()->user()->role=="assistant")
                <form class="modal-content" method="POST" action="{{ route('assistant.agent.store') }}">
            @endif
                @csrf
                <input type="hidden" name="role" value="{{ $agent }}">
                <div class="modal-header bg-primary">
                    <h5 class="modal-title text-white text-capitalize">Add {{$agent}}</h5>
                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
                </div>

                <div class="modal-body">
                    <div class="row g-3">
                        <!-- Name -->
                        <div class="col-md-6">
                            <label class="form-label">Full Name</label>
                            <input type="text" name="name" class="form-control" placeholder="Enter full name" required>
                        </div>
                        <!-- Email -->
                        <div class="col-md-6">
                            <label class="form-label">Email Address</label>
                            <input type="email" name="email" class="form-control" placeholder="Enter email" required>
                        </div>
                        <!-- Password -->
                        <div class="col-md-6">
                            <label class="form-label">Password</label>
                            <input type="password" name="password" class="form-control" placeholder="Enter password" required>
                        </div>
                        <!-- Contact Number -->
                        <div class="col-md-6">
                            <label class="form-label">Contact Number</label>
                            <input type="text" name="cntctnum" class="form-control" placeholder="Enter contact number" required>
                        </div>
                        <!-- City -->
                        <div class="col-md-12">
                            <label class="form-label">City</label>
                            <input type="text" name="city" class="form-control" placeholder="Enter city">
                        </div>
                    </div>
                </div>
                <div class="modal-footer bg-light">
                    <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">
                        Cancel
                    </button>
                    <button type="submit" class="btn btn-primary text-capitalize">
                        <i class="fa fa-save me-1"></i> Save {{$agent}}
                    </button>
                </div>
            </form>
        </div>
    </div>
@endsection