@extends('layouts.app')

@section('content')

    @include('Partials.sidebar')
    <section class="main_content dashboard_part large_header_bg">

        @include('Partials.header')

        <div class="container-fluid">

            {{-- Header --}}
            <div class="d-flex justify-content-between align-items-center mb-4">
                <h4 class="mb-0">👥 Manage Admins</h4>

                @if(session('admin_role') === 'super_admin')
                    <div class="flex-center">
                        <button class="btn btn-primary btn-sm" data-toggle="modal" data-target="#createSalesModal">
                            + Add Sales Person
                        </button>
                        <button class="btn btn-success btn-sm" data-toggle="modal" data-target="#createBrokerModal">
                            + Add Broker
                        </button>
                    </div>
                @endif
            </div>

            {{-- Success/Error messages --}}
            @if(session('success'))
                <div class="alert alert-success alert-dismissible fade show">
                    {{ session('success') }}
                    {{-- ✅ Bootstrap 4: data-dismiss --}}
                    <button type="button" class="close" data-dismiss="alert">
                        <span>&times;</span>
                    </button>
                </div>
            @endif
            @if(session('error'))
                <div class="alert alert-danger alert-dismissible fade show">
                    {{ session('error') }}
                    <button type="button" class="close" data-dismiss="alert">
                        <span>&times;</span>
                    </button>
                </div>
            @endif

            {{-- Admins Table --}}
            <div class="card">
                <div class="card-body">
                    <table class="table table-hover align-middle">
                        <thead class="table-dark">
                            <tr>
                                <th>#</th>
                                <th>Name</th>
                                <th>Email</th>
                                <th>Phone</th>
                                <th>Role</th>
                                <th>Status</th>
                                <th>Created</th>
                                @if(session('admin_role') === 'super_admin')
                                    <th>Action</th>
                                @endif
                            </tr>
                        </thead>
                        <tbody>
                            @forelse($admins as $index => $admin)
                                <tr>
                                    <td>{{ $index + 1 }}</td>
                                    <td>{{ $admin->name }}</td>
                                    <td>{{ $admin->email }}</td>
                                    <td>{{ $admin->phone ?? '—' }}</td>
                                    <td>
                                        @if($admin->role === 'sales')
                                            <span class="badge badge-primary">Sales</span>
                                        @elseif($admin->role === 'broker')
                                            <span class="badge badge-success">Broker</span>
                                        @else
                                            <span class="badge badge-danger">Super Admin</span>
                                        @endif
                                    </td>
                                    <td>
                                        @if($admin->status === 'active')
                                            <span class="badge badge-success">Active</span>
                                        @else
                                            <span class="badge badge-secondary">Inactive</span>
                                        @endif
                                    </td>
                                    <td>{{ $admin->created_at?->format('d M Y') }}</td>

                                    @if(session('admin_role') === 'super_admin')
    <td class="align-middle text-center">
        <div class="d-flex align-items-center justify-content-center" style="gap:6px;">

            {{-- Edit --}}
            <a href="/admin/admins/{{ $admin->id }}/edit"
               class="btn btn-sm btn-warning"
               title="Edit">
                <i class="fas fa-edit"></i>
            </a>

            {{-- Toggle Status --}}
            <form action="/admin/admins/{{ $admin->id }}/toggle-status"
                  method="POST"
                  class="d-inline mb-0">
                @csrf
                @method('PUT')
                <div class="toggle-switch-wrap"
                     title="{{ $admin->status === 'active' ? 'Click to Deactivate' : 'Click to Activate' }}">
                    <label class="toggle-switch mb-0">
                        <input type="checkbox"
                               {{ $admin->status === 'active' ? 'checked' : '' }}
                               onchange="this.closest('form').submit()">
                        <span class="toggle-slider"></span>
                    </label>
                    <small class="toggle-label {{ $admin->status === 'active' ? 'text-success' : 'text-danger' }}">
                        {{ $admin->status === 'active' ? 'Active' : 'Inactive' }}
                    </small>
                </div>
            </form>

            {{-- Delete --}}
            <form action="/admin/admins/{{ $admin->id }}"
                  method="POST"
                  class="d-inline mb-0"
                  onsubmit="return confirm('Are you sure you want to delete this admin?')">
                @csrf
                @method('DELETE')
                <button type="submit" class="btn btn-sm btn-danger" title="Delete">
                    <i class="fas fa-trash"></i>
                </button>
            </form>

        </div>
    </td>
@endif
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="8" class="text-center text-muted py-4">
                                        No admins found
                                    </td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

    </section>

    {{-- ── Create Sales Person Modal ── --}}
    @if(session('admin_role') === 'super_admin')
        <div class="modal fade" id="createSalesModal" tabindex="-1" role="dialog">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title">Add Sales Person</h5>
                        {{-- ✅ Bootstrap 4: data-dismiss --}}
                        <button type="button" class="close" data-dismiss="modal">
                            <span>&times;</span>
                        </button>
                    </div>
                    <form action="/admin/create-sales" method="POST">
                        @csrf
                        @if($errors->any())
                            <div class="alert alert-danger">
                                @foreach($errors->all() as $error)
                                    <p class="mb-0">{{ $error }}</p>
                                @endforeach
                            </div>
                        @endif
                        <div class="modal-body">
                            <div class="form-group">
                                <label>Name</label>
                                <input type="text" name="name" class="form-control" required>
                            </div>
                            <div class="form-group">
                                <label>Email</label>
                                <input type="email" name="email" class="form-control" required>
                            </div>
                            <div class="form-group">
                                <label>Phone</label>
                                <input type="text" name="phone" class="form-control">
                            </div>
                            <p class="text-muted small">Default password: <strong>123456</strong></p>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                            <button type="submit" class="btn btn-primary">Create</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>

        {{-- ── Create Broker Modal ── --}}
        <div class="modal fade" id="createBrokerModal" tabindex="-1" role="dialog">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title">Add Broker</h5>
                        <button type="button" class="close" data-dismiss="modal">
                            <span>&times;</span>
                        </button>
                    </div>
                    <form action="/admin/create-broker" method="POST">
                        @csrf
                        @if($errors->any())
                            <div class="alert alert-danger">
                                @foreach($errors->all() as $error)
                                    <p class="mb-0">{{ $error }}</p>
                                @endforeach
                            </div>
                        @endif
                        <div class="modal-body">
                            <div class="form-group">
                                <label>Name</label>
                                <input type="text" name="name" class="form-control" required>
                            </div>
                            <div class="form-group">
                                <label>Email</label>
                                <input type="email" name="email" class="form-control" required>
                            </div>
                            <div class="form-group">
                                <label>Phone</label>
                                <input type="text" name="phone" class="form-control">
                            </div>
                            <p class="text-muted small">Default password: <strong>123456</strong></p>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                            <button type="submit" class="btn btn-success">Create</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    @endif

    @include('Partials.footer')

@endsection