@extends('layouts.member-app')

    @section('page-title')
        <div class="row bg-title">
            <!-- .page title -->
            <div class="col-lg-3 col-md-4 col-sm-4 col-xs-12">
                <h4 class="page-title"><i class="{{ $pageIcon }}"></i> @lang($pageTitle)</h4>
            </div>
            <!-- /.page title -->
            <!-- .breadcrumb -->
            <div class="col-lg-9 col-sm-8 col-md-8 col-xs-12 text-right">
                    @if($designation!="Devops")
                    <a href="{{ route('member.devops-tickets.create') }}" class="btn btn-outline btn-success btn-sm">@lang('modules.tasks.newTicket') <i class="fa fa-plus" aria-hidden="true"></i></a>
                    @endif
                <ol class="breadcrumb">
                    <li><a href="{{ route('member.dashboard') }}">@lang('app.menu.home')</a></li>
                    <li class="active">@lang($pageTitle)</li>
                </ol>
            </div>
            <!-- /.breadcrumb -->
        </div>
    @endsection

    @push('head-script')
    <link rel="stylesheet" href="{{ asset('plugins/bower_components/bootstrap-select/bootstrap-select.min.css') }}">
    <link rel="stylesheet" href="{{ asset('plugins/bower_components/bootstrap-datepicker/bootstrap-datepicker.min.css') }}">
    <link rel="stylesheet" href="{{ asset('plugins/bower_components/custom-select/custom-select.css') }}">
    <link rel="stylesheet" href="{{ asset('css/datatables/dataTables.bootstrap.min.css') }}">
    <link rel="stylesheet" href="{{ asset('css/datatables/responsive.bootstrap.min.css') }}">
    <link rel="stylesheet" href="{{ asset('css/datatables/buttons.dataTables.min.css') }}">
    <style>
        .swal-footer {
            text-align: center !important;
        }
    </style>
    @endpush

    @section('content')

    <div class="dash_panel">
        <div class="customCard">

            <div class="table-responsive">
                <table class="table table-bordered table-hover toggle-circle default footable-loaded footable"
                        id="tickets-table">
                    <thead>
                    <tr>
                        <th>#</th>
                        <th>@lang('app.title')</th>
                        <th>@lang('app.description')</th>
                        <th>@lang('app.assignTo')</th>
                        <th>@lang('app.assignBy')</th>
                        <th>@lang('app.status')</th>
                        {{-- <th>@lang('app.project')</th>
                        <th>@lang('modules.tasks.assignTo')</th>
                        <th>@lang('modules.dashboard.estimatedTime')</th>
                        <th>@lang('timeLogged')</th> --}}
                        {{-- <th>@lang('modules.tasks.assignBy')</th> --}}
                        {{-- <th>@lang('app.startDate')</th>
                        <th>@lang('app.dueDate')</th>
                        <th>@lang('app.status')</th>
                        <th>@lang('app.action')</th> --}}
                    </tr>
                    </thead>
                </table>
            </div>

        </div>
    </div>
    @endsection

    @push('footer-script')
    <script src="{{ asset('plugins/bower_components/custom-select/custom-select.min.js') }}"></script>
    <script src="{{ asset('plugins/bower_components/bootstrap-select/bootstrap-select.min.js') }}"></script>
    <script src="{{ asset('plugins/bower_components/bootstrap-datepicker/bootstrap-datepicker.min.js') }}"></script>

    <script src="{{ asset('plugins/bower_components/datatables/jquery.dataTables.min.js') }}"></script>
    <script src="{{ asset('js/datatables/dataTables.bootstrap.min.js') }}"></script>
    <script src="{{ asset('js/datatables/dataTables.responsive.min.js') }}"></script>
    <script src="{{ asset('js/datatables/responsive.bootstrap.min.js') }}"></script>

    <script src="{{ asset('plugins/bower_components/bootstrap-daterangepicker/daterangepicker.js') }}"></script>
    <!-- <script src="{{ asset('js/sweetalert.min.js') }}"></script> -->
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

    <script>

        $(".select2").select2({
            formatNoMatches: function () {
                return "{{ __('messages.noRecordFound') }}";
            }
        });

        jQuery('#date-range').datepicker({
            toggleActive: true,
            format: '{{ $global->date_picker_format }}',
            language: '{{ $global->locale }}',  
            autoclose: true
        });

        table = '';

        function showTable() {

            var url = '{!!  route('member.devops-tickets.data') !!}?&_token={{ csrf_token() }}';
            table = $('#tickets-table').dataTable({
                destroy: true,
                responsive: true,
                processing: true,
                serverSide: true,
                ajax: {
                    "url": url,
                    // "data" : {
                
                    // }
                },
                deferRender: true,
                language: {
                    "url": "