@extends('layouts/blankLayout')

@section('title', 'Admin Login')
@section('page-style')
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
    <style>
        :root {
            --brand: #22C55E;
            --brand2: #0ea5e9;
            --text: #0f172a;
            --muted: #64748b;
            --card: rgba(255, 255, 255, .88);
            --cardBorder: rgba(255, 255, 255, .22);
            --shadow: 0 20px 60px rgba(0, 0, 0, .35);
        }

        body {
            background: #0b1220;
        }

        .auth-wrap {
            min-height: 100vh;
            background:
                radial-gradient(1200px 600px at 18% 18%, rgba(14, 165, 233, .22), transparent 60%),
                radial-gradient(1000px 520px at 82% 30%, rgba(22, 163, 74, .18), transparent 55%),
                linear-gradient(180deg, rgba(2, 6, 23, .86), rgba(2, 6, 23, .72)),
                url('{{ asset('assets/img/auth-bg.jpg') }}');
            background-size: cover;
            background-position: center;
            overflow: hidden;
        }

        .blob {
            position: absolute;
            width: 420px;
            height: 420px;
            filter: blur(40px);
            opacity: .45;
            border-radius: 999px;
            background: conic-gradient(from 90deg,
                    rgba(14, 165, 233, .95),
                    rgba(22, 163, 74, .95),
                    rgba(14, 165, 233, .95));
        }

        .blob-1 {
            top: -120px;
            left: -140px;
        }

        .blob-2 {
            bottom: -170px;
            right: -160px;
            opacity: .35;
        }

        .auth-grid {
            min-height: 100vh;
            padding: 24px;
            position: relative;
            z-index: 2;
        }

        .auth-card {
            background: var(--card);
            border: 1px solid var(--cardBorder);
            box-shadow: var(--shadow);
            backdrop-filter: blur(14px);
            border-radius: 22px;
            max-width: 540px;
        }

        /* Header / Brand */
        .logo-img {
            height: 54px;
            width: auto;
        }

        .brand-row {
            display: flex;
            align-items: center;
            justify-content: center;
            /* centered */
            gap: 12px;
            text-align: center;
            margin-bottom: .25rem;
        }

        .brand-text {
            font-weight: 900;
            letter-spacing: -.02em;
            font-size: 1.05rem;
            color: var(--text);
            line-height: 1.1;
        }

        .title {
            font-weight: 950;
            letter-spacing: -.03em;
            margin: 1rem 0 .25rem;
            text-align: center;
            /* SIGN IN centered */
            color: var(--text);
        }

        .subtitle {
            color: var(--muted);
            margin: 0;
            text-align: center;
            /* centered subtitle */
        }

        /* Form */
        .form-label {
            font-weight: 800;
            color: var(--text);
        }

        .field-row {
            display: flex;
            gap: 10px;
            align-items: center;
        }

        .icon-pill {
            width: 46px;
            height: 46px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 14px;
            border: 1px solid rgba(15, 23, 42, .10);
            background: rgba(255, 255, 255, .75);
            flex: 0 0 46px;
        }

        .form-control {
            border-radius: 14px;
            border: 1px solid rgba(15, 23, 42, .12);
            padding: .9rem .95rem;
            background: rgba(255, 255, 255, .92);
        }

        .form-control:focus {
            border-color: rgba(14, 165, 233, .45);
            box-shadow: 0 0 0 .25rem rgba(14, 165, 233, .12);
            background: #fff;
        }

        /* Make the password toggle button match input height */
        .input-group .btn {
            border-radius: 14px;
            border: 1px solid rgba(15, 23, 42, .12);
            background: rgba(255, 255, 255, .92);
        }

        .btn-brand {
            background: linear-gradient(90deg, var(--brand), #22c55e);
            border: 0;
            border-radius: 14px;
            padding: .95rem 1rem;
            font-weight: 900;
            letter-spacing: .02em;
            color: #fff;
            box-shadow: 0 12px 24px rgba(22, 163, 74, .22);
            transition: transform .12s ease, filter .12s ease;
        }

        .btn-brand:hover {
            filter: brightness(1.03);
            transform: translateY(-1px);
            color: #fff;
        }

        .btn-brand:active {
            transform: translateY(0);
        }

        .link-soft {
            color: #0b6bff;
            text-decoration: none;
            font-weight: 800;
        }

        .link-soft:hover {
            text-decoration: underline;
        }

        /* Feature row */
        .features {
            display: flex;
            gap: 5px;
            justify-content: space-between;
            color: rgba(15, 23, 42, .65);
            font-size: .92rem;
            flex-wrap: wrap;
        }

        .features span {
            display: inline-flex;
            align-items: center;
            gap: 6px;
        }

        /* Mini stats */
        .mini-stats {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 10px;
            margin-top: 14px;
        }

        .mini {
            background: #ffffff;
            /* solid */
            border: 1px solid rgba(15, 23, 42, .12);
            border-radius: 16px;
            padding: 12px 12px;
            color: #000;
            transition: transform .12s ease, box-shadow .12s ease;
        }

        .mini:hover {
            transform: translateY(-1px);
            box-shadow: 0 10px 25px rgba(2, 6, 23, .10);
        }

        .mini .k {
            font-size: .75rem;
            color: rgba(0, 0, 0, .65);
            font-weight: 800;
            text-transform: uppercase;
            letter-spacing: .06em;
        }

        .mini .v {
            font-weight: 950;
            margin-top: 4px;
            display: flex;
            gap: 8px;
            align-items: center;
            color: #000;
        }

        .mini .v i {
            color: #000;
        }

        .input-group:has(button) .form-control {
            padding:  .9rem 1.2rem !important;
            border-width: 1px !important;
        }
        .input-group:has(button) .form-control:focus {
            color: #47484a !important;
            border-color: #b4b2b7 !important;
            border-width: 2px !important;
            outline: 0 !important;
            box-shadow: none !important;
        }
        /* Responsive */
        @media (max-width: 575.98px) {
            .auth-card {
                border-radius: 18px;
            }

            .mini-stats {
                grid-template-columns: 1fr;
            }

            .features {
                gap: 8px;
            }
        }
    </style>
@endsection

@section('content')
    <div class="auth-maintenance d-flex align-items-center min-vh-100">
        <div class="bg-overlay bg-light"></div>
        <div class="container">
            <div class="row justify-content-center">
                <div class="col-md-10">
                    <div class="auth-full-page-content d-flex min-vh-100 py-sm-5 py-4">
                        <div class="w-100">
                            <div class="d-flex flex-column h-100 py-0 py-xl-3">
                                <div class="text-center mb-4">
                                    <div class="brand-row">
                                        <img src="{{ asset('assets/img/logo.png') }}" alt="Logo" class="logo-img">
                                    </div>
                                    <div class="brand-text text-center">Payin • Payout • Provider Dashboard</div>
                                </div>

                                <div class="card my-auto overflow-hidden">
                                    <div class="row g-0">
                                        <div class="col-lg-6">
                                            <div class="bg-overlay bg-primary"></div>
                                            <div class="h-100 bg-auth align-items-end">
                                            </div>
                                        </div>

                                        <div class="col-lg-6">
                                            <div class="p-lg-5 p-4">
                                                <div>
                                                    <div class="text-center mt-1">
                                                        <h3 class="font-size-18">Admin Login</h3>
                                                    </div>

                                                    @if ($errors->any())
                                                        <div class="alert alert-danger pb-0"><ul>@foreach ($errors->all() as $error)<li>{{ $error }}</li>@endforeach</ul></div>
                                                    @endif
                                                    @if (session('success'))
                                                        <div class="alert alert-success">{{ session('success') }}</div>
                                                    @endif
                                                    
                                                    <form method="POST" id="formAuthentication" action="{{ route('auth.login.basic.submit') }}" class="auth-input">
                                                        @csrf
                                                        <div class="mb-2">
                                                            <label for="login" class="form-label">Email or Phone</label>
                                                            <input  id="login" name="login" type="text"
                                                                class="form-control @error('login') is-invalid @enderror"
                                                                value="{{ old('login') }}" placeholder="Enter email or phone" required
                                                                autocomplete="login" autofocus>
                                                            @error('login')
                                                                <span class="invalid-feedback" role="alert">
                                                                    <strong>{{ $message }}</strong>
                                                                </span>
                                                            @enderror
                                                        </div>

                                                         <div class="mb-3">
                                                            <label for="password" class="form-label overflow-hidden">Password</label>

                                                            <div class="input-group">
                                                                <input
                                                                    type="password"
                                                                    class="form-control @error('password') is-invalid @enderror"
                                                                    placeholder="Enter password"
                                                                    id="password"
                                                                    name="password"
                                                                    required
                                                                >
                                                                <button
                                                                    type="button"
                                                                    class="btn btn-outline-secondary rounded-end-2 cursor-pointer"
                                                                    id="togglePassword"
                                                                    aria-label="Toggle password">
                                                                    <i class="bi bi-eye-slash" id="eyeIcon"></i>
                                                                </button>
                                                            </div>

                                                            @error('password')
                                                                <span class="invalid-feedback d-block" role="alert">
                                                                    <strong>{{ $message }}</strong>
                                                                </span>
                                                            @enderror
                                                        </div>
                                                        <div class="form-check d-flex justify-content-between">
                                                            <div>
                                                                <input class="form-check-input" type="checkbox"
                                                                    name="remember" id="remember-me">
                                                                <label class="form-check-label" for="remember-me">Remember
                                                                    me</label>
                                                            </div>
                                                            <a href="{{ route('password.admin.form') }}" class="text-end">Forget Password?</a>
                                                        </div>
                                                        <div class="mt-4">
                                                            <button class="btn btn-primary w-100" type="submit"><i class="bi bi-box-arrow-in-right me-2"></i> Sign
                                                                In</button>
                                                        </div>
                                                    </form>
                                                </div>

                                                <div class="mt-4 text-center">
                                                    <p class="mb-0"><span class="text-secondary">New here?</span><a
                                                            href="{{ route('user-register') }}" class="fw-medium text-primary">
                                                            Create an account </a> </p>
                                                </div>
                                                <hr class="my-4" style="opacity:.12">
                                                <div class="features">
                                                    <span><i class="bi bi-diagram-3"></i> Provider routing</span>
                                                    <span><i class="bi bi-activity"></i> Live monitoring</span>
                                                </div>

                                                <div class="mini-stats">
                                                    <div class="mini">
                                                        <div class="k">Payin</div>
                                                        <div class="v"><i class="bi bi-arrow-down-left-circle"></i> Routing</div>
                                                    </div>
                                                    <div class="mini">
                                                        <div class="k">Payout</div>
                                                        <div class="v"><i class="bi bi-arrow-up-right-circle"></i> Queue</div>
                                                    </div>
                                                    <div class="mini">
                                                        <div class="k">Security</div>
                                                        <div class="v"><i class="bi bi-shield-lock"></i> VAPT</div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <!-- end card -->
                            </div>
                        </div>
                    </div>
                </div>
                <!-- end col -->
            </div>
            <!-- end row -->
        </div>
    </div>
@endsection
@section('js')
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

    <script>
        document.addEventListener('DOMContentLoaded', function () {
            document.getElementById('togglePassword').addEventListener('click', function (e) {
                e.preventDefault();
                e.stopPropagation();

                const input = document.getElementById('password');
                const icon = document.getElementById('eyeIcon');

                if (input.type === 'password') {
                    input.type = 'text';
                    icon.classList.remove('bi-eye-slash');
                    icon.classList.add('bi-eye');
                } else {
                    input.type = 'password';
                    icon.classList.remove('bi-eye');
                    icon.classList.add('bi-eye-slash');
                }
            });
        });
    </script>
@endsection