@extends('layout')
@section('content')
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css">
    <link rel="stylesheet" href="{{ asset('/login-css/org-register-style.css') }}">
    <link rel="stylesheet" href="{{ asset('/login-css/responsive.css') }}">
    <!-- <link rel="stylesheet" href="{{ asset('/login-css/animation.css') }}"> -->

    {{-- <div class="ls-bg">
        <img class="ls-bg-inner" src="{{ asset('/images/bg.jpg') }}" alt="">
    </div> --}}
    <style type="text/css">
        .uppercase {
            text-transform: uppercase;
        }
    </style>
    <main class="overflow-hidden">
        <div class="container">
            <div class="main-inner">
                <div class="row h-100 align-content-center">
                    <div class="col-md-5 tab-100 order_2">
                        <div class="side-text">
                            <article>
                                <h1 class="main-heading">Association Of Voluntary Blood Donors West Bengal</h1>
                            </article>
                            <img src="{{ asset('/images/login-bg-1.png') }}" alt="AVBD" style="width: 280px;">
                        </div>
                    </div>
                    <div class="col-md-7 tab-100">

                        <!-- form -->
                        <div class="form">
                            <h2 class="registration-form form-title">
                                Organization Registration Form
                            </h2>
                            <div id="floating-alert-container">
                                @if (session('success'))
                                    <div class="alert alert-success alert-dismissible fade show floating-alert">
                                        <strong>{{ session('success') }}</strong>
                                        <button type="button" class="close" data-dismiss="alert">×</button>
                                    </div>
                                @endif

                                @if (session('error'))
                                    <div class="alert alert-danger alert-dismissible fade show floating-alert">
                                        <strong>{{ session('error') }}</strong>
                                        <button type="button" class="close" data-dismiss="alert">×</button>
                                    </div>
                                @endif

                                @if ($errors->any())
                                    @foreach ($errors->all() as $error)
                                        <div class="alert alert-danger alert-dismissible fade show floating-alert">
                                            <strong>{{ $error }}</strong>
                                            <button type="button" class="close" data-dismiss="alert">×</button>
                                        </div>
                                    @endforeach
                                @endif
                            </div>
                            <div id="ajax-container-send-otp" data-url="{{ url('org-send-otp') }}"></div>
                            <div id="ajax-container-verify-otp" data-url="{{ url('org-verify-otp') }}"></div>
                            <div id="ajax-container-resend-otp" data-url="{{ url('org-resend-otp') }}"></div>
                            <!-- login form -->
                            {{-- {{ Form::open(['url' => url('/org-registration-save'), 'method' => 'POST', 'id' => 'orgsave', 'class' => 'registration-form']) }} --}}
                            {{ Form::open(['url' => url('/org-send-otp'), 'method' => 'POST', 'id' => 'orgsave', 'class' => 'registration-form']) }}
                            <div class="row">
                                <div class="form-group col-md-6">
                                    <label>Name</label>
                                    <input type="text" placeholder="Name" id="org_name"
                                        class="form-control form-control-sm" name="org_name" required
                                        oninput="this.value=this.value.replace(/[^a-Za-z ]/g,'').replace(/(\..*)\./g, '$1');">
                                </div>
                                <div class="form-group col-md-6">
                                    <label>Organization Type</label>
                                    <select id="org_type" name="org_type" class="form-control form-control-sm" required>
                                        <option value="" disabled selected>Select Type</option>
                                        <option value="1">Club</option>
                                        <option value="2">Society</option>
                                    </select>
                                </div>
                                <div class="form-group col-md-6">
                                    <label>Email</label>
                                    <input type="email" placeholder="Email" id="org_email"
                                        class="form-control form-control-sm" name="org_email" required>
                                </div>
                                <div class="form-group col-md-6">
                                    <label>Contact Number</label>
                                    <input type="text" placeholder="Number" id="org_contract_no"
                                        class="form-control form-control-sm" name="org_contract_no" required
                                        oninput="this.value=this.value.replace(/[^0-9]/g,'').replace(/(\..*)\./g, '$1');">
                                </div>
                                <div class="form-group col-md-12">
                                    <label>Address</label>
                                    <input type="text" placeholder="Address" id="org_address"
                                        class="form-control form-control-sm" name="org_address" required>
                                </div>
                                <div class="form-group col-md-6">
                                    <label>Pincode</label>
                                    <input type="text" placeholder="Pincode" id="org_address_pin"
                                        class="form-control form-control-sm" name="org_address_pin" required
                                        oninput="this.value=this.value.replace(/[^0-9]/g,'').replace(/(\..*)\./g, '$1');">
                                </div>
                                <div class="form-group col-md-6">
                                    <label>Contact Person Name</label>
                                    <input type="text" placeholder="Contact Person Name" id="contract_person"
                                        class="form-control form-control-sm" name="contract_person" required
                                        oninput="this.value=this.value.replace(/[^A-Za-z ]/g,'').replace(/(\..*)\./g, '$1');">
                                </div>
                            </div>
                            <div class="registration-btn">
                                <input type="hidden" name="recaptcha_token" id="recaptcha_token">
                                <input type="hidden" name="otp_step" value="send">
                                <button type="button" id="newAddBtn" class="register">Submit</button>
                            </div>
                            {{ Form::close() }}
                            <div class="row d-flex justify-content-around">
                                <div class="d-flex justify-content-start flex-wrap" style="font-size: 14px;">
                                    Already user &nbsp; <a href="{{ route('login') }}"> Sign In</a>
                                </div>
                            </div>
                            <div class="row">
                                <div id="otpSection" style="display:none;">
                                    <label>Email OTP Verification</label>
                                    <input type="hidden" id="org_temp_id">
                                    <div class="form-group">
                                        <input type="text" id="otp" class="form-control form-control-sm"
                                            placeholder="Enter OTP">
                                    </div>
                                    <button type="button" id="verifyOtpBtn" class="register">
                                        Verify OTP
                                    </button>
                                    <button type="button" id="resendOtpBtn" class="btn btn-link">
                                        Resend OTP
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </main>
    <script src="https://www.google.com/recaptcha/api.js?render={{ config('recaptcha.site_key') }}"></script>
    <script src="{{ asset('dist/js/pages/registration.js') }}"></script>
@endsection