@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">Academies/Institutions List</h2>
                        <button class="btn btn-primary btn-squared" data-bs-toggle="modal" data-bs-target="#modal-basic">
                            Add Academies/Institutions <i class="fa-solid fa-plus ms-2"></i>
                        </button>
                    </div>
                </div>

                <div class="col-xxl-12">
                    <div class="userDatatable  global-shadow border-light-0 w-100 adv-table">
                        <div class="table-responsive">
                            <div id="filter-form-container"></div>
                            <table class="table mb-0 table-borderless  table-striped" data-sorting="true"
                                data-filter-container="#filter-form-container" data-paging-current="1"
                                data-paging-position="right" data-paging-size="10">
                                <thead>
                                    <tr class="userDatatable-header">
                                        <th>S.No.</th>
                                        <th>UID</th>
                                        <th>Private/Government</th>
                                        <th>Education Level</th>
                                        <th>State</th>
                                        <th>District</th>
                                        <th>City</th>
                                        <th>Institution Code</th>
                                        <th>Institution Name</th>
                                        <th>Status</th>
                                        <th class="text-end">Action</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach($data as $key => $academy)
                                    <tr>
                                        <td>{{ $key + 1 }}</td>
                                         <td>{{ $academy->uid ?? "-" }}</td>
                                        <td>{{ $academy->type == 1 ? "Private" : "Government" }}</td>
                                        <td>{{ $academy->education->name }}</td>
                                        <td>{{ $academy->state->name }}</td>
                                        <td>{{ $academy->district->name }}</td>
                                        <td>{{ $academy->city->name }}</td>
                                        <td>{{ $academy->academic_code }}</td>
                                        <td>{{ $academy->name }}</td>
                                        <td>
                                            <button class="btn btn-sm toggle-status-btn {{ $academy->status == 1 ? 'btn-success' : 'btn-danger' }}"
                                                    data-id="{{ $academy->id }}">
                                                {{ $academy->status == 1 ? 'Active' : 'Inactive' }}
                                            </button>
                                        </td>
                                        <td class="text-end">
                                            <ul class="orderDatatable_actions mb-0 d-flex flex-wrap justify-content-end">
                                                <li>
                                                    <a href="javascript:void(0)" class="edit text-success edit-academy-btn"
                                                        data-id="{{ $academy->id }}"
                                                        data-name="{{ $academy->name }}"
                                                        data-type="{{ $academy->type }}"
                                                        data-education="{{ $academy->education_level }}"
                                                        data-state="{{ $academy->state_id }}"
                                                        data-district="{{ $academy->district_id }}"
                                                        data-city="{{ $academy->city_id }}"
                                                        data-pincode="{{ $academy->pincode }}"
                                                        data-address="{{ $academy->address }}"
                                                        data-institution="{{ $academy->academic_code }}"
                                                        title="Edit">
                                                        <i class="fas fa-pen"></i>
                                                    </a>
                                                </li>
                                                <li>
                                                    <form action="{{ route('onboarding.destroy', $academy->id) }}" method="POST" style="display:inline;">
                                                        @csrf
                                                        @method('DELETE')
                                                        <button type="submit" class="remove text-danger mx-2" title="Delete" 
                                                                onclick="return confirm('Are you sure you want to delete this Academies/Institutions?');">
                                                            <i class="fas fa-trash"></i>
                                                        </button>
                                                    </form>
                                                </li>
                                            </ul>
                                        </td>
                                    </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Modal -->
        <div class="modal fade" id="modal-basic" tabindex="-1" aria-labelledby="modalBasicLabel" aria-hidden="true">
            <div class="modal-dialog modal-xl" role="document">
                <div class="modal-content modal-bg-white">
                    <div class="modal-header">
                        <h3 class="modal-title">Create Academies/Institutions</h3>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        <form id="academyForm" class="p-4">
                            @csrf
                            <input type="hidden" id="academy_id" name="academy_id">

                            <div class="row g-3">
                                <div class="col-md-4">
                                    <label class="form-label">Private / Government <span class="text-danger">*</span></label>
                                    <select id="type" name="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">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="">Enter 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 class="form-control district_here" name="district_id">
                                      <option value="">Select a District</option>
                                    </select>
                                  </div>
                                  <div class="col-md-4">
                                    <label class="form-label">City <span class="text-danger">*</span></label>
                                    <select class="form-control city_here" name="city_id">
                                      <option value="">Select a City</option>
                                    </select>
                                  </div>

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

                                <div class="col-md-4">
                                    <label class="form-label">Academic ID <span class="text-danger">*</span></label>
                                    <input type="text" id="academic_code" name="academic_code" class="form-control" placeholder="Enter Institution ID">
                                </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" placeholder="Enter Pincode">
                                </div>

                                <div class="col-md-12">
                                    <label class="form-label">Address of Institution <span class="text-danger">*</span></label>
                                    <textarea id="address" name="address" class="form-control" rows="2" placeholder="Enter Address"></textarea>
                                </div>

                                <div class="col-md-12 text-center mt-3">
                                    <button type="submit" id="academySubmit" class="btn btn-primary w-100 shadow">
                                        Save
                                    </button>
                                </div>
                            </div>
                        </form>
                    </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>
<script>
$(function () {
    $.ajaxSetup({ headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') } });

    // Reset modal for create
    $('[data-bs-target="#modal-basic"]').on('click', function () {
        $('#modal-basic .modal-title').text('Create Academies/Institutions');
        $('#academyForm')[0].reset();
        $('#academy_id').val('');
        $('#academySubmit').text('Save');
        $('.district_here, .city_here').html('<option value="">Select</option>');
    });

    // Edit button click
    $(document).on('click', '.edit-academy-btn', function () {
        const id = $(this).data('id');
        $('#modal-basic .modal-title').text('Edit Academies/Institutions');
        $('#academy_id').val(id);
        $('#name').val($(this).data('name'));
        $('#type').val($(this).data('type'));
        $('#education_level').val($(this).data('education'));
        $('#pincode').val($(this).data('pincode'));
        $('#academic_code').val($(this).data('institution'));
        $('#address').val($(this).data('address'));
        $('#state_id').val($(this).data('state')).trigger('change');
        setTimeout(() => { $('.district_here').val($(this).data('district')).trigger('change'); }, 500);
        setTimeout(() => { $('.city_here').val($(this).data('city')); }, 1000);
        $('#academySubmit').text('Update');
        $('#modal-basic').modal('show');
    });

    // Submit form
    $('#academyForm').on('submit', function (e) {
        e.preventDefault();
        const id = $('#academy_id').val();
        const url = id ? `onboarding/${id}` : 'onboarding';
        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-basic').modal('hide');
                Swal.fire({
                    icon: 'success',
                    title: 'Success',
                    text: id ? 'Academy updated successfully!' : 'Academy 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!' });
            }
        });
    });

    $(document).on('click', '.toggle-status-btn', function() {
        let btn = $(this);
        let id = btn.data('id');
        
        $.post("{{ route('onboarding.status') }}", {id: id}, function(res) {
            if(res.status == 1){
                btn.removeClass('btn-danger').addClass('btn-success').text('Active');
            } else {
                btn.removeClass('btn-success').addClass('btn-danger').text('Inactive');
            }
            Swal.fire({icon: 'success', title: 'Status updated', timer: 1500, showConfirmButton: false});
        }).fail(function() {
            Swal.fire({icon: 'error', title: 'Something went wrong'});
        });
    });

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

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

});
</script>
@endsection