@extends('layouts.app')

@section('content')
<div class="contents">
    <div class="crm mb-25">
        <div class="container-fluid">
            <div class="row">
                <div class="col-lg-12 d-flex justify-content-end">
                    @include('layouts.navigation')
                </div>

                <div class="col-lg-12">
                    <div class="breadcrumb-main d-flex justify-content-between align-items-center">
                        <h2 class="breadcrumb-title">User List</h2>
                        <button class="btn btn-primary btn-squared" data-bs-toggle="modal" data-bs-target="#modal-user">
                            Add User <i class="fa-solid fa-plus ms-2"></i>
                        </button>
                    </div>
                </div>

                <!-- User Table -->
                <div class="col-xxl-12">
                    <div class="userDatatable global-shadow border-light-0 w-100 adv-table">
                        <div class="table-responsive">
                            <table class="table mb-0 table-borderless table-striped">
                                <thead>
                                    <tr>
                                        <th>S.No.</th>
                                        <th>User Type</th>
                                        <th>State</th>
                                        <th>District</th>
                                        <th>City</th>
                                        <th>UID</th>
                                        <th>User Name</th>
                                        <th>Email</th>
                                        <th class="text-end">Action</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @if($users->count() > 0)
                                        @foreach($users as $key => $user)
                                            <tr>
                                                <td>{{ $key + 1 }}</td>
                                                <td>{{ user_type($user->user_type)}}</td>
                                                <td>{{ $user->state->name ?? "-" }}</td>
                                                <td>{{ $user->district->name ?? "-"}}</td>
                                                <td>{{ $user->city->name ?? "-" }}</td>
                                                <td>{{ $user->uid }}</td>
                                                 <td>{{ $user->name }}</td>
                                                <td>{{ $user->email }}</td>
                                                <td>
                                                    <ul class="orderDatatable_actions mb-0 d-flex flex-wrap justify-content-end">
                                                        @can('update-user')
                                                        <li>
                                                            <a href="javascript:void(0)" class="edit text-success edit-user-btn"
                                                               data-id="{{ $user->id }}"
                                                               data-user_type = "{{$user->user_type}}"
                                                               data-name="{{ $user->name }}"
                                                               data-email="{{ $user->email }}"
                                                               data-institute_type="{{ $user->institute_type ?? '' }}"
                                                               data-education_level="{{ $user->education_level ?? '' }}"
                                                               data-state_id="{{ $user->state_id ?? '' }}"
                                                               data-district_id="{{ $user->district_id ?? '' }}"
                                                               data-city_id="{{ $user->city_id ?? '' }}"
                                                               data-institute_id="{{ $user->institute_id ?? '' }}"
                                                                data-address="{{ $user->address }}"
                                                                 data-pincode="{{ $user->pincode }}"
                                                               title="Edit">
                                                                <i class="fas fa-pen"></i>
                                                            </a>
                                                        </li>
                                                        @endcan

                                                        @can('delete-user')
                                                        <li>
                                                            <a href="{{ url('user/'.$user->id.'/delete') }}"
                                                               class="remove text-danger mx-2" title="Delete">
                                                                <i class="fas fa-trash"></i>
                                                            </a>
                                                        </li>
                                                        @endcan
                                                    </ul>
                                                </td>
                                            </tr>
                                        @endforeach
                                    @else
                                        <tr>
                                            <td colspan="9" class="text-center">Data Not Found</td>
                                        </tr>
                                    @endif
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>

                <!-- User Modal -->
                <div class="modal fade" id="modal-user" tabindex="-1" aria-hidden="true">
                    <div class="modal-dialog modal-xl">
                        <div class="modal-content modal-bg-white">
                            <div class="modal-header">
                                <h3 class="modal-title">Create User</h3>
                                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                            </div>
                            <div class="modal-body">
                                <form id="userForm" class="p-4">
                                    @csrf
                                    <input type="hidden" id="user_id" name="user_id">

                                    <div class="row g-3">

                                        <div class="col-md-4">
                                            <label class="form-label">User Type<span class="text-danger">*</span></label>
                                            <select id="user_type" name="user_type" class="form-control">
                                                <option value="">Select an Option</option>

                                                @if(auth()->user()->user_type == 1)
                                                    {{-- Show all user types --}}
                                                    @foreach(usertype() as $value)
                                                        <option value="{{ $value->id }}">{{ $value->name }}</option>
                                                    @endforeach
                                                @elseif(auth()->user()->user_type == 5)
                                                    {{-- Show only Student (3) and Teacher/Staff (2) --}}
                                                    @foreach(usertype()->whereIn('id', [2,3]) as $value)
                                                        <option value="{{ $value->id }}">{{ $value->name }}</option>
                                                    @endforeach

                                                @elseif(auth()->user()->user_type == 2)
                                                    {{-- Show only Student (3) and Teacher/Staff (2) --}}
                                                    @foreach(usertype()->whereIn('id', [3]) as $value)
                                                        <option value="{{ $value->id }}">{{ $value->name }}</option>
                                                    @endforeach
                                                @endif
                                            </select>
                                        </div>

                                         <div class="col-md-4">
                                            <label class="form-label">Name <span class="text-danger">*</span></label>
                                            <input type="text" id="name" name="name" class="form-control" placeholder="Enter Name">
                                        </div>

                                        <div class="col-md-4">
                                            <label class="form-label">Mobile Number<span class="text-danger">*</span></label>
                                            <input type="text" id="mobile_number" name="mobile_number" class="form-control" placeholder="Enter Mobile Number">
                                        </div>

                                        <div class="col-md-4">
                                            <label class="form-label">Email <span class="text-danger">*</span></label>
                                            <input type="email" id="email" name="email" class="form-control" placeholder="Enter Email">
                                        </div>

                                            <div class="col-md-4">
                                                <label class="form-label">Date of Birth <span class="text-danger">*</span></label>
                                                <input type="date" id="dob" name="dob" class="form-control">
                                            </div>

                                        <div class="row g-3 staff-fields" style="display:none;"> 
                                            <div class="col-md-4">
                                                <label class="form-label">Staff<span class="text-danger">*</span></label>
                                                <select name="profile_type" id="profile_type" class="form-control">
                                                    <option>Select an Staff Type</option>
                                                    @foreach(category_data(16) as $value)
                                                        <option value="{{$value->id}}">{{$value->name}}</option>
                                                    @endforeach
                                                </select>
                                            </div>

                                            <div class="col-md-4">
                                                <label class="form-label">Designation<span class="text-danger">*</span></label>
                                                <select name="designation" id="designation" class="form-control">
                                                    <option>Select Designation</option>
                                                    @foreach(category_data(17) as $value)
                                                        <option value="{{$value->id}}">{{$value->name}}</option>
                                                    @endforeach
                                                </select>
                                            </div>

                                            <div class="col-md-4">
                                                <label class="form-label">Area of Teaching<span class="text-danger">*</span></label>
                                                <select name="department_id" id="department_id" class="form-control">
                                                    <option>Select an Area of Teaching</option>
                                                    @foreach(category_data(14) as $value)
                                                        <option value="{{$value->id}}">{{$value->name}}</option>
                                                    @endforeach
                                                </select>
                                            </div>

                                      


                                            <div class="col-md-4">
                                                <label class="form-label">Assigned Class<span class="text-danger">*</span></label>
                                                <select name="assigned_class_id" class="form-control">
                                                    <option>Select an Assigned Class</option>
                                                    @foreach(schoolclass() as $value)
                                                        <option value="{{$value->id}}">{{$value->name}}</option>
                                                    @endforeach
                                                </select>
                                            </div>

                                            <div class="col-md-4">
                                                <label class="form-label">Status of Staff<span class="text-danger">*</span></label>
                                                <select name="status" class="form-control">
                                                    <option value="">Select Status</option>
                                                    <option value="1">Active</option>
                                                    <option value="2">Inactive</option>
                                                </select>
                                            </div>
                                        </div>
                                        <div class="row g-3 student-fields" style="display:none;">
                                            <div class="col-md-4">
                                                <label class="form-label">Class<span class="text-danger">*</span></label>
                                                <select name="class_id" class="form-control">
                                                    <option>Select an Class</option>
                                                    @foreach(teacherclass() as $value)
                                                        <option value="{{$value->id}}">{{$value->name}}</option>
                                                    @endforeach
                                                </select>
                                            </div>
                                            <div class="col-md-4">
                                                <label class="form-label">Section<span class="text-danger">*</span></label>
                                                <select name="section_id" class="form-control">
                                                    <option>Select an Section</option>
                                                    @foreach(teachersection() as $value)
                                                        <option value="{{$value->id}}">{{$value->name}}</option>
                                                    @endforeach
                                                </select>
                                            </div>
                                              <!-- Parent Info -->
                                            <div class="col-12 mt-3">
                                                <h5>Parent Information</h5>
                                            </div>

                                            <div class="col-md-6">
                                                <label class="form-label">Mother’s Name</label>
                                                <input type="text" name="parents[0][name]" class="form-control">
                                                <input type="hidden" name="parents[0][relation]" value="mother">
                                            </div>

                                            <div class="col-md-6">
                                                <label class="form-label">Mother’s Email</label>
                                                <input type="email" name="parents[0][email]" class="form-control">
                                            </div>

                                            <div class="col-md-6">
                                                <label class="form-label">Mother’s Mobile</label>
                                                <input type="text" name="parents[0][mobile]" class="form-control">
                                            </div>

                                            <div class="col-md-6">
                                                <label class="form-label">Occupation</label>
                                                <select name="parents[0][occupation]" class="form-control">
                                                        <option>Select an option</option>
                                                        @foreach(category_data(3) as $value)
                                                            <option value="{{$value->id}}">{{$value->name}}</option>
                                                        @endforeach
                                                </select>
                                            </div>

                                            <div class="col-md-6">
                                                <label class="form-label">Father’s Name</label>
                                                <input type="text" name="parents[1][name]" class="form-control">
                                                <input type="hidden" name="parents[1][relation]" value="father">
                                            </div>

                                            <div class="col-md-6">
                                                <label class="form-label">Father’s Email</label>
                                                <input type="email" name="parents[1][email]" class="form-control">
                                            </div>

                                            <div class="col-md-6">
                                                <label class="form-label">Father’s Mobile</label>
                                                <input type="text" name="parents[1][mobile]" class="form-control">
                                            </div>
                                            <div class="col-md-6">
                                                <label class="form-label">Occupation</label>
                                                <select name="parents[1][occupation]" class="form-control">
                                                        <option>Select an option</option>
                                                        @foreach(category_data(3) as $value)
                                                            <option value="{{$value->id}}">{{$value->name}}</option>
                                                        @endforeach
                                                </select>
                                            </div>

                                        </div>
                                        <div class="row g-3 institute-fields" style="display:none;"> 
                                            <div class="col-md-4">
                                                <label class="form-label">Academies / Institutions <span class="text-danger">*</span></label>
                                                <select id="institute_type" name="institute_type" class="form-control">
                                                    <option value="">Select an Option</option>
                                                    <option value="1">Private</option>
                                                    <option value="2">Government</option>
                                                </select>
                                            </div>
                                             <div class="col-md-4">
                                                <label class="form-label">Academies code <span class="text-danger">*</span></label>
                                           <input type="text" name="academic_code" placeholder="Academic code">
                                            </div>

                                            <div class="col-md-4">
                                                <label class="form-label">Education Level <span class="text-danger">*</span></label>
                                                <select id="education_level" name="education_level" class="form-control">
                                                    <option value="">Select an Option</option>
                                                    @foreach(category_data(9) as $value)
                                                        <option value="{{ $value->id }}">{{ $value->name }}</option>
                                                    @endforeach
                                                </select>
                                            </div>

                                            <div class="col-md-4">
                                                <label class="form-label">State <span class="text-danger">*</span></label>
                                                <select id="state_id" name="state_id" class="form-control state_here">
                                                    <option value="">Select State</option>
                                                    @foreach(state() as $value)
                                                        <option value="{{ $value->id }}">{{ $value->name }}</option>
                                                    @endforeach
                                                </select>
                                            </div>

                                            <div class="col-md-4">
                                                <label class="form-label">District <span class="text-danger">*</span></label>
                                                <select id="district_id" class="form-control district_here" name="district_id">
                                                    <option value="">Select District</option>
                                                </select>
                                            </div>

                                            <div class="col-md-4">
                                                <label class="form-label">City <span class="text-danger">*</span></label>
                                                <select id="city_id" class="form-control city_here" name="city_id">
                                                    <option value="">Select City</option>
                                                </select>
                                            </div>


                                            <!-- Address -->
                                            <div class="col-md-8">
                                                <label class="form-label">Address <span class="text-danger">*</span></label>
                                                <textarea id="address" name="address" class="form-control" rows="2"></textarea>
                                            </div>
                                            <div class="col-md-4">
                                                <label class="form-label">Pincode <span class="text-danger">*</span></label>
                                                <input type="text" id="pincode" name="pincode" class="form-control">
                                            </div>
                                        </div>


                                        <div class="col-md-4 password-fields">
                                            <label class="form-label">Password <span class="text-danger">*</span></label>
                                            <input type="password" id="password" name="password" class="form-control" placeholder="Enter Password">
                                        </div>
                                        <div class="col-md-4 password-fields">
                                            <label class="form-label">Confirm Password <span class="text-danger">*</span></label>
                                            <input type="password" id="password_confirmation" name="password_confirmation" class="form-control" placeholder="Confirm Password">
                                        </div>                                      

                                        <div class="col-md-12 text-center mt-3">
                                            <button type="submit" id="userSubmit" class="btn btn-primary w-100 shadow">Save</button>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>
