@extends('layouts/eims_layout')
@section('title', '| ' . $data['pageTitle'])
@section('content')
@include('successMsg')

<style>
    .custom-modal-width {
        width: 25%;
        /* Reduced from 30% to 25% for a smaller modal size */
        max-width: none;
        margin: 0 auto;
    }

    @media (max-width: 768px) {
        .custom-modal-width {
            width: 90%;
            /* On smaller screens, allow the modal to take up more space */
        }
    }
</style>

<div class="row page-wrap">
    <div class="col-md-12">
        <div class="panel panel-default" style="background-color:#708090;">
            <div class="panel-heading" style="padding-bottom:0px">
                <div class="panel-title">
                    <h2>{!! $data['pageTitle'] !!}</h2>
                </div>

                <button type="button" id="btn1" class="btn btn-info pull-right addViewBtn" data-toggle="modal"
                    data-target="#myModal" data-type="academic">
                    <i class="glyphicon glyphicon-plus-sign addIcon"></i> Add {{ $data['pageTitle'] }}
                </button>
            </div>

            <div class="panel-body panelBodyView">
                <table class="table table-striped table-bordered table-condensed first-col-dark" id="datatable"
                    style="width:100%">
                    <thead>
                        <tr>
                            <th width="30">SL#</th>
                            <th class="text-center text-nowrap">Name</th>
                            <th class="text-center text-nowrap">Short Name</th>
                            <th class="text-center text-nowrap">Status</th>
                            <th class="text-center text-nowrap">Action</th>
                        </tr>
                    </thead>
                    <tbody id="tableBodySection"></tbody>
                </table>
            </div>
        </div>
    </div>
</div>

{{-- Start Add Form Modal --}}
<div id="myModal" class="modal fade" style="margin-top:5%">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header" style="background-color: rgb(0, 0, 0); color: rgb(255, 255, 255); padding: 10px;">
                <h4 class="modal-title">Add {{ $data['pageTitle'] }}</h4>
            </div>

            <div class="modal-body">
                {{-- Ensure action URL and method are correct --}}
                {!! Form::open([
                'url' => '',
                'method' => 'POST',
                'id' => 'form2',
                'role' => 'form',
                'class' => 'form-horizontal form-groups',
                ]) !!}
                @csrf
                {!! Form::hidden('id', null, ['id' => 'id']) !!}
                {!! Form::hidden('slno', null, ['id' => 'slno']) !!}

                {{-- Name --}}
                <div class="form-group" id="exam_name_field">
                    {!! Form::label(
                    'name',
                    'Title/Name: <sup class="text-danger">*</sup>',
                    ['class' => 'col-sm-4 control-label'],
                    false,
                    ) !!}
                    <div class="col-sm-8">
                        {!! Form::text('name', null, ['class' => 'form-control', 'id' => 'name', 'placeholder' => 'Enter title/name']) !!}
                        <p id="name_error" class="text-danger"></p>
                    </div>
                </div>

                {{-- Short Name --}}
                <div class="form-group" id="short_name_field">
                    {!! Form::label(
                    'short_name',
                    'Short Name: <sup class="text-danger">*</sup>',
                    ['class' => 'col-sm-4 control-label'],
                    false,
                    ) !!}
                    <div class="col-sm-8">
                        {!! Form::text('short_name', null, [
                        'class' => 'form-control',
                        'id' => 'short_name',
                        'placeholder' => 'Enter short name',
                        ]) !!}
                        <p id="short_name_error" class="text-danger"></p>
                    </div>
                </div>

                {{-- Status --}}
                <div class="form-group activeStatus" id="status_field">
                    {!! Form::label(
                    'status',
                    'Status: <sup class="text-danger">*</sup>',
                    ['class' => 'col-sm-4 control-label'],
                    false,
                    ) !!}
                    <div class="col-sm-8">
                        {!! Form::select('status', $data['activeStatus'], $value = null, [
                        'class' => 'form-control',
                        'id' => 'status',
                        'placeholder' => 'Select Status',
                        ]) !!}
                        <p id='statuse' style="max-height:3px;"></p>
                    </div>
                </div>


                {!! Form::close() !!}
                <div class="modal-footer">
                    {!! Form::button('Update', ['id' => 'update_btn', 'class' => 'btn btn-info update']) !!}
                    {!! Form::button('Submit', ['id' => 'add_btn', 'class' => 'btn btn-info actionBtn add']) !!}
                    {!! Form::button('Close', [
                    'class' => 'btn btn-warning',
                    'data-dismiss' => 'modal',
                    'id' => 'footer_action_button_dismis',
                    ]) !!}
                </div>
            </div>
        </div>
    </div>
