@extends('backend.layouts.app')

@section('content')
    <div class="">


        <div class="d-flex align-items-center justify-content-space-between py-3 tableTab-freeze">
            <div class="">
                <h3 class="mb-0 h6">{{ translate('Countries') }}</h3>
            </div>
            <div class="sortBy-dropdown ml-auto" style="width:110px; ">
                <select class="form-control form-control-sm aiz-selectpicker mb-2 mb-md-0" name="type" id="type"
                    onchange="sort_products()">
                    <option value="">{{ translate('Select Region') }}</option>
                    @foreach ($tertiary as $region)
                        <option value="{{ $region->id }}" @if ($region->id == request()->region_id) selected @endif>
                            {{ $region->name }}</option>
                    @endforeach
                </select>
            </div>
            <div class="ml-2 productSearch">
                <div class="form-group mb-0 position-relative">
                    <i class="icons icon-search-s" id="memberSearch"></i>
                    <input type="text" class="form-control form-control-sm searching" id="search" name="search"
                        value="{{ request()->search }}" placeholder="Search">
                </div>
            </div>
        </div>
        <div class="admin-table table-freezed">
            <div class="table-responsive tbl-hgt-fixed" id="searchResults" style="max-height: 700px">
                <table class="table table-bordered" width="100%">
                    <thead>
                        <tr>
                            <th class="text-center" width="4%">S.No.</th>
                            <th class="text-center" style="width: auto">{{ translate('Name') }}</th>
                            <th class="text-center" style="width: auto">{{ translate('Region Name') }}</th>
                            <th class="text-center" style="width: auto">{{ translate('Code') }}</th>
                            <th class="text-center" style="width: auto">{{ translate('Actions') }}</th>
                            {{--  <th>{{translate('Show/Hide')}}</th>  --}}
                        </tr>
                    </thead>
                    <tbody>
                        @if ($countries->count() > 0)
                            @foreach ($countries as $key => $country)
                                <tr>
                                    <td class="text-center">
                                        {{ $key + 1 + ($countries->currentPage() - 1) * $countries->perPage() }}</td>
                                    <td class="text-center">{{ $country->name }}</td>
                                    <td class="text-center">{{ $country->region_name }}</td>
                                    <td class="text-center">{{ $country->code }}</td>
                                    <td class="text-center">
                                        <div class="tbl-action-link">
                                            <a href="javascript:void(0);" data-id="{{ $country->id }}"
                                                class ="edit_country" data-toggle="modal" data-target="#addPost-modal"><i
                                                    class="icons icon-edit" data-toggle="tooltip" data-placement="top"
                                                    title="" data-original-title="Edit"></i>
                                            </a>
                                        </div>
                                    </td>
                                </tr>
                            @endforeach
                        @else
                            <tr class="no-data">
                                <td colspan="50">
                                    <div class="nodata-col">
                                        <i class="icons icon-no-data"></i>
                                        <h1>No results found</h1>
                                    </div>
                                </td>
                            </tr>
                        @endif
                    </tbody>
                </table>
            </div>
            <div class="aiz-pagination" style="margin-top:0px;">
                <div class="perPage">
                    Total Countries: <strong>{{ $countries->total() }}</strong>
                </div>
                {{ $countries->appends(request()->input())->links() }}
            </div>
        </div>
    </div>
@endsection

@section('modal')
    <!-- Delete Modal -->
    @include('modals.delete_modal')
    <div class="modal right fade addPost-modal edit-country" data-refresh="true" id="addPost-modal" role="dialog">
        <div class="modal-dialog" id="modals_datas" style="min-width:800px">

        </div>
    </div>
@endsection

@section('script')
    <script type="text/javascript">
        $(document).ready(function() {
            $(document).on('click', '.edit_country', function(event) {
                let id = $(this).data('id');
                var url = "{{ url('/admin/countries') }}" + "/" + id + "/edit";
                edit_country(url);
            });

            function edit_country(url) {
                $.ajax({
                    url: url,
                    success: function(data) {
                        $("#modals_datas").html(data);
                    }
                });
            }

            $(document).on('click', '#update_country', function() {
                var formData = new FormData($("#update_form")[0]);
                let action = $(this).closest('.modal-content').find('form').attr('action');

                $.ajax({
                    method: "POST",
                    url: action,
                    data: formData,
                    cache: false,
                    contentType: false,
                    processData: false,
                    success: function(data) {
                        $("#update_form .invalid-feedback").remove();
                        if (data.errors) {
                            $.each(data.errors, function(k, val) {
                                var err =
                                    '<span class="invalid-feedback" role="alert" style="display: block;"><strong>' +
                                    val + '</strong></span>';
                                var a = $("#update_form input[name=" + k + "]").after(
                                    err);
                                var text = $("#update_form textarea[name=" + k + "]")
                                    .after(err);

                            });
                        } else {
                            AIZ.plugins.notify('success', 'Country Updated successfully');
                            setInterval(function() {
                                location.reload();
                            }, 1000);
                        }
                    }
                });
            });

            function update_status(el) {
                if (el.checked) {
                    var status = 1;
                } else {
                    var status = 0;
                }
                $.post('{{ route('countries.status') }}', {
                    _token: '{{ csrf_token() }}',
                    id: el.value,
                    status: status
                }, function(data) {
                    if (data == 1) {
                        AIZ.plugins.notify('success',
                            '{{ translate('Country status updated successfully') }}');
                    } else {
                        AIZ.plugins.notify('danger', '{{ translate('Something went wrong') }}');
                    }
                });
            }
            ////////////////////// SEARCHING FUNCTIONALITY //////////////////////////////////

            $(document).on("keypress", "input[name='search']", function(event) {
                if (event.keyCode === 13) {
                    var searchTerm = $(this).val().trim();
                    window.location.href = "?search=" + searchTerm;
                }
            });

            $(document).on("click", "#memberSearch", function(event) {
                var searchTerm = $("input[name='search']").val().trim();
                window.location.href = "?search=" + searchTerm;
            });

            /////////////////// FILTER DATA ////////////////////////

            $('#type').on('change', function() {
                var selectedRegionId = $(this).val();
                window.location.href = "?region_id=" + selectedRegionId;
            });

        });
    </script>
@endsection