@extends('layouts.admin')
@section('content')
<div class="page-wrapper">
    <div class="content container-fluid">
        <div class="page-header">
            <div class="row align-items-center">
                <div class="col">
                    <h3 class="page-title">{{__('Location')}}</h3>
                    <ul class="breadcrumb">
                        @if (isset($country))
                        <li class="breadcrumb-item"><a href="{{route('admin.home')}}">{{trans('global.dashboard') }}</a></li>
                        <li class="breadcrumb-item"><a href="{{route('admin.country.index')}}">{{__('Location')}}</a></li>
                        <li class="breadcrumb-item active">{{trans('global.edit')}}</li>
                        @else
                        <li class="breadcrumb-item"><a href="{{route('admin.home')}}">{{trans('global.dashboard') }}</a></li>
                        <li class="breadcrumb-item active">{{__('Location')}}</li>
                        @endif
                    </ul>
                </div>
                @if(isset($country))
                <div class="col-auto float-right ml-auto">
                    <a href="{{ route('admin.country.index') }}" class="btn add-btn"> <i class="la la-arrow-left"></i>{{ trans('global.back') }}</a>
                </div>
                @endif
            </div>
        </div>
        <div class="row add-form {{\Request::is('admin/country') ? 'hide-block' : ''}}">
            <div class="col-lg-12">
            <div class="card m-b-30">
                <div class="card-body">
                {{-- <div class="close-sign"><a href="#" class="btn btn-info btn-xs pull-right" id="hide"><i class="fa fa-close"></i></a></div> --}}
                @if(isset($country))
                <h5 class="card-title">Edit Country</h5>
                {!! Form::model($country, ['method' => 'PATCH', 'route' => ['admin.country.update', $country->id]]) !!}
                @else
                <h5 class="card-title">Add Country</h5>
                {!! Form::open(['method' => 'POST', 'route' => 'admin.country.store']) !!}
                @endif
                <div class="row">
                    <div class="col-lg-8">
                    <div class="form-group{{ $errors->has('country') ? ' has-error' : '' }}">
                        {!! Form::label('country', 'Country Title*') !!} - Like USA,IND
                        {!! Form::text('country', null, ['class' => 'form-control','placeholder' => 'Please enter 3 name country code Like USA,IND','required']) !!}
                        <small class="text-danger">{{ $errors->first('country') }}</small>
                    </div>
                    </div>
                    <div class="col-lg-8">
                    <div class="form-group">
                        @if(isset($country))
                        <button type="submit" class="btn btn-primary">Update</button>
                        @else
                        {{-- <button type="reset" class="btn btn-danger"><i class="fa fa-ban"></i> Reset</button> --}}
                        <button type="reset" class="btn btn-info">Reset</button>
                        {{-- <button type="submit" class="btn btn-primary"><i class="fa fa-check-circle"></i> Create</button> --}}
                        <button type="submit" class="btn btn-primary">Create</button>
                        @endif
                    </div>
                    </div>
                </div>
                {!! Form::close() !!}
                </div>
            </div>
            </div>
        </div>
        @if(isset($all_countries))
        <div class="row">
            <div class="col-lg-12">
            <div class="card m-b-30">
                <div class="card-header">
                <h5 class="card-title mb-0">All Country</h5>
                </div>
                <div class="card-body">
                <div class="table-responsive">
                    <table class=" table table-bordered table-hover datatable datatable-location">
                    <thead>
                        <tr>
                            <th style="width: 10px;"></th>
                        <th>
                            <!-- <div class="inline custom-checkbox">
                            <input id="checkboxAll" type="checkbox" class="custom-control-input" name="checked[]" value="all">
                            <label for="checkboxAll" class="custom-control-label"></label>
                            </div> -->ID</th>
                        <th>Country Name </th>
                        <th>ISO Code 2</th>
                        <th>ISO Code 3</th>
                        <th>Action</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($all_countries as $key => $country)
                        @php
                        $iso3 = $country->country;
                        $country_name = DB::table('all_countries')->where('iso3',$iso3)->first();
                        @endphp
                        <tr data-entry-id="{{$country->id}}">
                            <td></td>
                        <td>
                            <!-- <div class="custom-checkbox">
                            <input type="checkbox" form="bulk_delete_form" class="filled-in custom-control-input" name="checked[]" value="{{$country->id}}" id="checkbox{{$country->id}}">
                            <label for="checkbox{{$country->id}}" class="custom-control-label"></label>
                            </div> -->{{$key+1}}
                        </td>
                        <td>{{$country_name ? $country_name->nicename : ''}}</td>
                        <td>{{$country_name ? $country_name->iso : ''}}</td>
                        <td>{{$country_name ? $country_name->iso3 : ''}}</td>
                        <td>
                            <div class="button-list">
                                @can('location_edit')
                                    <a href="{{route('admin.country.edit', $country->id)}}" class="btn btn-xs btn-primary"><i class="fa fa-edit"></i></a>
                                @endcan
                                @can('location_delete')
                                    <button type="button" class="btn btn-xs btn-danger" data-toggle="modal" data-target="#deleteModal{{$country->id}}"><i class="fa fa-trash"></i></button>
                                @endcan
                                <!-- Modal -->
                                <div id="deleteModal{{$country->id}}" class="delete-modal modal fade" role="dialog">
                                    <div class="modal-dialog modal-sm">
                                    <div class="modal-content">
                                        <div class="modal-header">
                                        <button type="button" class="close" data-dismiss="modal">&times;</button>
                                        <div class="delete-icon"></div>
                                        </div>
                                        <div class="modal-body text-center">
                                        <h4 class="modal-heading">Are You Sure ?</h4>
                                        <p>Do you really want to delete these records?<br> This process cannot be undone.</p>
                                        </div>
                                        <div class="modal-footer">
                                        {!! Form::open(['method' => 'DELETE', 'route' => ['admin.country.destroy', $country->id]]) !!}
                                        <button type="reset" class="btn btn-dark" data-dismiss="modal">No</button>
                                        <button type="submit" class="btn btn-danger">Yes</button>
                                        {!! Form::close() !!}
                                        </div>
                                    </div>
                                    </div>
                                </div>
                            </div>
                        </td>
                        </tr>
                        @endforeach
                    </tbody>
                    </table>
                </div>
                </div>
            </div>
            </div>
        </div>
        @endif
    </div>
