@extends('layouts.main')

@section('main-container')
<div class="page-header d-print-none">
    <div class="container-xl">
        <div class="row g-2 align-items-center">
            <div class="col">
                <h2 class="page-title">Register New User</h2>
            </div>
            <div class="col-auto ms-auto d-print-none">
                <div class="btn-list">
                    <a href="{{ url('/admin/users') }}" class="btn btn-primary btn-5 d-none d-sm-inline-block">
                    
                        Report
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="page-body">
    <div class="container-xl">

            @if(session('success'))
                <div class="alert alert-success alert-dismissible fade show mt-3" 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 mt-3" 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('admin.register.store') }}">
            @csrf
            <div class="card shadow-sm mt-4">
                <div class="card-header bg-primary text-white">
                    <h4 class="mb-0">User Registration</h4>
                </div>

                <div class="card-body bg-white">

                    {{-- Full Name --}}
                    <div class="mb-3 row">
                        <label class="col-md-3 col-form-label required text-md-end">Full Name:</label>
                        <div class="col-md-9">
                            <input type="text" name="name" class="form-control" value="{{ old('name') }}" required>
                            @error('name') <small class="text-danger">{{ $message }}</small> @enderror
                        </div>
                    </div>

                    {{-- Mobile --}}
                    <div class="mb-3 row">
                        <label class="col-md-3 col-form-label required text-md-end">Mobile Number:</label>
                        <div class="col-md-9">
                            <input type="text" name="mobile" class="form-control" value="{{ old('mobile') }}" required>
                            @error('mobile') <small class="text-danger">{{ $message }}</small> @enderror
                        </div>
                    </div>

                    {{-- Email --}}
                    <div class="mb-3 row">
                        <label class="col-md-3 col-form-label required text-md-end">Email Address:</label>
                        <div class="col-md-9">
                            <input type="email" name="email" class="form-control" value="{{ old('email') }}" required>
                            @error('email') <small class="text-danger">{{ $message }}</small> @enderror
                        </div>
                    </div>

                    {{-- Unit --}}
                    <div class="mb-3 row">
                        <label class="col-md-3 col-form-label required text-md-end">Unit:</label>
                        <div class="col-md-9">
                            <select name="unit_id" class="form-select" required>
                                <option value="" disabled selected>Select Unit</option>
                                @foreach ($units as $unit)
                                    <option value="{{ $unit->id }}" {{ old('unit_id') == $unit->id ? 'selected' : '' }}>
                                        {{ $unit->name }}
                                    </option>
                                @endforeach
                            </select>
                            @error('unit_id') <small class="text-danger">{{ $message }}</small> @enderror
                        </div>
                    </div>

                    {{-- State --}}
                    <div class="mb-3 row">
                        <label class="col-md-3 col-form-label required text-md-end">State:</label>
                        <div class="col-md-9">
                            <select name="state_id" id="state_id" class="form-select" required>
                                <option value="">Select State</option>
                                @foreach ($states as $state)
                                    <option value="{{ $state->id }}" {{ old('state_id') == $state->id ? 'selected' : '' }}>
                                        {{ $state->name }}
                                    </option>
                                @endforeach
                            </select>
                            @error('state_id') <small class="text-danger">{{ $message }}</small> @enderror
                        </div>
                    </div>

                    {{-- District --}}
                    <div class="mb-3 row">
                        <label class="col-md-3 col-form-label required text-md-end">District:</label>
                        <div class="col-md-9">
                            <select name="district_id" id="district_id" class="form-select" required>
                                <option value="">Select District</option>
                            </select>
                            @error('district_id') <small class="text-danger">{{ $message }}</small> @enderror
                        </div>
                    </div>

                    {{-- Role --}}
                    <div class="mb-3 row">
                        <label class="col-md-3 col-form-label required text-md-end">Role:</label>
                        <div class="col-md-9">
                            <select name="role_id" id="role_id" class="form-select" required>
                                @if(Auth::user()->hasRole('Super Admin'))
                                    <option value="2" {{ old('role_id') == 2 ? 'selected' : '' }}>Admin</option>
                                    <option value="3" {{ old('role_id') == 3 ? 'selected' : '' }}>User</option>
                                @else
                                    <option value="3" selected>User</option>
                                @endif
                            </select>
                            @error('role_id') <small class="text-danger">{{ $message }}</small> @enderror
                        </div>
                    </div>

                    {{-- Block --}}
                    <div class="mb-3 row">
                        <label class="col-md-3 col-form-label required text-md-end">Block:</label>
                        <div class="col-md-9">
                            <select name="block_id" id="block_id" class="form-select" required>
                                <option value="">Select Block</option>
                            </select>
                            @error('block_id') <small class="text-danger">{{ $message }}</small> @enderror
                        </div>
                    </div>

                    {{-- Password --}}
                    <div class="mb-3 row">
                        <label class="col-md-3 col-form-label required text-md-end">Password:</label>
                        <div class="col-md-9">
                            <input type="password" name="password" class="form-control" required>
                            @error('password') <small class="text-danger">{{ $message }}</small> @enderror
                        </div>
                    </div>

                    {{-- Confirm Password --}}
                    <div class="mb-4 row">
                        <label class="col-md-3 col-form-label required text-md-end">Confirm Password:</label>
                        <div class="col-md-9">
                            <input type="password" name="password_confirmation" class="form-control" required>
                            @error('password_confirmation') <small class="text-danger">{{ $message }}</small> @enderror
                        </div>
                    </div>

                    {{-- Submit --}}
                    <div class="d-flex justify-content-center align-items-center gap-3">
                        <a href="{{ route('login') }}" class="btn btn-outline-secondary">Already registered?</a>
                        <button type="submit" class="btn btn-success">
                            <i class="ti ti-user-plus me-1"></i> Register
                        </button>
                    </div>                </div>
            </div>
        </form>
    </div>
</div>

{{-- AJAX Scripts --}}
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<script>
    $(document).ready(function() {
        $('#state_id').change(function() {
            var stateId = $(this).val();
            
            if (stateId) {
                $.ajax({
                    url: '/geo/get-districts/' + stateId,
                    type: 'GET',
                    dataType: 'json',
                    success: function(data) {
                        $('#district_id').empty().append('<option value="">--Select District--</option>');
                        $.each(data, function(key, district) {
                            $('#district_id').append('<option value="'+ district.id +'">'+ district.name +'</option>');
                        });
                    },
                    error: function(xhr, status, error) {
                        console.log("AJAX Error:", error);
                    }
                });
            } else {
                $('#district_id').empty().append('<option value="">--Select District--</option>');
            }
        });
    });
</script>

<script>
    $(document).ready(function() {
        $('#district_id').change(function() {
            var districtId = $(this).val();

            if (districtId) {
                $.ajax({
                    url: '/geo/get-blocks/' + districtId,
                    type: 'GET',
                    dataType: 'json',
                    success: function(data) {
                        $('#block_id').empty().append('<option value="">--Select Block--</option>');
                        $.each(data, function(key, block) {
                            $('#block_id').append('<option value="'+ block.id +'">'+ block.name +'</option>');
                        });
                    },
                    error: function(xhr, status, error) {
                        console.error("AJAX Error:", error);
                        alert("Failed to fetch blocks. Please try again.");
                    }
                });
            } else {
                $('#block_id').empty().append('<option value="">--Select Block--</option>');
            }
        });
    });
</script>


@endsection