@extends('vendor.dashboards.layouts.master')

@section('content')
    <div class="row">
        <div class="col-12">
            <div class="card my-4">
                <div class="card-header p-0 position-relative mt-n4 mx-3 z-index-2">
                    <div class="bg-gradient-dark shadow-dark border-radius-lg pt-4 pb-3">
                        <h6 class="text-white text-capitalize pe-3 ps-3">{{ __('general.packages') }}</h6>
                        @if(voyager_user()->hasPermission('add_packages'))
                        <a href="{{ route('packages.create') }}" class="btn bg-gradient-success text-capitalize" style="float:{{ Auth::user()->locale == 'ar' ? 'left':'right' }}; text-align: center;"><i class="material-icons opacity-10">add</i> {{ __('general.add_package') }}</a>
                        @endif
                    </div>
                </div>
                <div class="card-body">
                    <div class="table-responsive p-0">
                        <table class="table align-items-center mb-0" id="dataTable">
                            <thead>
                            <tr>
                                <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">{{ __('voyager::generic.name') }}</th>
                                <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">{{ __('voyager::seeders.data_rows.destination') }}</th>
                                <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">{{ __('voyager::seeders.data_rows.price_per_person') }}</th>
                                <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">{{ __('voyager::seeders.data_rows.code') }}</th>
                                <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">{{ __('voyager::seeders.data_rows.status') }}</th>
                                <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">{{ __('voyager::seeders.data_rows.country_id') }}</th>
                                <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">{{ __('voyager::seeders.data_rows.date') }}</th>
{{--                                <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">آخر تاريخ دخول</th>--}}
                                <th class="text-secondary opacity-7"></th>
                            </tr>
                            </thead>
                            <tbody>

                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>

@endsection

@push('js')
    <!-- DataTables -->
    <link rel="stylesheet" href="https://cdn.datatables.net/1.13.7/css/jquery.dataTables.min.css">
    <link rel="stylesheet" href="https://cdn.datatables.net/rowreorder/1.4.1/css/rowReorder.dataTables.min.css">
    <link rel="stylesheet" href="https://cdn.datatables.net/responsive/2.5.0/css/responsive.dataTables.min.css">
    <script src="https://cdn.datatables.net/1.13.7/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.datatables.net/rowreorder/1.4.1/js/dataTables.rowReorder.min.js"></script>
    <script src="https://cdn.datatables.net/responsive/2.5.0/js/dataTables.responsive.min.js"></script>

    <script src="{{ asset('js/datatable-browse.js') }}" type="text/javascript"></script>

    <script type="application/javascript">
        $(document).ready(function () {
            /**
             * custom_datatable function
             * var url it's Ajax route
             * var Columns datatables columns name and received data
             * var del destroy route
             * var load_img path of loading image
             * */

            var url = "{{ route('packages.ajax') }}";
            var columns = [
                {data: 'name', name: 'name'},
                {data: 'destination', name: 'destination'},
                {data: 'price_per_person', name: 'price_per_person'},
                {data: 'code', name: 'code'},
                {data: 'status', name: 'status'},
                {data: 'country', name: 'country', orderable:false},
                {data: 'date', name: 'date'},
                {data: 'action', name: 'action', orderable: false, searchable: false}
            ];
            var del = '{{ route('packages.destroy', ['id' => '__id']) }}';


            custom_datatable(url, columns,'dataTable', del,"{{ Auth::user()->locale??'en' }}");
        });

    </script>

@endpush