@extends('layouts.admin')
@section('title', 'Create User')
@section('content')

<div class="row g-3">
    <div class="col-12">
        <div class="card border h-100">
            <div class="card-header border-bottom bg-body" style="max-height: 10% !important;">
                <div class="row g-3">
                    <div class="col-md-8">
                        <h5 class="mb-2 text-body-emphasis">Create New State User</h5>

                    </div>
                    <div class="col-md-4 d-flex justify-content-end">
                        <a href="{{ route('admin.users.all_states') }}" class="btn btn-phoenix-secondary">
                            <span class="fas fa-arrow-left me-2"></span>Back to Users
                        </a>
                    </div>

                </div>

            </div>
             <form id="stateUserForm" enctype="multipart/form-data">
                @csrf
                <div class="card-body" style="max-height: calc(100vh - 280px); overflow-y: auto;">
                    <!-- Error Display Area -->
                    <div id="stateUserFormErrors" class="mt-3"></div>

                    <!-- Success Display Area -->
                    <div id="stateUserFormSuccess" class="mt-3"></div>

                   
                        <div class="row g-3">
                            <!-- Profile Image Upload -->
                            <div class="col-12 mb-4">
                                <div class="d-flex align-items-center justify-content-center gap-4" id="profile_image_div">
                                    <div class="text-center">
                                        <img alt="Profile Picture" src="/img/pp.png" id="profile_image_preview"
                                            class="rounded-circle img-responsive" width="100" height="100"
                                            style="border: 2px solid #ddd;" />
                                    </div>
                                    <div class="text-center">
                                        <div><span class="text-danger"> Profile Picture *</span></div>
                                        <small class="text-body-tertiary">Max file size: 300KB (JPG, PNG)</small>
                                        <div class="text-center mt-2 ">
                                            <input type="file" class="state-required" name="profile_image" id="profile_image"
                                            style="display: none;" accept="image/png, image/jpeg,image/jpg"
                                            onchange="updateFilePreview('profile_image')">
                                        <button type="button" class="btn btn-primary mb-2" id="profile_image_button"
                                            onclick="document.getElementById('profile_image').click();">
                                            <i class="fas fa-upload"></i> Upload 
                                        </button>
                                        
                                       </div>
                                        <span id="error_profile_image" class="invalid-feedback"></span>
                                    </div>
                                </div>
                            </div>

                            <!-- First Name -->
                            <div class="col-md-4">
                                <label for="fname" class="form-label">First Name <span class="text-danger">*</span></label>
                                <input type="text" class="form-control state-required" id="fname" name="fname"
                                    placeholder="Enter First Name">
                                <span id="error_fname" class="invalid-feedback"></span>
                            </div>

                            <!-- Middle Name -->
                            <div class="col-md-4">
                                <label for="mname" class="form-label">Middle Name</label>
                                <input type="text" class="form-control" id="mname" name="mname"
                                    placeholder="Enter Middle Name">
                                <span id="error_mname" class="invalid-feedback"></span>
                            </div>

                            <!-- Last Name -->
                            <div class="col-md-4">
                                <label for="lname" class="form-label">Last Name <span class="text-danger">*</span></label>
                                <input type="text" class="form-control state-required" id="lname" name="lname"
                                    placeholder="Enter Last Name">
                                <span id="error_lname" class="invalid-feedback"></span>
                            </div>

                            <!-- Email -->
                            <div class="col-md-4">
                                <label for="email" class="form-label">Email <span class="text-danger">*</span></label>
                                <input type="email" class="form-control state-required" id="email" name="email"
                                    placeholder="Enter Email Address">
                                <span id="error_email" class="invalid-feedback"></span>
                            </div>

                            <!-- Mobile -->
                            <div class="col-md-4">
                                <label for="mobile" class="form-label">Mobile Number <span
                                        class="text-danger">*</span></label>
                                <input type="text" class="form-control state-required" id="mobile" name="mobile"
                                    placeholder="Enter Mobile Number" maxlength="10" onkeypress="return isNumber(event)">
                                <span id="error_mobile" class="invalid-feedback"></span>
                            </div>

                            <!-- Gender -->
                            <div class="col-md-4">
                                <label for="gender" class="form-label">Gender</label>
                                <select class="form-select" id="gender" name="gender">
                                    <option value="">Select Gender</option>
                                    <option value="1">Male</option>
                                    <option value="2">Female</option>
                                    <option value="3">Other</option>
                                </select>
                                <span id="error_gender" class="invalid-feedback"></span>
                            </div>

                            <!-- Date of Birth -->
                            <div class="col-md-4">
                                <label for="dob" class="form-label">Date of Birth <span class="text-danger">*</span></label>
                                <input type="date" class="form-control state-required" id="dob" name="dob" max="{{ \Carbon\Carbon::now()->subYears(18)->format('Y-m-d') }}">
                                <small class="text-muted d-block">Must be at least 18 years old</small>
                                <span id="error_dob" class="invalid-feedback"></span>
                            </div>

                            <!-- Country -->
                            <div class="col-md-4">
                                <label for="country_id" class="form-label">Country <span
                                        class="text-danger">*</span></label>
                                <select class="form-select state-required" id="country_id" name="country_id">
                                    <option value="">Select Country</option>
                                    @foreach ($countries as $country)
                                    @if ($country->id == 16)
                                    <option value="{{ $country->id }}" selected>{{ $country->name }}</option>
                                    @else
                                    <option value="{{ $country->id }}">{{ $country->name }}</option>
                                    @endif
                                    @endforeach
                                </select>
                                <span id="error_country_id" class="invalid-feedback"></span>
                            </div>

                            <!-- State -->
                            <div class="col-md-4" id="state_dropdown">
                                <label for="state_id" class="form-label">State <span class="text-danger">*</span></label>
                                <select class="form-select state-required" id="state_id" name="state_id"
                                    data-choices="data-choices"
                                    data-options='{"removeItemButton":true,"placeholder":true,"searchEnabled":true}'>
                                    <option value="" readonly>Select State/Union Territory/Departments</option>
                                    <optgroup label="STATES">
                                        @foreach ($states as $state)
                                        @if($state->is_state == 1)
                                        <option value="{{ $state->id }}">{{ $state->name }}</option>
                                        @endif
                                        @endforeach
                                    </optgroup>
                                    <optgroup label="UNION TERRITORY">
                                        @foreach ($states as $state)
                                        @if($state->is_state == 2)
                                        <option value="{{ $state->id }}">{{ $state->name }}</option>
                                        @endif
                                        @endforeach
                                    </optgroup>
                                    <optgroup label="DEPARTMENTS">
                                        @foreach ($states as $state)
                                        @if($state->is_state == 3)
                                        <option value="{{ $state->id }}">{{ $state->name }}</option>
                                        @endif
                                        @endforeach
                                    </optgroup>
                                </select>
                                <span id="error_state_id" class="invalid-feedback"></span>
                            </div>
                            </select>
                            <span id="error_state_id" class="invalid-feedback"></span>
                        </div>

                        <!-- District -->
                        <div class="col-md-4">
                            <label for="district_id" class="form-label">District <span class="text-danger">*</span></label>
                            <select class="form-select state-required" id="district_id" name="district_id"
                                data-choices="data-choices"
                                data-options='{"removeItemButton":true,"placeholder":true,"searchEnabled":true}'>
                                <option value="0" selected>Select District</option>
                            </select>
                            <span id="error_district_id" class="invalid-feedback"></span>
                        </div>

                        <!-- District Name -->
                        <!-- <div class="col-md-4">
                                <label for="district_name" class="form-label">District Name</label>
                                <input type="text" class="form-control" id="district_name" name="district_name" placeholder="Enter District Name">
                                <span id="error_district_name" class="invalid-feedback"></span>
                            </div> -->

                        <!-- City -->
                        <!-- <div class="col-md-4">
                                <label for="city_id" class="form-label">City</label>
                                <select class="form-select" id="city_id" name="city_id" 
                                    data-choices="data-choices" data-options='{"removeItemButton":true,"placeholder":true,"searchEnabled":true}'>
                                    <option value="0" selected>Select City</option>
                                </select>
                                <span id="error_city_id" class="invalid-feedback"></span>
                            </div> -->

                        <!-- City Name -->
                        <!--<div class="col-md-4">
                                <label for="city_name" class="form-label">City Name</label>
                                <input type="text" class="form-control" id="city_name" name="city_name" placeholder="Enter City Name">
                                <span id="error_city_name" class="invalid-feedback"></span>
                            </div> -->

                        <!-- Pincode -->
                        <div class="col-md-4">
                            <label for="pincode" class="form-label">Pincode <span class="text-danger">*</span></label>
                            <input type="text" class="form-control state-required" id="pincode" name="pincode"
                                placeholder="Enter Pincode" maxlength="6" onkeypress="return isNumber(event)">
                            <span id="error_pincode" class="invalid-feedback"></span>
                        </div>

                        <!-- Profile Selection -->
                        <!-- <div class="col-md-4">
                                <label for="profile_id" class="form-label">Profile <span class="text-danger">*</span></label>
                                <select class="form-select state-required" id="profile_id" name="profile_id">
                                    <option value="">Select Profile</option>
                                    @foreach ($profiles as $profile)
                                        <option value="{{ $profile->id }}">{{ $profile->name }}</option>
                                    @endforeach
                                </select>
                                <span id="error_profile_id" class="invalid-feedback"></span>
                            </div> -->

                        <!-- Profile Step (Hidden field) -->
                        <div class="col-md-4" style="display: none;">
                            <input type="hidden" id="profile_step" name="profile_step" value="1">
                        </div>

                        <!-- Address -->
                        <div class="col-md-8">
                            <label for="address" class="form-label">Address <span class="text-danger">*</span></label>
                            <textarea class="form-control state-required" rows="2" id="address" name="address"
                                placeholder="Enter Full Address"></textarea>
                            <span id="error_address" class="invalid-feedback"></span>
                        </div>



                </div>

                <!-- Submit Button (sticky anchored) -->
                <div id="submitButtonsDiv" class="position-sticky" style="bottom:0; z-index:10;">
                    <div class="bg-body pt-3 pb-3 d-flex justify-content-end border-top gap-2">
                        <button type="button" id="submitStateUser" class="btn btn-primary">
                            <span class="btn-text">Create State User</span>
                            <span class="spinner-border spinner-border-sm d-none" role="status" aria-hidden="true"></span>
                        </button>
                        <button type="button" class="btn btn-outline-secondary" id="resetFormBtn">Reset</button>
                    </div>
                </div>
            


            </div>
        </form>
    </div>
</div>
</div>
@endsection

{{-- Scripts loaded after admin layout jQuery --}}
@section('scripts')

<script src="{{ asset('js/pages/admin/manage-state/create_state_user.js')}}?v={{ config('app.asset_version') }}"></script>

@endsection