@extends('layouts.master-without-nav')
@section('title')
    Récupération de mot de passe
@endsection
@section('css')
    <style>
        /* Modern premium login redesign overrides */
        .auth-bg-cover {
            background: #ffffff !important;
        }
        .auth-bg-cover > .bg-overlay {
            background: none !important;
            opacity: 0 !important;
        }
        
        /* Card redesign */
        .auth-page-content .card {
            border: 1px solid #e2e8f0 !important;
            border-radius: 16px !important;
            box-shadow: 0 15px 35px rgba(0, 0, 0, 0.08), 0 5px 15px rgba(0, 0, 0, 0.04) !important;
            background: #ffffff !important;
        }

        /* Left column redesign with modern gradient & glassmorphism */
        .auth-one-bg {
            background: linear-gradient(135deg, #364574 0%, #20294a 100%) !important;
            position: relative;
            overflow: hidden;
            border-radius: 16px 0 0 16px !important;
        }
        
        .auth-one-bg .bg-overlay {
            background: none !important;
            opacity: 0 !important;
        }

        /* Modern styled glass box for quotes/carousel */
        .auth-one-bg .mt-auto {
            background: rgba(255, 255, 255, 0.06) !important;
            backdrop-filter: blur(12px) !important;
            -webkit-backdrop-filter: blur(12px) !important;
            border: 1px solid rgba(255, 255, 255, 0.1) !important;
            border-radius: 12px !important;
            padding: 20px !important;
            margin-top: auto !important;
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15) !important;
        }

        .auth-one-bg h5 {
            font-weight: 700 !important;
            letter-spacing: 0.5px !important;
            text-transform: uppercase !important;
            font-size: 1.1rem !important;
        }

        /* Form improvements */
        .form-control {
            border: 1px solid #e2e8f0 !important;
            border-radius: 8px !important;
            padding: 10px 16px !important;
            font-size: 0.95rem !important;
            transition: all 0.2s ease-in-out !important;
        }
        .form-control:focus {
            border-color: #405189 !important;
            box-shadow: 0 0 0 3px rgba(64, 81, 137, 0.15) !important;
        }
        .btn-primary {
            background-color: #405189 !important;
            border-color: #405189 !important;
            border-radius: 8px !important;
            padding: 10px 20px !important;
            font-weight: 600 !important;
            font-size: 1rem !important;
            letter-spacing: 0.5px !important;
            transition: all 0.2s ease-in-out !important;
            box-shadow: 0 4px 12px rgba(64, 81, 137, 0.25) !important;
        }
        .btn-primary:hover {
            background-color: #354372 !important;
            border-color: #354372 !important;
            transform: translateY(-1px) !important;
            box-shadow: 0 6px 16px rgba(64, 81, 137, 0.35) !important;
        }
        .btn-primary:active {
            transform: translateY(1px) !important;
        }

        /* Cropped module images CSS */
        .module-image-container {
            width: 100%;
            height: 180px;
            background-image: url("{{ URL::asset('images/deposit.png') }}");
            background-size: 260% 260%;
            background-repeat: no-repeat;
            border-radius: 12px;
            margin-bottom: 20px;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.25);
            border: 1.5px solid rgba(255, 255, 255, 0.15);
            transition: transform 0.3s ease;
        }
        .module-pos { background-position: 8% 28%; }
        .module-stock { background-position: 55% 5%; }
        .module-finance { background-position: 95% 36%; }
        .module-crm { background-position: 5% 85%; }
        .module-purchases { background-position: 50% 60%; }
        .module-analytics { background-position: 95% 88%; }

        /* Footer visibility on white background */
        footer.footer, footer.footer p, footer.footer span, footer.footer script {
            color: #495057 !important;
        }
    </style>