</div>
{{-- End Add Form Modal --}}




<script type="text/javascript">
    $(document).ready(function() {

        // Initialize DataTable
        const datatable = $('#datatable').DataTable({
            "processing": true,
            "serverSide": true,
            "ordering": false,
            "ajax": {
                "url": "{{ Request::url() }}",
                "type": "POST",
                '_token': $('input[name=_token]').val(),
                "beforeSend": function() {
                    $('#loadingModal').show();
                },
                data: function(d) {
                    var inputs = {};
                    $.each($('#searchForm').serializeArray(), function() {
                        inputs[this.name] = this.value;
                    });
                    d.filter = inputs;
                }
            },
            "drawCallback": function() {
                $('#loadingModal').hide();
            },


            // Define columns
            "columns": [{
                    "data": "sl"
                },
                {
                    "data": "name",
                    className: "text-align-center"
                },
                {
                    "data": "short_name",
                    className: "text-align-center"
                },

                {
                    "data": "status",
                    className: "text-align-center"
                },

                {
                    "data": "id",
                    className: "text-align-center text-nowrap"
                }
            ],


            // Add column definitions
            "columnDefs": [{
                "targets": -1, // Apply to the last column
                "data": "id",
                "render": function(data, type, row) {
                    var html = `
                        <button id="editIcon" class="btn btn-xs btn-info edit-modal"
                            data-id="${row.id}"
                            data-campusid="${row.campus_id}"
                            data-nameval="${encodeURIComponent(row.name)}"
                            data-shortname="${encodeURIComponent(row.short_name)}"
                            data-statusval="${encodeURIComponent(row.status_val)}"
                            data-slno="${row.sl}">
                            <i class="fa fa-edit" aria-hidden="true"></i>
                        </button>
                    `;
                    html += `
                        <button data-id="${row.id}" class="btn btn-xs btn-danger delete-action">
                            <i class="fa fa-trash" aria-hidden="true"></i>
                        </button>
                    `;
                    return html;
                }
            }]
        });

        // Clear the form when the modal is closed
        $('#myModal').on('hide.bs.modal', function() {
            $('#form2')[0].reset();
            $('.show-errors').remove(); // Clear error messages
        });

        // Show the Add Data modal
        $(document).on('click', '.addViewBtn', function() {
            $("#update_btn").addClass('hide');
            $("#add_btn").removeClass('hide');
            $('.modal-title').text('Add Data');
            $('.activeStatus').hide();
            $('#add_btn').addClass('glyphicon glyphicon-check');
            $('#footer_action_button_dismis').addClass('glyphicon glyphicon-remove');
        });

        // Show the Edit modal
        // Show the Edit modal
        $(document).on('click', '.edit-modal', function() {
            $("#add_btn").addClass('hide');
            $("#update_btn").removeClass('hide');
            $('.activeStatus').show();

            if (hasAccess('eims/setting/examination/config/exam/edit')) {
                $('#myModal').modal('show');
                $('.errormsg').empty();
                $('.modal-title').text('Update Data');

                // Set form values
                $('#id').val($(this).data('id'));
                $('#slno').val($(this).data('slno'));
                $('#campus_id').val($(this).data('campusid'));
                $('#name').val(decodeURIComponent($(this).data('nameval')));
                $('#short_name').val(decodeURIComponent($(this).data('shortname')));
                $('#status').val(decodeURIComponent($(this).data('statusval')));

                var is_admission_exam_allow = decodeURIComponent($(this).data('isadmission_examallow'));

                // Ensure the checkbox's checked state is set properly
                if (is_admission_exam_allow === '1' || is_admission_exam_allow.toLowerCase() === 'true') {
                    $('#is_admission_exam_allow_val').prop('checked', true);
                } else {
                    $('#is_admission_exam_allow_val').prop('checked', false);
                }
            }

            $('#update_btn').addClass('glyphicon glyphicon-check');
            $('#footer_action_button_dismis').addClass('glyphicon glyphicon-remove');
        });

        // Update data through AJAX
        $('.update').click(function() {
            $.ajax({
                type: 'post',
                url: '{{ Request::url() }}/edit',
                data: $('form').serialize(),
                dataType: 'json',
                success: function(_response) {
                    if (_response.errors) {
                        const errors = _response.errors;
                        for (const key in errors) {
                            if (errors.hasOwnProperty(key)) {
                                const element = errors[key];
                                $(`#${key}e`).empty().html(
                                    `<span class="error-message" style="color:red">${element}</span>`
                                );
                            }
                        }
                    } else {
                        Swal.fire({
                            icon: _response.responseStatus,
                            title: _response.responseTitle,
                            text: _response.responseText,
                            showConfirmButton: false,
                            timer: 1500
                        });
                        if (_response.responseStatus == 'success') {
                            $('#form2')[0].reset(); // Clear form
                            $('#myModal').modal('hide');
                            datatable.ajax.reload();
                        }
                    }
                },
                error: function(data) {
                    Swal.fire({
                        icon: _response.responseStatus,
                        title: _response.responseTitle,
                        text: _response.responseText,
                        showConfirmButton: false,
                        timer: 1500
                    });
                }
            });
        });

        // Add Data
        $('#add_btn').click(function() {
            $.ajax({
                type: 'POST',
                url: '{{ route('eims_exam_config_store') }}',
                data: $('#form2').serialize(),
                dataType: 'json',
                beforeSend: function() {
                    $('#add_btn').attr('disabled', 'disabled').html('Please wait...');
                    $('.show-errors').remove();
                },

                success: function(response) {
                    if (response.errors) {
                        $.each(response.errors, function(key, error) {
                            $(`#${key}_error`).empty().show().append(
                                `<small class="show-errors text-danger">${error}</small>`
                            );
                        });
                    } else {
                        Swal.fire({
                            icon: response.responseStatus,
                            title: response.responseTitle,
                            text: response.responseText,
                            showConfirmButton: false,
                            timer: 1500
                        });
                        if (response.responseStatus == 'success') {
                            $('#form2')[0].reset(); // Clear form
                            $('#myModal').modal('hide');
                            datatable.ajax.reload();
                        }
                    }
                },
                complete: function() {
                    $('#add_btn').removeAttr('disabled').html('Submit');
                }
            });
        });

        // Delete Data
        $(document).on('click', '.delete-action', function() {
            if (hasAccess('eims/setting/examination/config/exam/delete')) {
                Swal.fire({
                    title: 'Are you sure?',
                    text: "Once deleted, you won't be able to revert this!",
                    icon: 'warning',
                    showCancelButton: true,
                    confirmButtonColor: '#d33',
                    cancelButtonColor: '#7e7979',
                    confirmButtonText: 'Yes, delete it!'
                }).then((result) => {
                    if (result.isConfirmed) {
                        $.ajax({
                            type: 'post',
                            url: '{{ Request::url() }}/delete',
                            data: {
                                '_token': $('input[name=_token]').val(),
                                'id': $(this).data('id')
                            },
                            success: function(_response) {
                                if (_response.responseTitle == 'success') {
                                    Swal.fire({
                                        icon: 'success',
                                        title: 'Deleted!',
                                        text: 'This data has been deleted.',
                                        showConfirmButton: false,
                                        timer: 1500
                                    });
                                    datatable.ajax.reload();
                                } else {
                                    Swal.fire({
                                        icon: 'error',
                                        title: 'Failed to delete!',
                                        text: 'This data has not been deleted.',
                                        showConfirmButton: true,
                                    });
                                }
                            }
                        });
                    }
                });
            } else {
                Swal.fire({
                    icon: 'error',
                    title: 'Access Denied',
                    text: 'You do not have permission to delete this data.',
                    showConfirmButton: true,
                });
            }
        });
    });
</script>

@endsection