@extends('admin.layouts.app')

@section('title', 'Administratori')

@push('styles')
    <style>
        .page-hero {
            background: radial-gradient(1000px 500px at 10% -20%, rgba(13,110,253,.10), transparent 60%),
            radial-gradient(800px 500px at 90% 0%, rgba(32,201,151,.10), transparent 60%);
            border-radius: 1rem;
        }
        .card.fancy { border:1px solid var(--bs-border-color); transition:transform .18s ease, box-shadow .18s ease; }
        .card.fancy:hover{ transform:translateY(-2px); box-shadow:0 .75rem 1.5rem rgba(0,0,0,.06); }
        .badge-soft { background: rgba(13,110,253,.1); color:#0d6efd; }
        .avatar {
            width: 40px; height: 40px; border-radius: 50%;
            display: grid; place-items: center; font-weight: 600;
            background: linear-gradient(135deg, #0d6efd22, #20c99722);
            border: 1px solid var(--bs-border-color);
        }
        .table > :not(caption) > * > * { vertical-align: middle; }
        .btn-gradient { background: linear-gradient(90deg, #0d6efd, #20c997); border:0; }
        .btn-gradient:hover{ filter:brightness(1.05); }
        .search-wrap { position: relative; }
        .search-wrap .bi-search { position: absolute; left:.75rem; top:50%; transform:translateY(-50%); opacity:.6; }
        .search-wrap input{ padding-left:2.25rem; }
        .fade-in { animation: fadeIn .25s ease; }
        @keyframes fadeIn { from {opacity:0; transform:translateY(4px);} to {opacity:1; transform:none;} }
    </style>
@endpush

@section('content')
    <div class="container-fluid">

        {{-- Toasts --}}
        @if(session('status') || session('error'))
            <div class="position-fixed top-0 end-0 p-3" style="z-index: 1080">
                <div class="toast text-bg-{{ session('error') ? 'danger' : 'success' }} show">
                    <div class="d-flex">
                        <div class="toast-body">
                            <i class="bi bi-{{ session('error') ? 'x-circle' : 'check2-circle' }} me-2"></i>
                            {{ session('error') ?? session('status') }}
                        </div>
                        <button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast"></button>
                    </div>
                </div>
            </div>
        @endif

        {{-- Header --}}
        <div class="page-hero p-4 mb-4 mt-4">
            <div class="d-flex align-items-center justify-content-between">
                <div class="d-flex align-items-center gap-3">
                    <span class="badge rounded-pill badge-soft px-3 py-2"><i class="bi bi-people-fill me-1"></i> Administratori</span>
                    <h3 class="mb-0">Lista administratorilor</h3>
                </div>
                <div>
                    <button class="btn btn-gradient text-white" data-bs-toggle="modal" data-bs-target="#modalAdd">
                        <i class="bi bi-plus-circle me-1"></i> Adaugă administrator
                    </button>
                </div>
            </div>
            <div class="text-secondary mt-2">
                Total: <span class="badge text-bg-primary">{{ $count }}</span>
            </div>
        </div>

        <div class="card fancy fade-in">
            <div class="card-body">
                <form method="get" class="row g-3 align-items-center mb-3">
                    <div class="col-md-6">
                        <div class="search-wrap">
                            <i class="bi bi-search"></i>
                            <input type="text" class="form-control" name="q" value="{{ $q }}" placeholder="Caută după nume, email sau telefon…">
                        </div>
                    </div>
                    <div class="col-md-6 text-md-end">
                        <button class="btn btn-outline-secondary me-2" type="submit"><i class="bi bi-filter me-1"></i>Filtrează</button>
                        <a href="{{ route('admin.users.index') }}" class="btn btn-outline-secondary"><i class="bi bi-x-circle me-1"></i>Reset</a>
                    </div>
                </form>

                <div class="table-responsive">
                    <table class="table align-middle">
                        <thead class="table-light">
                        <tr>
                            <th>Admin</th>
                            <th>Email</th>
                            <th>Telefon</th>
                            <th>Creat</th>
                            <th class="text-end">Acțiuni</th>
                        </tr>
                        </thead>
                        <tbody>
                        @forelse($users as $user)
                            <tr>
                                <td>
                                    <div class="d-flex align-items-center gap-2">
                                        <div class="avatar">
                                            {{ strtoupper(mb_substr($user->first_name ?: $user->name, 0, 1)) }}
                                        </div>
                                        <div>
                                            <div class="fw-semibold">{{ trim(($user->first_name ?: '').' '.($user->last_name ?: '')) ?: $user->name }}</div>
                                            <div class="small text-secondary">#{{ $user->id }}</div>
                                        </div>
                                    </div>
                                </td>
                                <td><a href="mailto:{{ $user->email }}">{{ $user->email }}</a></td>
                                <td>{{ $user->phone ?: '—' }}</td>
                                <td class="text-secondary">{{ $user->created_at?->format('d.m.Y H:i') }}</td>
                                <td class="text-end">
                                    <div class="btn-group">
                                        <button
                                            class="btn btn-sm btn-outline-primary"
                                            data-bs-toggle="modal" data-bs-target="#modalEdit"
                                            data-id="{{ $user->id }}"
                                            data-fn="{{ $user->first_name }}"
                                            data-ln="{{ $user->last_name }}"
                                            data-email="{{ $user->email }}"
                                            data-phone="{{ $user->phone }}"
                                        >
                                            <i class="bi bi-pencil-square"></i> Editează
                                        </button>

                                        <button
                                            class="btn btn-sm btn-outline-danger"
                                            data-bs-toggle="modal" data-bs-target="#modalDelete"
                                            data-id="{{ $user->id }}"
                                            data-name="{{ trim(($user->first_name ?: '').' '.($user->last_name ?: '')) ?: $user->name }}"
                                            @if(auth()->id() === $user->id) disabled title="Nu îți poți șterge propriul cont" @endif
                                        >
                                            <i class="bi bi-trash"></i>
                                        </button>
                                    </div>
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="5" class="text-center text-secondary py-4">Nu există administratori.</td>
                            </tr>
                        @endforelse
                        </tbody>
                    </table>
                </div>

                {{ $users->links() }}
            </div>
        </div>
    </div>

    {{-- MODAL: ADD --}}
    <div class="modal fade" id="modalAdd" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <form class="modal-content needs-validation" method="post" action="{{ route('admin.users.store') }}" novalidate>
                @csrf
                <div class="modal-header">
                    <h5 class="modal-title"><i class="bi bi-person-plus me-2"></i>Adaugă administrator</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <div class="row g-3">
                        <div class="col-md-6">
                            <div class="form-floating">
                                <input type="text" name="first_name" class="form-control" placeholder="Prenume" required>
                                <label>Prenume</label>
                                <div class="invalid-feedback">Prenumele este obligatoriu.</div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-floating">
                                <input type="text" name="last_name" class="form-control" placeholder="Nume" required>
                                <label>Nume</label>
                                <div class="invalid-feedback">Numele este obligatoriu.</div>
                            </div>
                        </div>

                        <div class="col-md-6">
                            <div class="form-floating">
                                <input type="email" name="email" class="form-control" placeholder="email@exemplu.com" required>
                                <label>Email</label>
                                <div class="invalid-feedback">Email invalid.</div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-floating">
                                <input type="text" name="phone" class="form-control" placeholder="07xx xxx xxx">
                                <label>Telefon</label>
                            </div>
                        </div>

                        <div class="col-md-6">
                            <div class="form-floating">
                                <input type="password" name="password" class="form-control" placeholder="Parolă" minlength="6" required>
                                <label>Parolă</label>
                                <div class="invalid-feedback">Minim 6 caractere.</div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-floating">
                                <input type="password" name="password_confirmation" class="form-control" placeholder="Confirmă parola" minlength="6" required>
                                <label>Confirmă parola</label>
                                <div class="invalid-feedback">Confirmă parola.</div>
                            </div>
                        </div>

                        @if ($errors->any() && !old('_edit_id'))
                            <div class="col-12">
                                <div class="alert alert-danger small mb-0">
                                    <ul class="mb-0 ps-3">
                                        @foreach ($errors->all() as $error) <li>{{ $error }}</li> @endforeach
                                    </ul>
                                </div>
                            </div>
                        @endif
                    </div>
                </div>
                <div class="modal-footer">
                    <button class="btn btn-outline-secondary" data-bs-dismiss="modal">Renunță</button>
                    <button class="btn btn-gradient text-white">Salvează</button>
                </div>
            </form>
        </div>
    </div>

    {{-- MODAL: EDIT --}}
    <div class="modal fade" id="modalEdit" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <form id="editForm" class="modal-content needs-validation" method="post" novalidate>
                @csrf @method('PUT')
                <input type="hidden" name="_edit_id" value="1">
                <div class="modal-header">
                    <h5 class="modal-title"><i class="bi bi-pencil-square me-2"></i>Editează administrator</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <div class="row g-3">
                        <div class="col-md-6">
                            <div class="form-floating">
                                <input type="text" name="first_name" id="edit_first_name" class="form-control" required>
                                <label>Prenume</label>
                                <div class="invalid-feedback">Prenumele este obligatoriu.</div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-floating">
                                <input type="text" name="last_name" id="edit_last_name" class="form-control" required>
                                <label>Nume</label>
                                <div class="invalid-feedback">Numele este obligatoriu.</div>
                            </div>
                        </div>

                        <div class="col-md-6">
                            <div class="form-floating">
                                <input type="email" name="email" id="edit_email" class="form-control" required>
                                <label>Email</label>
                                <div class="invalid-feedback">Email invalid.</div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-floating">
                                <input type="text" name="phone" id="edit_phone" class="form-control">
                                <label>Telefon</label>
                            </div>
                        </div>

                        <div class="col-12">
                            <div class="form-floating">
                                <input type="password" name="password" class="form-control" placeholder="(lasă gol dacă nu schimbi)">
                                <label>Parolă nouă (opțional)</label>
                            </div>
                            <small class="text-secondary">Lasă gol dacă nu vrei să schimbi parola.</small>
                        </div>
                        <div class="col-12">
                            <div class="form-floating">
                                <input type="password" name="password_confirmation" class="form-control" placeholder="">
                                <label>Confirmă parola (dacă ai completat mai sus)</label>
                            </div>
                        </div>

                        @if ($errors->any() && old('_edit_id'))
                            <div class="col-12">
                                <div class="alert alert-danger small mb-0">
                                    <ul class="mb-0 ps-3">
                                        @foreach ($errors->all() as $error) <li>{{ $error }}</li> @endforeach
                                    </ul>
                                </div>
                            </div>
                        @endif
                    </div>
                </div>
                <div class="modal-footer">
                    <button class="btn btn-outline-secondary" data-bs-dismiss="modal">Renunță</button>
                    <button class="btn btn-gradient text-white">Salvează</button>
                </div>
            </form>
        </div>
    </div>

    {{-- MODAL: DELETE --}}
    <div class="modal fade" id="modalDelete" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <form id="deleteForm" class="modal-content" method="post">
                @csrf @method('DELETE')
                <div class="modal-header">
                    <h5 class="modal-title text-danger"><i class="bi bi-exclamation-triangle me-2"></i>Ștergere administrator</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <p class="mb-0">Ești sigur că vrei să ștergi administratorul <strong id="delName">—</strong>?</p>
                </div>
                <div class="modal-footer">
                    <button class="btn btn-outline-secondary" data-bs-dismiss="modal">Renunță</button>
                    <button class="btn btn-danger">Șterge</button>
                </div>
            </form>
        </div>
    </div>
@endsection

@push('scripts')
    <script src="https://code.jquery.com/jquery-3.7.1.min.js" crossorigin="anonymous"></script>

    <script>
        (function () {
            // --- Helpers
            function mark($i, ok) {
                $i.toggleClass('is-valid', !!ok).toggleClass('is-invalid', !ok);
            }
            const isNonEmpty = v => v.trim().length > 0;
            const isEmail    = v => /^[^\s@]+@[^\s@]+\.[^\s@]{2,}$/.test(v);
            const isPhone    = v => v.trim()==='' || /^[0-9+\s().-]{6,20}$/.test(v); // opțional în Add
            const min6       = v => v.length >= 6;

            // --- Bootstrap HTML5 guard (păstrăm și submit validation)
            document.querySelectorAll('.needs-validation').forEach(form => {
                form.addEventListener('submit', e => {
                    if (!form.checkValidity()) { e.preventDefault(); e.stopPropagation(); }
                    form.classList.add('was-validated');
                }, false);
            });

            // --- ADD modal realtime validation
            function wireAddModal() {
                const $form = $('#modalAdd form');
                const $fn   = $form.find('input[name="first_name"]');
                const $ln   = $form.find('input[name="last_name"]');
                const $em   = $form.find('input[name="email"]');
                const $ph   = $form.find('input[name="phone"]');
                const $pw   = $form.find('input[name="password"]');
                const $pc   = $form.find('input[name="password_confirmation"]');

                function v_fn() { mark($fn, isNonEmpty($fn.val())); }
                function v_ln() { mark($ln, isNonEmpty($ln.val())); }
                function v_em() { mark($em, isEmail($em.val())); }
                function v_ph() { mark($ph, isPhone($ph.val())); }
                function v_pw() { mark($pw, min6($pw.val())); v_pc(); }
                function v_pc() { mark($pc, $pc.val() === $pw.val() && min6($pw.val())); }

                $fn.on('input blur', v_fn);
                $ln.on('input blur', v_ln);
                $em.on('input blur', v_em);
                $ph.on('input blur', v_ph);
                $pw.on('input blur', v_pw);
                $pc.on('input blur', v_pc);

                // Reset vizual când se deschide modalul
                $('#modalAdd').on('show.bs.modal', () => {
                    $form[0].reset();
                    $form.removeClass('was-validated');
                    $form.find('.is-valid, .is-invalid').removeClass('is-valid is-invalid');
                });
            }

            // --- EDIT modal realtime validation (parola e opțională)
            function wireEditModal() {
                const $modal = $('#modalEdit');
                const $form  = $('#editForm');
                const $fn    = $form.find('#edit_first_name');
                const $ln    = $form.find('#edit_last_name');
                const $em    = $form.find('#edit_email');
                const $ph    = $form.find('#edit_phone');
                const $pw    = $form.find('input[name="password"]');
                const $pc    = $form.find('input[name="password_confirmation"]');

                function v_fn() { mark($fn, isNonEmpty($fn.val())); }
                function v_ln() { mark($ln, isNonEmpty($ln.val())); }
                function v_em() { mark($em, isEmail($em.val())); }
                function v_ph() { mark($ph, isPhone($ph.val())); }
                function v_pw() {
                    const val = $pw.val();
                    if (val === '') {
                        $pw.removeClass('is-valid is-invalid');
                        $pc.removeClass('is-valid is-invalid');
                    } else {
                        mark($pw, min6(val));
                        v_pc();
                    }
                }
                function v_pc() {
                    const need = $pw.val() !== '';
                    if (!need && $pc.val()==='') { $pc.removeClass('is-valid is-invalid'); return; }
                    mark($pc, $pc.val() === $pw.val() && min6($pw.val()));
                }

                $fn.on('input blur', v_fn);
                $ln.on('input blur', v_ln);
                $em.on('input blur', v_em);
                $ph.on('input blur', v_ph);
                $pw.on('input blur', v_pw);
                $pc.on('input blur', v_pc);

                // Populez + setez action (ai deja logică, o păstrăm)
                $modal.on('show.bs.modal', function (event) {
                    const btn   = event.relatedTarget;
                    const id    = btn.getAttribute('data-id');
                    const fn    = btn.getAttribute('data-fn') || '';
                    const ln    = btn.getAttribute('data-ln') || '';
                    const email = btn.getAttribute('data-email') || '';
                    const phone = btn.getAttribute('data-phone') || '';

                    $fn.val(fn); $ln.val(ln); $em.val(email); $ph.val(phone); $pw.val(''); $pc.val('');
                    $form[0].setAttribute('action', `{{ route('admin.users.update', ['user' => 0]) }}`.replace('/0', `/${id}`));
                    $form.removeClass('was-validated');
                    $form.find('.is-valid, .is-invalid').removeClass('is-valid is-invalid');
                });
            }

            // --- DELETE modal (păstrez logica ta existentă)
            function wireDeleteModal() {
                const $modal = $('#modalDelete');
                $modal.on('show.bs.modal', function (event) {
                    const btn  = event.relatedTarget;
                    const id   = btn.getAttribute('data-id');
                    const name = btn.getAttribute('data-name') || '—';
                    $('#delName').text(name);
                    $('#deleteForm').attr('action', `{{ route('admin.users.destroy', ['user' => 0]) }}`.replace('/0', `/${id}`));
                });
            }

            // --- init
            $(function(){
                wireAddModal();
                wireEditModal();
                wireDeleteModal();

                // Redeschidere modal corect dacă vin erori de validare din backend
                @if ($errors->any())
                @if (old('_edit_id'))
                new bootstrap.Modal(document.getElementById('modalEdit')).show();
                @else
                new bootstrap.Modal(document.getElementById('modalAdd')).show();
                @endif
                @endif
            });
        })();
    </script>
@endpush