</div>
@endsection
@section('scripts')
    <script>
        $(function () {
            let dtButtons = $.extend(true, [], $.fn.dataTable.defaults.buttons)
                @can('country_delete')
                let deleteButtonTrans = '{{ trans('global.datatables.delete') }}'
                let deleteButton = {
                    text: deleteButtonTrans,
                    url: "{{ route('admin.country.bulk_delete') }}",
                    className: 'bg-inverse-danger',
                    action: function (e, dt, node, config) {
                    var ids = $.map(dt.rows({ selected: true }).nodes(), function (entry) {
                        return $(entry).data('entry-id')
                    });

                    if (ids.length === 0) {
                        alert('{{ trans('global.datatables.zero_selected') }}')

                        return
                    }

                    if (confirm('{{ trans('global.areYouSure') }}')) {
                        $.ajax({
                        headers: {'x-csrf-token': _token},
                        method: 'POST',
                        url: config.url,
                        data: { ids: ids, _method: 'DELETE' }})
                        .done(function () { location.reload() })
                    }
                    }
                }
                dtButtons.push(deleteButton)
                @endcan

            $.extend(true, $.fn.dataTable.defaults, {
                orderCellsTop: true,
                order: [[ 1, 'asc' ]],
                pageLength: 100,
            });
            let table = $('.datatable-location:not(.ajaxTable)').DataTable({ buttons: dtButtons })
            $('a[data-toggle="tab"]').on('shown.bs.tab click', function(e){
                $($.fn.dataTable.tables(true)).DataTable()
                    .columns.adjust();
            });
            $('div#sidebar').on('transitionend', function(e) {
                $($.fn.dataTable.tables(true)).DataTable().columns.adjust();
            })

        })
    </script>
@endsection