{{-- Extends layout --}}
@extends(getThemeBasePath())

@section('page_title')
    {{ $page_title ?? '' }}
@endsection


{{-- Content --}}
@section('content')
@include('backend.hr.support_center.header')
<div class="card">
    <div class="card-body">
        <div class="accordion mb-5" id="kt_accordion_1">
            <div class="accordion-item">
                <h2 class="accordion-header" id="kt_accordion_1_header_1">
                    <button class="accordion-button fs-4 fw-semibold collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#kt_accordion_1_body_1" aria-expanded="false" aria-controls="kt_accordion_1_body_1">
                        Filters
                    </button>
                </h2>
                <div id="kt_accordion_1_body_1" class="accordion-collapse collapse" aria-labelledby="kt_accordion_1_header_1" data-bs-parent="#kt_accordion_1" style="">
                    <div class="accordion-body">
                        <div class="row">
                            <!--begin::Input Group-->
                            <div class="col-lg-2 col-md-3 col-sm-6 col-xs-12">
                                <div class="mb-5">
                                    <!--begin::Input-->
                                    <input type="text" name="ticket_id" class="form-control form-control-sm form-control-solid ticket_id input_filters"
                                     autocomplete="off" placeholder="Ticket ID" value="{{ isset($filters_data) && isset($filters_data['ticket_id']) ? $filters_data['ticket_id'] : '' }}">
                                    <!--end::Input-->
                                </div>
                            </div>
                            <!--end::Input group-->

                            <!--begin::Input Group-->
                            <div class="col-lg-2 col-md-3 col-sm-6 col-xs-12">
                                <!--begin::Input group-->
                                <div class="mb-5">
                                    <!--begin::Input-->
                                    <select name="type_id" class="form-control form-select-sm form-control-solid type_id input_filters form-select" id="type_id" data-control="select2" data-placeholder="Type" data-allow-clear="true">
                                        <option value="">All Type</option>
                                        @foreach (config('constant.ticket_type') ?? [] as $id => $val)
                                        <option value="{{ $id }}" {{ isset($filters_data) && isset($filters_data['type_id']) && $filters_data['type_id'] == $id ? 'selected' : '' }}>
                                            {{ $val }}
                                        </option>
                                        @endforeach
                                    </select>
                                    <!--end::Input-->
                                </div>
                                <!--end::Input group-->
                            </div>
                            <!--end::Input group-->

                            <!--begin::Input Group-->
                            <div class="col-lg-2 col-md-3 col-sm-6 col-xs-12">
                                <!--begin::Input group-->
                                <div class="mb-5">
                                    <!--begin::Input-->
                                    <select name="module_id" class="form-control form-select-sm form-control-solid module_id input_filters form-select"  id="module_id" data-control="select2" data-placeholder="Module" data-allow-clear="true">
                                        <option value="">All Module</option>
                                        @foreach ($module_list ?? [] as $id => $val)
                                        <option value="{{ $id }}" {{ isset($filters_data) && isset($filters_data['module_id']) && $filters_data['module_id'] == $id ? 'selected' : '' }}>
                                            {{ $val }}
                                        </option>
                                        @endforeach
                                    </select>
                                    <!--end::Input-->
                                </div>
                                <!--end::Input group-->
                            </div>
                            <!--end::Input group-->

                            <!--begin::Input Group-->
                            <div class="col-lg-2 col-md-3 col-sm-6 col-xs-12">
                                <!--begin::Input group-->
                                <div class="mb-5">
                                    <!--begin::Input-->
                                    <select name="priority_id" class="form-control form-select-sm form-control-solid priority_id input_filters form-select"  id="priority_id" data-control="select2" data-placeholder="Priority" data-allow-clear="true">
                                        <option value="">All Priority</option>
                                        @foreach (config('constant.ticket_priority') ?? [] as $id => $val)
                                        <option value="{{ $id }}" {{ isset($filters_data) && isset($filters_data['priority_id']) && $filters_data['priority_id'] == $id ? 'selected' : '' }}>
                                            {{ $val }}
                                        </option>
                                        @endforeach
                                    </select>
                                    <!--end::Input-->
                                </div>
                                <!--end::Input group-->
                            </div>
                            <!--end::Input group-->

                            <!--begin::Input Group-->
                            <div class="col-lg-2 col-md-3 col-sm-6 col-xs-12">
                                <!--begin::Input group-->
                                <div class="mb-5">
                                    <!--begin::Input-->
                                    <select name="status_id" class="form-control form-select-sm form-control-solid status_id input_filters form-select"  id="status_id" data-control="select2" data-placeholder="Status" data-allow-clear="true">
                                        <option value="">All Status</option>
                                        @foreach (config('constant.ticket_status') ?? [] as $id => $val)
                                        <option value="{{ $id }}" {{ isset($filters_data) && isset($filters_data['status_id']) && $filters_data['status_id'] == $id ? 'selected' : '' }}>
                                            {{ $val }}
                                        </option>
                                        @endforeach
                                    </select>
                                    <!--end::Input-->
                                </div>
                                <!--end::Input group-->
                            </div>
                            <!--end::Input group-->

                        </div>
                        <div class="row flex-row-reverse">
                            <div class="col-lg-1 col-md-1 col-sm-1 col-xs-12">
                                <a class="btn btn-primary btn-sm reset_filter" href="javascript:;">Reset Filter</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="table-responsive">
                <table class="table table-bordered table-hover" id="kt_datatable_ticket_configuration">
                    <thead>
                        <tr class="text-muted text-uppercase">
                            <th><strong>ID</strong></th>
                            <th><strong>Ticket ID</strong></th>
                            <th><strong>Title</strong></th>
                            <th><strong>Type</strong></th>
                            <th><strong>Module</strong></th>
                            <th><strong>Priority</strong></th>
                            <th><strong>Status</strong></th>
                            <th><strong>Updated At</strong></th>
                            <th><strong>Action</strong></th>
                        </tr>
                    </thead>
                    <tbody>
                        @if (!empty($ticket_list))
                            @foreach ($ticket_list??[] as $ticket)
                                <tr data-ticket_id="{{$ticket['id']??''}}">
                                    <td>{{ $ticket['id']??'' }}</td>
                                    <td>{{ $ticket['ticket_id']??'' }}</td>
                                    <td>{{ $ticket['title']??'' }}</td>
                                    <td>{{ isset($ticket['type']) ? (config('constant.ticket_type')[$ticket['type']]??'') : '' }}</td>
                                    <td>{{ isset($ticket['module']) ? ($module_list[$ticket['module']]??'') : '' }}</td>
                                    <td>{{ isset($ticket['priority']) ? (config('constant.ticket_priority')[$ticket['priority']]??'') : '' }}</td>
                                    <td>{{ isset($ticket['status']) ? (config('constant.ticket_status')[$ticket['status']]??'') : '' }}</td>
                                    <td>{{ isset($ticket['updated_at']) ? date('d-m-Y',strtotime($ticket['updated_at'])) :'' }}</td>
                                    <td>
                                        @if (!empty($ticket['status']) && in_array($ticket['status'], ['closed','resolved','implemented','cancelled']))
                                        <a class="tbl_view_btn" title="View">{!! theme()->getSvgIcon("icons/duotune/general/gen005.svg", 'svg-icon svg-icon-2x svg-icon-success') !!}</a>
                                        @else
                                        <a href="javascript:;" class="tbl_edit_btn" title="Edit">{!! theme()->getSvgIcon("icons/duotune/general/gen055.svg", 'svg-icon svg-icon-2x svg-icon-success') !!}</a>
                                        <a href="javascript:;" class="tbl_delete_btn" onclick="actionDelete(this)" title="Delete">{!! theme()->getSvgIcon("icons/duotune/general/gen027.svg", 'svg-icon svg-icon-2x svg-icon-danger') !!}</a>
        

                                        @endif
                                    </td>
                                </tr>
                            @endforeach
                            
                        @endif
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