</div>

<!-- Scripts -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js"></script>

<script>
$(document).ready(function(){
    $.ajaxSetup({ headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') } });

    $('[data-bs-target="#modal-user"]').on('click', function () {
        $('#modal-user .modal-title').text('Create User');
        $('#userForm')[0].reset();
        $('#user_id').val('');
        $('#userSubmit').text('Save');
        
        // Show password fields
        $('.password-fields').show();
    });

    $(document).on('click', '.edit-user-btn', function(){
        const user = $(this).data();
        $('#modal-user .modal-title').text('Edit User');
        $('#user_id').val(user.id);
        $('#name').val(user.name);
        $('#email').val(user.email);
        $('#institute_type').val(user.institute_type);
        $('#education_level').val(user.education_level);
        $('#address').val(user.address);
        $('#pincode').val(user.pincode);
        $('#user_type').val(user.user_type);
        $('#state_id').val(user.state_id).trigger('change');

        setTimeout(function(){
            $('#district_id').val(user.district_id).trigger('change');
            setTimeout(function(){
                $('#city_id').val(user.city_id).trigger('change');
                setTimeout(function(){
                    $('#institute_id').val(user.institute_id);
                },300);
            },300);
        },300);

        $('#userSubmit').text('Update');

        $('.password-fields').hide();

        $('#modal-user').modal('show');
    });
    $('#user_type').on('change', function(){
        if($(this).val() == '2'){
            $('.staff-fields').show();
            $('.institute-fields').hide();
            $('.student-fields').hide();
        }else if($(this).val() == '3'){
            $('.staff-fields').hide();
            $('.institute-fields').hide();
            $('.student-fields').show();
        }else if($(this).val() == '5'){
            $('.staff-fields').hide();
            $('.institute-fields').show();
            $('.student-fields').hide();
        } else {
            $('.staff-fields').hide();
            $('.institute-fields').hide();
            $('.student-fields').hide();
        }
    });

    // Submit form
    $('#userForm').on('submit', function(e){
        e.preventDefault();

        let id = $('#user_id').val(); 
        let user_type = $('#user_type').val();

        if(!user_type){
            toastr.error('User Type is required!');
            return;
        }

        // Common fields
        let name = $('#name').val()?.trim();
        let email = $('#email').val()?.trim();
        if(!name){
            toastr.error('Name is required!');
            return;
        }
        if(!email){
            toastr.error('Email is required!');
            return;
        }

        // Validation for Staff (user_type = 2)
        if(user_type == '2'){
            if(!$('#profile_type').val()){
                toastr.error('Staff Type is required!');
                return;
            }
            if(!$('#designation').val()){
                toastr.error('Designation is required!');
                return;
            }
            if(!$('#department_id').val()){
                toastr.error('Department is required!');
                return;
            }
            if(!$('#mobile_number').val()){
                toastr.error('Mobile Number is required!');
                return;
            }
            if(!$('#dob').val()){
                toastr.error('Date of Birth is required!');
                return;
            }
            if(!$('[name="class_id"]').val()){
                toastr.error('Assigned Class is required!');
                return;
            }
            if(!$('[name="status"]').val()){
                toastr.error('Status of Staff is required!');
                return;
            }
        }
        if(user_type == '3'){
            if(!$('[name="class_id"]').val()){
                toastr.error('Class is required!');
                return;
            }
            if(!$('[name="section_id"]').val()){
                toastr.error('Section is required!');
                return;
            }
            if(!$('#dob').val()){
                toastr.error('Date of Birth is required!');
                return;
            }
            // you can also add checks for parents fields if mandatory
        }

        // Validation for Institute (user_type = 5)
        if(user_type == '5'){
            let institute_type = $('#institute_type').val();
            let education_level = $('#education_level').val();
            let state_id = $('#state_id').val();
            let district_id = $('#district_id').val();
            let city_id = $('#city_id').val();
            let address = $('#address').val()?.trim();
            let pincode = $('#pincode').val()?.trim();

            if(!institute_type){
                toastr.error('Please select Academies/Institutions!');
                return;
            }
            if(!education_level){
                toastr.error('Please select Education Level!');
                return;
            }
            if(!state_id){
                toastr.error('Please select State!');
                return;
            }
            if(!district_id){
                toastr.error('Please select District!');
                return;
            }
            if(!city_id){
                toastr.error('Please select City!');
                return;
            }
            if(!address){
                toastr.error('Address is required!');
                return;
            }
            if(!pincode){
                toastr.error('Pincode is required!');
                return;
            }
        }

        // Prepare AJAX
        const url = id ? `users/${id}` : 'users';
        let formData = new FormData(this);
        if(id) formData.append('_method','PUT');

        $.ajax({
            url: url,
            method: 'POST',
            data: formData,
            processData:false,
            contentType:false,
            success:function(){
                $('#modal-user').modal('hide');
                Swal.fire({
                    icon:'success',
                    title:'Success',
                    text:id?'User updated successfully':'User created successfully',
                    timer:2000,
                    showConfirmButton:false
                }).then(()=>location.reload());
            },
            error:function(xhr){
                Swal.fire({
                    icon:'error',
                    title:'Error',
                    text:xhr.responseJSON?.message || 'Something went wrong!'
                });
            }
        });
    });




    // Fetch dependent dropdowns
    function fetchInstitutes(){
        let type = $("#institute_type").val();
        let education = $("#education_level").val();
        let state = $("#state_id").val();
        let district = $("#district_id").val();
        let city = $("#city_id").val();

        if(type && education && state && district && city){
            $.get("{{ url('get-institutes') }}", {type,education,state,district,city}, function(res){
                $("#institute_id").empty().append('<option value="">Select Institute</option>');
                $.each(res,function(k,v){ $("#institute_id").append(`<option value="${v.id}">${v.name}</option>`); });
            });
        }
    }

    $("#institute_type, #education_level, #state_id, #district_id, #city_id").on('change', fetchInstitutes);

    // State → District
    $('.state_here').change(function(){
        var state_id = $(this).val();
        $.post("{{ route('district.store') }}",{value:state_id,get_district:0},function(data){
            let html = '<option value="">Select District</option>';
            $.each(data,function(k,v){ html += `<option value="${v.id}">${v.name}</option>`; });
            $('.district_here').html(html);
            $('.city_here').html('<option value="">Select City</option>');
        });
    });

    // District → City
    $('.district_here').change(function(){
        var district_id = $(this).val();
        $.post("{{ route('district.store') }}",{value:district_id,get_city:0},function(data){
            let html = '<option value="">Select City</option>';
            $.each(data,function(k,v){ html += `<option value="${v.id}">${v.name}</option>`; });
            $('.city_here').html(html);
        });
    });
});
</script>
@endsection