@extends('layout.app')
@section('content')
<div class="container-fluid">
    <div class="registration-container">
        <div class="form-header">
            <h2><i class="bi bi-person-plus me-3"></i>One Time Registration</h2>
            <p class="mb-0 mt-2 opacity-75">
                Complete your registration to access our services
            </p>
        </div>

        <div class="form-body">
            <form id="registrationForm">
                <!-- Important Notes -->
                <div class="alert alert-info border-0 rounded-3">
                    <h6 class="alert-heading">
                        <i class="bi bi-info-circle me-2"></i>Important Notes:
                    </h6>
                    <ul class="mb-0 mt-2">
                        <li>
                            For Access services - Category B applicant need to APPLY under
                            UL-VNO
                        </li>
                        <li>
                            For WPC Exams/Certificate Select Registration Type Category as
                            Individual (WPC Exams/Certificates)
                        </li>
                        <li><span class="required">*</span> fields are mandatory</li>
                    </ul>
                </div>

                <!-- Applicant Type Section -->
                <div class="section-header">
                    <h5><i class="bi bi-person me-2"></i>Applicant Type</h5>
                </div>

                <div class="row">
                    <div class="col-md-12">
                        <div class="form-group">
                            <label class="form-label">Registration Type <span class="required">*</span></label>
                            <select class="form-select" id="regType" name="regType">
                                @foreach ($userTypes as $userType)
                                <option value="{{ $userType['value'] }}">{{ $userType['label'] }}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                </div>

                <!-- CIN Section -->
                <div id="cinSection">
                    <div class="form-group">
                        <label class="form-label">CIN <span class="required">*</span></label>
                        <div class="input-group cin-inputs">
                            <input type="text" class="form-control" maxlength="1" placeholder="U/L" id="cin1" />
                            <input type="text" class="form-control" maxlength="5" placeholder="12345" id="cin2" />
                            <input type="text" class="form-control" maxlength="2" placeholder="MH" id="cin3" />
                            <input type="text" class="form-control" maxlength="4" placeholder="1234" id="cin4" />
                            <input type="text" class="form-control" maxlength="3" placeholder="ABC" id="cin5" />
                            <input type="text" class="form-control" maxlength="6" placeholder="123456" id="cin6" />
                        </div>
                        <div class="info-note">
                            <strong>Note:</strong> CIN Format is
                            <strong>U 12345 MH 1234 ABC 123456</strong> in sub-blocks.
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="form-label">Confirm CIN <span class="required">*</span></label>
                        <div class="input-group cin-inputs">
                            <input type="text" class="form-control" maxlength="1" placeholder="U/L" id="cin1_c" />
                            <input type="text" class="form-control" maxlength="5" placeholder="12345" id="cin2_c" />
                            <input type="text" class="form-control" maxlength="2" placeholder="MH" id="cin3_c" />
                            <input type="text" class="form-control" maxlength="4" placeholder="1234" id="cin4_c" />
                            <input type="text" class="form-control" maxlength="3" placeholder="ABC" id="cin5_c" />
                            <input type="text" class="form-control" maxlength="6" placeholder="123456" id="cin6_c" />
                        </div>
                    </div>

                    <!-- CIN Validation -->
                    <div class="captcha-container">
                        <label class="form-label">Enter Captcha before CIN Validation</label>
                        <div class="row align-items-center">
                            <div class="col-md-4">
                                <input type="text" class="form-control" placeholder="Enter Captcha" id="cinCaptcha" />
                            </div>
                            <div class="col-md-4">
                                <img src="https://placehold.co/80x30/png?text=FAkdu" alt="Captcha Image" class="captcha-image" width="150" height="40" />
                                <button type="button" class="btn btn-sm btn-outline-primary ms-2">
                                    <i class="bi bi-arrow-repeat"></i>
                                </button>
                            </div>
                            <div class="col-md-4">
                                <button type="button" class="btn btn-primary">
                                    Validate CIN
                                </button>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Company Information -->
                <div class="section-header">
                    <h5><i class="bi bi-buildings me-2"></i>Company Information</h5>
                </div>

                <div class="row">
                    <div class="col-md-8">
                        <div class="form-group">
                            <label class="form-label">Company Name <span class="required">*</span></label>
                            <input type="text" class="form-control" placeholder="Name of Company" id="companyName"
                                maxlength="100" />
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="form-group">
                            <label class="form-label">Date of Incorporation
                                <span class="required">*</span></label>
                            <input type="date" class="form-control" id="incorporationDate" />
                        </div>
                    </div>
                </div>

                <div class="row">
                    <div class="col-md-4">
                        <div class="form-group">
                            <label class="form-label">PAN <span class="required">*</span></label>
                            <input type="text" class="form-control" placeholder="PAN Number" id="pan" maxlength="10" />
                        </div>
                    </div>

                    <div class="col-md-8">
                        <div class="form-group" id="ministryField" style="display:none;">
                            <label class="form-label">Ministry/State Govt. <span class="required">*</span></label>
                            <select class="form-select" id="ministry" name="ministry">
                                @foreach ($userTypes as $userType)
                                <option value="{{ $userType['value'] }}">{{ $userType['label'] }}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                </div>

                <!-- Address Information -->
                <div class="section-header">
                    <h5>
                        <i class="bi bi-geo-alt me-2"></i>Complete Postal
                        Address
                    </h5>
                </div>

                <!-- Corporate Office -->
                <h6 class="text-primary mb-3">
                    <i class="bi bi-buildings me-2"></i>Corporate Office
                    <span class="required">*</span>
                </h6>

                <div class="row">
                    <div class="col-md-8">
                        <div class="form-group">
                            <label class="form-label">Address</label>
                            <input type="text" class="form-control" placeholder="Complete Address" id="corpAddress"
                                maxlength="200" />
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="form-group">
                            <label class="form-label">Pincode</label>
                            <input type="text" class="form-control" placeholder="Pincode" id="corpPincode"
                                maxlength="6" />
                        </div>
                    </div>
                </div>

                <div class="row">
                    <div class="col-md-6">
                        <div class="form-group">
                            <label class="form-label">District</label>
                            <select class="form-select" id="corpDistrict">
                                <option value="">Select District</option>
                            </select>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="form-group">
                            <label class="form-label">State</label>
                            <select class="form-select" id="corpState">
                                <option value="">Select State</option>
                            </select>
                        </div>
                    </div>
                </div>

                <div class="row">
                    <div class="col-md-4">
                        <div class="form-group">
                            <label class="form-label">Landline Number</label>
                            <input type="text" class="form-control" placeholder="01112345678" id="corpLandline"
                                maxlength="11" />
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="form-group">
                            <label class="form-label">Fax Number</label>
                            <input type="text" class="form-control" placeholder="01112345678" id="corpFax"
                                maxlength="11" />
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="form-group">
                            <label class="form-label">E-mail</label>
                            <input type="email" class="form-control" placeholder="company@example.com" id="corpEmail" />
                        </div>
                    </div>
                </div>

                <!-- Registered Office -->
                <h6 class="text-primary mb-3 mt-4">
                    <i class="bi bi-house-door me-2"></i>Registered Office
                    <span class="required">*</span>
                </h6>

                <div class="address-toggle">
                    <div class="form-check">
                        <input class="form-check-input" type="checkbox" id="sameAsCorpAddress" />
                        <label class="form-check-label" for="sameAsCorpAddress">
                            Address same as Corporate Office
                        </label>
                    </div>
                </div>

                <div id="regOfficeDetails">
                    <div class="row">
                        <div class="col-md-8">
                            <div class="form-group">
                                <label class="form-label">Address</label>
                                <input type="text" class="form-control" placeholder="Complete Address" id="regAddress"
                                    maxlength="200" />
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="form-group">
                                <label class="form-label">Pincode</label>
                                <input type="text" class="form-control" placeholder="Pincode" id="regPincode"
                                    maxlength="6" />
                            </div>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group">
                                <label class="form-label">District</label>
                                <select class="form-select" id="regDistrict">
                                    <option value="">Select District</option>
                                </select>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label class="form-label">State</label>
                                <select class="form-select" id="regState">
                                    <option value="">Select State</option>
                                </select>
                            </div>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-md-4">
                            <div class="form-group">
                                <label class="form-label">Landline Number</label>
                                <input type="text" class="form-control" placeholder="01112345678" id="regLandline"
                                    maxlength="11" />
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="form-group">
                                <label class="form-label">Fax Number</label>
                                <input type="text" class="form-control" placeholder="01112345678" id="regFax"
                                    maxlength="11" />
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="form-group">
                                <label class="form-label">E-mail</label>
                                <input type="email" class="form-control" placeholder="reg@example.com" id="regEmail" />
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Correspondence Address -->
                <h6 class="text-primary mb-3 mt-4">
                    <i class="bi bi-envelope me-2"></i>Address for Correspondence
                    <span class="required">*</span>
                </h6>

                <div class="address-toggle">
                    <div class="form-check">
                        <input class="form-check-input" type="checkbox" id="sameAsRegAddress" />
                        <label class="form-check-label" for="sameAsRegAddress">
                            Address same as Registered Office
                        </label>
                    </div>
                </div>

                <div id="corrDetails">
                    <div class="row">
                        <div class="col-md-8">
                            <div class="form-group">
                                <label class="form-label">Address</label>
                                <input type="text" class="form-control" placeholder="Complete Address" id="corrAddress"
                                    maxlength="200" />
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="form-group">
                                <label class="form-label">Pincode</label>
                                <input type="text" class="form-control" placeholder="Pincode" id="corrPincode"
                                    maxlength="6" />
                            </div>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group">
                                <label class="form-label">District</label>
                                <select class="form-select" id="corrDistrict">
                                    <option value="">Select District</option>
                                </select>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label class="form-label">State</label>
                                <select class="form-select" id="corrState">
                                    <option value="">Select State</option>
                                </select>
                            </div>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group">
                                <label class="form-label">Landline Number</label>
                                <input type="text" class="form-control" placeholder="01112345678" id="corrLandline"
                                    maxlength="11" />
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label class="form-label">Mobile Number <span class="required">*</span></label>
                                <input type="text" class="form-control" placeholder="Mobile Number" id="corrMobile"
                                    maxlength="10" />
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Authorised Contact Person -->
                <div class="section-header">
                    <h5>
                        <i class="bi bi-person-badge me-2"></i>Authorised Contact
                        Person/Signatory Details
                    </h5>
                </div>

                <div class="row">
                    <div class="col-md-6">
                        <div class="form-group">
                            <label class="form-label">Name <span class="required">*</span></label>
                            <input type="text" class="form-control" placeholder="Full Name" id="authName"
                                maxlength="200" />
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="form-group">
                            <label class="form-label">Designation</label>
                            <input type="text" class="form-control" placeholder="Designation" id="authDesignation"
                                maxlength="200" />
                        </div>
                    </div>
                </div>

                <div class="row">
                    <div class="col-md-8">
                        <div class="form-group">
                            <label class="form-label">Address</label>
                            <input type="text" class="form-control" placeholder="Complete Address" id="authAddress"
                                maxlength="200" />
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="form-group">
                            <label class="form-label">Pincode</label>
                            <input type="text" class="form-control" placeholder="Pincode" id="authPincode"
                                maxlength="6" />
                        </div>
                    </div>
                </div>

                <div class="row">
                    <div class="col-md-6">
                        <div class="form-group">
                            <label class="form-label">District</label>
                            <select class="form-select" id="authDistrict">
                                <option value="">Select District</option>
                            </select>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="form-group">
                            <label class="form-label">State</label>
                            <select class="form-select" id="authState">
                                <option value="">Select State</option>
                            </select>
                        </div>
                    </div>
                </div>

                <div class="row">
                    <div class="col-md-4">
                        <div class="form-group">
                            <label class="form-label">Landline Number</label>
                            <input type="text" class="form-control" placeholder="01112345678" id="authLandline"
                                maxlength="11" />
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="form-group">
                            <label class="form-label">E-Mail <span class="required">*</span></label>
                            <input type="email" class="form-control" placeholder="email@example.com" id="authEmail"
                                maxlength="100" />
                            <small class="text-muted">OTP will be sent on this email ID</small>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="form-group">
                            <label class="form-label">Mobile Number <span class="required">*</span></label>
                            <input type="text" class="form-control" placeholder="Mobile Number" id="authMobile"
                                maxlength="10" />
                            <small class="text-muted">OTP will be sent on this mobile number</small>
                        </div>
                    </div>
                </div>

                <!-- OTP Authentication Section -->
                <div class="section-header">
                    <h5><i class="bi bi-shield-lock me-2"></i>OTP Authentication</h5>
                </div>

                <div class="captcha-container mb-4">
                    <label class="form-label">Enter Captcha before OTP Authentication</label>
                    <div class="row align-items-center">
                        <div class="col-md-4">
                            <input type="text" class="form-control" placeholder="Enter Captcha" id="otpCaptcha" />
                        </div>
                        <div class="col-md-4">
                            <img src="https://placehold.co/80x30/png?text=FAkdu" alt="Captcha Image"
                                class="captcha-image" width="150" height="40" />
                            <button type="button" class="btn btn-sm btn-outline-primary ms-2">
                                <i class="bi bi-arrow-repeat"></i>
                            </button>
                        </div>
                    </div>
                </div>

                <div class="otp-section">
                    <p class="text-info mb-3">
                        <i class="bi bi-info-circle me-2"></i>Note: After getting OTP,
                        validate OTP through validate button.
                    </p>

                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group">
                                <label class="form-label">Mobile OTP</label>
                                <div class="input-group">
                                    <input type="text" class="form-control" placeholder="Enter OTP" id="mobileOTP"
                                        maxlength="4" />
                                    <button type="button" class="btn btn-outline-primary">
                                        Generate OTP
                                    </button>
                                    <button type="button" class="btn btn-primary">
                                        Validate
                                    </button>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6"></div>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection

@push('styles')
<style>
    :root {
        --primary-color: #337ab7;
        --secondary-color: #6c757d;
        --success-color: #28a745;
        --danger-color: #dc3545;
        --warning-color: #ffc107;
    }

    .registration-container {
        max-width: 1000px;
        margin: 0 auto;
        background: white;
        border-radius: 15px;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
        overflow: hidden;
    }

    .form-header {
        background: linear-gradient(135deg,
                var(--primary-color) 0%,
                #2c5d94 100%);
        color: white;
        padding: 30px;
        text-align: center;
    }

    .form-header h2 {
        margin: 0;
        font-weight: 300;
        font-size: 2.2rem;
    }

    .form-body {
        padding: 40px;
    }

    .section-header {
        background: linear-gradient(90deg, var(--primary-color), transparent);
        color: white;
        padding: 15px 20px;
        margin: 30px -40px 25px -40px;
        border-radius: 0;
        position: relative;
    }

    .section-header:first-of-type {
        margin-top: 0;
    }

    .section-header h5 {
        margin: 0;
        font-weight: 500;
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .form-group {
        margin-bottom: 25px;
    }

    .form-label {
        font-weight: 600;
        color: #495057;
        margin-bottom: 8px;
        display: flex;
        align-items: center;
        gap: 5px;
    }

    .required {
        color: var(--danger-color);
        font-weight: bold;
    }

    .form-control,
    .form-select {
        border: 2px solid #e9ecef;
        border-radius: 8px;
        padding: 12px 15px;
        font-size: 14px;
        transition: all 0.3s ease;
    }

    .form-control:focus,
    .form-select:focus {
        border-color: var(--primary-color);
        box-shadow: 0 0 0 0.2rem rgba(51, 122, 183, 0.25);
    }

    .input-group {
        gap: 10px;
    }

    .cin-inputs .form-control {
        text-align: center;
        /* font-weight: bold; */
    }

    .info-note {
        background: #f8f9fa;
        border: 1px solid #dee2e6;
        border-radius: 8px;
        padding: 12px 15px;
        margin-top: 10px;
        font-size: 13px;
        color: #6c757d;
    }

    .info-note strong {
        color: var(--warning-color);
    }

    .btn {
        border-radius: 8px;
        padding: 12px 25px;
        font-weight: 500;
        transition: all 0.3s ease;
        border: none;
    }

    .btn-primary {
        background: linear-gradient(135deg,
                var(--primary-color) 0%,
                #2c5d94 100%);
    }

    .btn-primary:hover {
        transform: translateY(-2px);
        box-shadow: 0 5px 15px rgba(51, 122, 183, 0.4);
    }

    .btn-outline-primary {
        border: 2px solid var(--primary-color);
        color: var(--primary-color);
    }

    .btn-outline-primary:hover {
        background: var(--primary-color);
        transform: translateY(-2px);
    }

    .captcha-container {
        background: #f8f9fa;
        border-radius: 8px;
        padding: 20px;
        margin: 20px 0;
        border: 1px dashed #dee2e6;
    }

    .captcha-image {
        border: 1px solid #dee2e6;
        border-radius: 4px;
    }

    .address-toggle {
        background: #e3f2fd;
        padding: 15px;
        border-radius: 8px;
        margin-bottom: 20px;
    }

    .form-check-input:checked {
        background-color: var(--primary-color);
        border-color: var(--primary-color);
    }

    .otp-section {
        background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
        border-radius: 10px;
        padding: 25px;
        margin: 25px 0;
    }

    .submit-section {
        background: #f8f9fa;
        margin: 30px -40px 0 -40px;
        padding: 30px 40px;
        border-top: 1px solid #dee2e6;
    }

    .hidden-section {
        display: none;
    }

    .fade-in {
        animation: fadeIn 0.5s ease-in;
    }

    @keyframes fadeIn {
        from {
            opacity: 0;
            transform: translateY(10px);
        }

        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    .error-message {
        color: var(--danger-color);
        font-size: 12px;
        margin-top: 5px;
    }

    .success-message {
        color: var(--success-color);
        font-size: 12px;
        margin-top: 5px;
    }

    @media (max-width: 768px) {
        .form-body {
            padding: 20px;
        }

        .section-header {
            margin-left: -20px;
            margin-right: -20px;
        }

        .submit-section {
            margin-left: -20px;
            margin-right: -20px;
            padding: 20px;
        }

        .input-group {
            flex-direction: column;
        }

        .cin-inputs {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 10px;
        }
    }
</style>
@endpush