@endsection
@section('content')
    <!-- auth-page wrapper -->
    <div class="py-5 auth-page-wrapper auth-bg-cover d-flex justify-content-center align-items-center min-vh-100">
        <div class="bg-overlay"></div>
        <!-- auth-page content -->
        <div class="overflow-hidden auth-page-content pt-lg-5">
            <div class="container">
                <div class="row">
                    <div class="col-lg-12">
                        <div class="overflow-hidden card">
                            <div class="row g-0">
                                <div class="col-lg-6">
                                    <div class="p-4 p-lg-5 auth-one-bg h-100">
                                        <div class="bg-overlay"></div>
                                        <div class="position-relative h-100 d-flex flex-column">
                                            <div class="mb-4">
                                                <h5 class="text-white">ShopOnePlus</h5>
                                            </div>
                                            <div class="mt-auto">
                                                <div id="qoutescarouselIndicators" class="carousel slide"
                                                    data-bs-ride="carousel">
                                                    <div class="carousel-indicators" style="bottom: -20px;">
                                                        <button type="button" data-bs-target="#qoutescarouselIndicators"
                                                            data-bs-slide-to="0" class="active" aria-current="true"
                                                            aria-label="Slide 1"></button>
                                                        <button type="button" data-bs-target="#qoutescarouselIndicators"
                                                            data-bs-slide-to="1" aria-label="Slide 2"></button>
                                                        <button type="button" data-bs-target="#qoutescarouselIndicators"
                                                            data-bs-slide-to="2" aria-label="Slide 3"></button>
                                                        <button type="button" data-bs-target="#qoutescarouselIndicators"
                                                            data-bs-slide-to="3" aria-label="Slide 4"></button>
                                                        <button type="button" data-bs-target="#qoutescarouselIndicators"
                                                            data-bs-slide-to="4" aria-label="Slide 5"></button>
                                                        <button type="button" data-bs-target="#qoutescarouselIndicators"
                                                            data-bs-slide-to="5" aria-label="Slide 6"></button>
                                                    </div>
                                                    <div class="pb-4 text-center carousel-inner text-white">
                                                        <div class="carousel-item active">
                                                            <div class="module-image-container module-pos"></div>
                                                            <h5 class="text-white mb-2 fs-16 fw-semibold">POS &amp; Caisse</h5>
                                                            <p class="fs-14 text-white-50 px-2">Gestion des ventes, facturation rapide, impression de tickets et encaissements sécurisés.</p>
                                                        </div>
                                                        <div class="carousel-item">
                                                            <div class="module-image-container module-stock"></div>
                                                            <h5 class="text-white mb-2 fs-16 fw-semibold">Stocks &amp; Inventaire</h5>
                                                            <p class="fs-14 text-white-50 px-2">Suivi en temps réel des stocks, réapprovisionnements, inventaires et gestion des fournisseurs.</p>
                                                        </div>
                                                        <div class="carousel-item">
                                                            <div class="module-image-container module-finance"></div>
                                                            <h5 class="text-white mb-2 fs-16 fw-semibold">Comptabilité &amp; Finances</h5>
                                                            <p class="fs-14 text-white-50 px-2">Suivi des règlements, gestion de la caisse, des comptes bancaires et des flux financiers.</p>
                                                        </div>
                                                        <div class="carousel-item">
                                                            <div class="module-image-container module-crm"></div>
                                                            <h5 class="text-white mb-2 fs-16 fw-semibold">CRM &amp; Clients</h5>
                                                            <p class="fs-14 text-white-50 px-2">Fiches clients détaillées, historique d'achats, programmes de fidélité et crédits accordés.</p>
                                                        </div>
                                                        <div class="carousel-item">
                                                            <div class="module-image-container module-purchases"></div>
                                                            <h5 class="text-white mb-2 fs-16 fw-semibold">Achats &amp; Facturation</h5>
                                                            <p class="fs-14 text-white-50 px-2">Gestion des commandes d'achats, factures fournisseurs et rapprochement des livraisons.</p>
                                                        </div>
                                                        <div class="carousel-item">
                                                            <div class="module-image-container module-analytics"></div>
                                                            <h5 class="text-white mb-2 fs-16 fw-semibold">Analyses &amp; Rapports</h5>
                                                            <p class="fs-14 text-white-50 px-2">Tableaux de bord interactifs, statistiques de ventes et rapports d'activité détaillés.</p>
                                                        </div>
                                                    </div>
                                                </div>
                                                <!-- end carousel -->
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <!-- end col -->

                                <div class="col-lg-6">
                                    <div class="p-4 p-lg-5">
                                        <div>
                                            <h5 class="text-primary">Mot de passe oublié ?</h5>
                                            <p class="text-muted">Pas de problème. Indiquez-nous votre adresse email et nous vous enverrons un lien de réinitialisation.</p>
                                        </div>

                                        <div class="mt-4">
                                            @if (session('status'))
                                                <div class="alert alert-success mb-4">
                                                    {{ session('status') }}
                                                </div>
                                            @endif

                                            @if ($errors->any())
                                                <div class="alert alert-danger">
                                                    <ul class="mb-0">
                                                        @foreach ($errors->all() as $error)
                                                            <li>{{ $error }}</li>
                                                        @endforeach
                                                    </ul>
                                                </div>
                                            @endif

                                            <form method="POST" action="{{ route('password.email') }}">
                                                @csrf

                                                <div class="mb-3">
                                                    <label for="email" class="form-label">Email</label>
                                                    <input type="email" class="form-control" id="email"
                                                        name="email" value="{{ old('email') }}" required autofocus
                                                        autocomplete="username" placeholder="Entrez votre email">
                                                </div>

                                                <div class="mt-4">
                                                    <button class="btn btn-primary w-100" type="submit">Envoyer le lien de réinitialisation</button>
                                                </div>

                                                <div class="mt-4 text-center">
                                                    <p class="mb-0">Retourner à la <a href="{{ route('login') }}" class="fw-semibold text-primary text-decoration-underline">Connexion</a></p>
                                                </div>
                                            </form>
                                        </div>
                                    </div>
                                </div>
                                <!-- end col -->
                            </div>
                            <!-- end row -->
                        </div>
                        <!-- end card -->
                    </div>
                    <!-- end col -->
                </div>
                <!-- end row -->
            </div>
            <!-- end container -->
        </div>
        <!-- end auth page content -->

        <!-- footer -->
        <footer class="footer">
            <div class="container">
                <div class="row">
                    <div class="col-lg-12">
                        <div class="text-center">
                            <p class="mb-0 text-muted">
                            (C)
                            <script>
                                document.write(new Date().getFullYear())
                            </script> Tous droit reservés. ShopOnePlus, créée avec <i
                                class="mdi mdi-heart text-danger"></i> par
                            {{ applicateParamettre('NOM_PROPRIETAIRE_LOGICIEL', false) }}</p>
                        </div>
                    </div>
                </div>
            </div>
        </footer>
        <!-- end Footer -->
    </div>
    <!-- end auth-page-wrapper -->
@endsection