@extends('frontend.layouts.app')
@section('content')
    <style>
        .form-section {
            /*   background: #f8f9fc; */
            padding: 60px 0;
        }

        .form-card {
            font-family: 'Segoe UI', sans-serif;
            padding: 40px;
            box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
            width: 100%;
            box-sizing: border-box;
            align-items: center;
            background-color: #fff;
            border: none;
            border-radius: 8px;
            margin: 20px auto;
        }

        .form-card h2 {
            font-weight: 700;
            color: #015fc9;
            margin-bottom: 30px;
        }

        .form-control,
        .form-select {
            border-radius: 8px;
            border: 1px solid #ced4da;
            box-shadow: none !important;
            transition: all 0.2s ease-in-out;
        }

        .form-control:focus,
        .form-select:focus {
            border-color: #015fc9;
            box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
        }

        .btn-submit {
            background-color: #015fc9;
            border: none;
            padding: 12px 25px;
            font-weight: 600;
            border-radius: 10px;
            color: #fff;
        }

        .btn-submit:hover {
            background-color: #015fc9;
        }


        @media (max-width: 767px) {
            .form-card {
                width: 100% !important;
                margin: 0 !important;
                border-radius: 0 !important;
                box-shadow: none !important;
                padding: 15px !important;
            }

            .container.form-section {
                padding: 0;
            }
        }
    </style>
    <div class="container-fluid page-header-modern">
        <div class="container">
            <h1>Donar Registration</h1>
            <ol class="breadcrumb breadcrumb-modern">
                <li class="breadcrumb-item"><a href="{{ url('/') }}">Home</a></li>
                <li class="breadcrumb-item">Pages</li>
                <li class="breadcrumb-item active">Donar Registration</li>
            </ol>
        </div>
    </div>
    <div class="container form-section">
        <div class="row justify-content-center">
            <div class="col-lg-6">
                <div class="form-card">
                    @if (session('success'))
                        <div class="alert alert-success alert-dismissible fade show" role="alert">
                            {{ session('success') }}
                            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                        </div>
                    @endif
                    @if (session('error'))
                        <div class="alert alert-danger alert-dismissible fade show" role="alert">
                            {{ session('error') }}
                            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                        </div>
                    @endif
                    <form method="POST" action="{{ route('donar.storeDonar') }}" enctype="multipart/form-data">
                        @csrf
                        <div class="row g-4">
                            <div class="col-md-12">
                                <label>Full Name *</label>
                                <input type="text" name="full_name"
                                    class="form-control @error('full_name') is-invalid @enderror"
                                    value="{{ old('full_name') }}">
                                @error('full_name')
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                @enderror
                            </div>
                            <div class="col-md-12">
                                <label>Mobile Number*</label>
                                <input type="text" name="mobile"
                                    class="form-control @error('mobile') is-invalid @enderror" value="{{ old('mobile') }}">
                                @error('mobile')
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                @enderror
                            </div>
                            <div class="col-md-12">
                                <label>Address</label>
                                <input type="text" name="address"
                                    class="form-control @error('address') is-invalid @enderror"
                                    value="{{ old('address') }}">
                                @error('address')
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                @enderror
                            </div>
                            <div class="col-md-12">
                                <label>Email</label>
                                <input type="email" name="email"
                                    class="form-control @error('email') is-invalid @enderror" value="{{ old('email') }}">
                                @error('email')
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                @enderror
                            </div>

                            <div class="col-md-6">
                                <label>Password</label>
                                <input type="password" name="password"
                                    class="form-control @error('password') is-invalid @enderror"
                                    value="{{ old('password') }}" id="password">
                                @error('password')
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                @enderror
                            </div>

                            <div class="col-md-6">
                                <label>Confirm Password</label>
                                <input type="password" name="password_confirmation"
                                    class="form-control" value="{{ old('password_confirmation') }}"
                                    id="password_confirmation">
                            </div>
                            <div class="col-md-12">
                                <ul id="password-checklist" class="list-unstyled ms-1 small">
                                    <li id="lengthCheck" class="d-flex align-items-center text-danger mb-1">
                                        <i class="bi bi-x-circle me-2"></i> Minimum 8 characters
                                    </li>
                                    <li id="lowerCheck" class="d-flex align-items-center text-danger mb-1">
                                        <i class="bi bi-x-circle me-2"></i> At least one lowercase letter
                                    </li>
                                    <li id="upperCheck" class="d-flex align-items-center text-danger mb-1">
                                        <i class="bi bi-x-circle me-2"></i> At least one uppercase letter
                                    </li>
                                    <li id="numberCheck" class="d-flex align-items-center text-danger mb-1">
                                        <i class="bi bi-x-circle me-2"></i> At least one number
                                    </li>
                                    <li id="specialCheck" class="d-flex align-items-center text-danger mb-1">
                                        <i class="bi bi-x-circle me-2"></i> At least one special character
                                    </li>
                                    <li id="matchCheck" class="d-flex align-items-center text-danger mb-1">
                                        <i class="bi bi-x-circle me-2"></i> Passwords match
                                    </li>
                                </ul>
                            </div>


                            <div class="col-12">
                                <div class="form-check mt-3">
                                    <input class="form-check-input" type="checkbox" name="accept_rules">
                                    <label class="form-check-label">
                                        I confirm all information is correct and I accept the rules of Bangladesh Society
                                        Bahrain.
                                    </label>
                                </div>
                            </div>
                            <div class="col-12 text-center mt-4">
                                <button class="btn btn-submit">Register</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
@endsection
@push('script')
    <script>
        $(document).ready(function() {
            $('#password, #password_confirmation').on('input', function() {
                const password = $('#password').val();
                const confirmPassword = $('#password_confirmation').val();

                validateCheck('#lengthCheck', password.length >= 8);
                validateCheck('#lowerCheck', /[a-z]/.test(password));
                validateCheck('#upperCheck', /[A-Z]/.test(password));
                validateCheck('#numberCheck', /\d/.test(password));
                validateCheck('#specialCheck', /[\W_]/.test(password));
                validateCheck('#matchCheck', password !== '' && password === confirmPassword);
            });

            function validateCheck(id, valid) {
                const el = $(id);
                const icon = el.find('i');

                if (valid) {
                    el.removeClass('text-danger').addClass('text-success');
                    icon.removeClass('bi-x-circle').addClass('bi-check-circle');
                } else {
                    el.removeClass('text-success').addClass('text-danger');
                    icon.removeClass('bi-check-circle').addClass('bi-x-circle');
                }
            }
        });
    </script>
@endpush