@endsection
@section('scripts')
<script>
    $(document).ready(function(){
        var table = $("#kt_datatable_ticket_configuration").DataTable({
            'order':[0,'desc'],
            "drawCallback": function(settings) {
                $('.table-responsive').addClass('ps-5 pe-5');
            }
        });

        function insertUrlParam(key, value) {
            if (history.pushState) {
                let searchParams = new URLSearchParams(window.location.search);
                if (value && value !== '') {
                    searchParams.set(key, value);
                } else {
                    searchParams.delete(key);
                }
                let newurl = window.location.protocol + "//" + window.location.host + window.location.pathname;
                if (searchParams.toString()) {
                    newurl += '?' + searchParams.toString();
                }
                window.history.pushState({
                    path: newurl
                }, '', newurl);
            }
        }

        // Store reference to our custom filter function
        var customFilterFunction = null;

        function applyFilters() {
            var ticketId = $('input[name="ticket_id"]').val().toLowerCase();
            var typeId = $('select[name="type_id"]').val();
            var moduleId = $('select[name="module_id"]').val();
            var priorityId = $('select[name="priority_id"]').val();
            var statusId = $('select[name="status_id"]').val();

            // Get selected option texts for comparison
            var selectedTypeText = typeId ? $('select[name="type_id"] option:selected').text().trim() : '';
            var selectedModuleText = moduleId ? $('select[name="module_id"] option:selected').text().trim() : '';
            var selectedPriorityText = priorityId ? $('select[name="priority_id"] option:selected').text().trim() : '';
            var selectedStatusText = statusId ? $('select[name="status_id"] option:selected').text().trim() : '';

            // Remove our custom filter if it exists
            if (customFilterFunction) {
                var index = $.fn.dataTable.ext.search.indexOf(customFilterFunction);
                if (index !== -1) {
                    $.fn.dataTable.ext.search.splice(index, 1);
                }
            }

            // Check if any filter is active
            var hasActiveFilters = ticketId || (typeId && selectedTypeText !== 'All Type') || 
                                  (moduleId && selectedModuleText !== 'All Module') || 
                                  (priorityId && selectedPriorityText !== 'All Priority') || 
                                  (statusId && selectedStatusText !== 'All Status');

            if (hasActiveFilters) {
                // Add custom filter function
                customFilterFunction = function(settings, data, dataIndex) {
                    // Filter by ticket_id (column 1)
                    if (ticketId) {
                        var rowTicketId = (data[1] || '').toLowerCase();
                        if (!rowTicketId.includes(ticketId)) {
                            return false;
                        }
                    }

                    // Filter by type (column 3)
                    if (typeId && selectedTypeText && selectedTypeText !== 'All Type') {
                        var rowTypeText = (data[3] || '').trim();
                        if (rowTypeText !== selectedTypeText) {
                            return false;
                        }
                    }

                    // Filter by module (column 4)
                    if (moduleId && selectedModuleText && selectedModuleText !== 'All Module') {
                        var rowModuleText = (data[4] || '').trim();
                        if (rowModuleText !== selectedModuleText) {
                            return false;
                        }
                    }

                    // Filter by priority (column 5)
                    if (priorityId && selectedPriorityText && selectedPriorityText !== 'All Priority') {
                        var rowPriorityText = (data[5] || '').trim();
                        if (rowPriorityText !== selectedPriorityText) {
                            return false;
                        }
                    }

                    // Filter by status (column 6)
                    if (statusId && selectedStatusText && selectedStatusText !== 'All Status') {
                        var rowStatusText = (data[6] || '').trim();
                        if (rowStatusText !== selectedStatusText) {
                            return false;
                        }
                    }

                    return true;
                };

                $.fn.dataTable.ext.search.push(customFilterFunction);
            } else {
                customFilterFunction = null;
            }

            table.draw();
        }

        $(document).on('change', '.input_filters', function() {
            let key = $(this).attr('name');
            let keyVal = $(this).val();
            insertUrlParam(key, keyVal);
            applyFilters();
        });

        $(document).on('keyup', 'input.input_filters', function() {
            let key = $(this).attr('name');
            let keyVal = $(this).val();
            insertUrlParam(key, keyVal);
            applyFilters();
        });

        // Reset filter functionality
        $(document).on('click', '.reset_filter', function() {
            $('input.input_filters').val('');
            $('select.input_filters').val('').trigger('change');
            // Reset select2 if it exists
            if ($('#type_id').length && $('#type_id').data('select2')) {
                $('#type_id').val(null).trigger('change');
            }
            if ($('#module_id').length && $('#module_id').data('select2')) {
                $('#module_id').val(null).trigger('change');
            }
            if ($('#priority_id').length && $('#priority_id').data('select2')) {
                $('#priority_id').val(null).trigger('change');
            }
            if ($('#status_id').length && $('#status_id').data('select2')) {
                $('#status_id').val(null).trigger('change');
            }
            // Clear URL parameters and reload
            window.location.href = window.location.pathname + '?ticket=1';
        });

        // Apply filters on page load if URL has parameters
        var urlParams = new URLSearchParams(window.location.search);
        if (urlParams.toString() && urlParams.get('ticket')) {
            // Small delay to ensure DataTable is fully initialized
            setTimeout(function() {
                applyFilters();
            }, 100);
        }
    });
    function actionDelete(ele){
        var row = $(ele).parents('tr:first');
        if (row) {
            var id = row.attr('data-ticket_id');
            if (id) {
                Swal.fire(deleteAlert).then(function(result) {
                    if (result.value) {
                        $.ajax({
                            type: 'POST',
                            dataType: 'json',
                            data: {
                                ticket_id: id,
                                "_token": "{{ csrf_token() }}",
                                _method: 'DELETE'
                            },
                            url: "{{ route('support_center.ticket_delete') }}",
                            success: function(data) {
                                if (data.status) {
                                    Swal.fire(deleteSuccessAlert);
                                    location.reload();
                                }
                            }
                        });
                    }
                });
            }
        }
    }
</script>
@endsection