@extends('master.master_portal')

@section('title', 'RDPC - Espace Enrôlement')

@section('style')
<style>
    body {
        min-height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        background: var(--rdpc-blue-dark);
        margin: 0;
    }
    .login-card {
        width: 100%;
        max-width: 400px;
        background: #fff;
        border-radius: 20px;
        padding: 2.5rem 2rem;
        box-shadow: 0 20px 60px rgba(0,0,0,.3);
    }
    .logo-wrap {
        width: 90px; height: 90px;
        margin: 0 auto 1rem auto;
        border-radius: 50%;
        background: #f5f6fa;
        display: flex; align-items: center; justify-content: center;
        overflow: hidden;
        box-shadow: 0 4px 15px rgba(0,0,0,.1);
    }
    .logo-wrap img { width: 100%; height: 100%; object-fit: contain; }
    h1.brand { font-size: 1.3rem; font-weight: 700; color: var(--rdpc-blue-dark); text-align: center; margin-bottom: .2rem; }
    p.subtitle { text-align: center; color: #888; font-size: .85rem; margin-bottom: 2rem; }
    .form-control { border-radius: 12px; padding: .8rem 1rem; border: 1.5px solid #e5e7eb; }
    .form-control:focus { border-color: var(--rdpc-blue); box-shadow: 0 0 0 3px rgba(32,80,127,.15); }
    .form-label { font-weight: 600; font-size: .85rem; color: #333; }
    .btn-login {
        background: var(--rdpc-blue-dark);
        border: none; border-radius: 12px; padding: .85rem;
        font-weight: 600; color: #fff; width: 100%;
    }
    .btn-login:hover { background: #1a4269; color: #fff; }
    .input-group-text { background: #f5f6fa; border: 1.5px solid #e5e7eb; color: var(--rdpc-blue); border-radius: 0; }
    .input-group-text:first-child { border-right: none; border-radius: 12px 0 0 12px; }
    .input-group-text:last-child { border-left: none; border-radius: 0 12px 12px 0; }
    .input-group .form-control { border-radius: 0; border-left: none; border-right: none; }
    .input-group .form-control:last-child { border-radius: 0 12px 12px 0; }
    .input-group:focus-within .input-group-text { border-color: var(--rdpc-blue); }
    .badge-info-box {
        background: var(--rdpc-blue-soft); border: 1px solid #cfe0f0; border-radius: 12px;
        padding: .7rem 1rem; font-size: .78rem; color: var(--rdpc-blue-dark); margin-top: 1.2rem;
    }
    .form-check { display: flex; align-items: center; gap: .5rem; }
    .form-check-input {
        width: 1.15rem; height: 1.15rem; margin-top: 0; border: 1.5px solid #cfd4e4;
        border-radius: 5px; cursor: pointer;
    }
    .form-check-input:checked {
        background-color: var(--rdpc-blue); border-color: var(--rdpc-blue);
    }
    .form-check-input:focus {
        border-color: var(--rdpc-blue); box-shadow: 0 0 0 3px rgba(32,80,127,.15);
    }
    .form-check-label {
        font-size: .85rem; color: #555; cursor: pointer; user-select: none;
    }
</style>
@endsection

@section('content')
    <div class="login-card">
        <div class="logo-wrap">
            <img src="{{ asset('rdpc.jpeg') }}" alt="RDPC">
        </div>
        <h1 class="brand">RDPC</h1>
        <p class="subtitle">Espace Enrôlement Web — Agents de Terrain</p>

        <form id="form_login">
            @csrf
            <div class="mb-3">
                <label class="form-label">Numéro de téléphone</label>
                <div class="input-group">
                    <span class="input-group-text"><i class="fa-solid fa-mobile-screen-button"></i></span>
                    <input type="text" name="phone" class="form-control" placeholder="6XXXXXXXX" required>
                </div>
            </div>
            <div class="mb-3">
                <label class="form-label">Mot de passe</label>
                <div class="input-group">
                    <span class="input-group-text"><i class="fa-solid fa-lock"></i></span>
                    <input type="password" name="password" id="password_field" class="form-control" placeholder="••••••••" required>
                    <span class="input-group-text" id="toggle_password" style="cursor:pointer;border-left:none;">
                        <i class="fa-solid fa-eye" id="toggle_password_icon"></i>
                    </span>
                </div>
            </div>
            <div class="mb-3 form-check">
                <input type="checkbox" class="form-check-input" name="remember_me" id="remember_me" checked>
                <label class="form-check-label" for="remember_me">Se souvenir de moi</label>
            </div>
            <button type="submit" class="btn btn-login" id="btn_login">Se connecter</button>
        </form>

        <div class="badge-info-box text-center">
            <i class="fa-solid fa-circle-info me-1"></i>
            Espace dédié à l'enrôlement des membres par les agents de terrain.
        </div>
    </div>
@endsection

@section('scripts')
<script>
$(function () {
    $('#toggle_password').on('click', function () {
        const $input = $('#password_field');
        const $icon  = $('#toggle_password_icon');
        const isHidden = $input.attr('type') === 'password';
        $input.attr('type', isHidden ? 'text' : 'password');
        $icon.toggleClass('fa-eye', !isHidden).toggleClass('fa-eye-slash', isHidden);
    });

    // La route de login sera branchée à l'étape "controllers".
    const LOGIN_URL = "{{ Route::has('post.frontend.portal.login') ? route('post.frontend.portal.login') : '' }}";

    $('#form_login').on('submit', function (e) {
        e.preventDefault();
        if (!LOGIN_URL) {
            Swal.fire({ icon: 'info', text: 'Connexion à brancher (controllers à venir).', timer: 1800, showConfirmButton: false });
            return;
        }
        const $btn = $('#btn_login');
        $btn.prop('disabled', true).text('Connexion...');

        $.ajax({
            url: LOGIN_URL,
            type: 'POST',
            data: $(this).serialize(),
            success: function (data) {
                $btn.prop('disabled', false).text('Se connecter');
                if (data.code == 200) {
                    Swal.fire({ icon: 'success', text: data.message, timer: 1200, showConfirmButton: false })
                        .then(function () { window.location.href = data.redirect; });
                } else if (data.code == 205) {
                    Swal.fire({ icon: 'error', text: data.errors[0], timer: 3000, showConfirmButton: false });
                } else {
                    Swal.fire({ icon: 'error', text: data.message, timer: 3000, showConfirmButton: false });
                }
            },
            error: function () {
                $btn.prop('disabled', false).text('Se connecter');
                Swal.fire({ icon: 'error', text: 'Erreur de connexion au serveur.', timer: 3000, showConfirmButton: false });
            }
        });
    });
});
</script>
@endsection