@extends('backend.layouts.app')

@section('content')
    <div class="aiz-titlebar text-left mt-2 mb-3 ">
        <div class="row align-items-center">
            <div class="col-md-6">
                <h1 class="h3">{{ translate('All Sea Ports/ Airports') }}</h1>
            </div>
            <div class="col-md-6 text-md-right d-flex align-items-center">
                <a href="javascript:void(0);"  id="add_modal" class="add-items-btn ml-auto" data-toggle="modal"
                    data-target="#addPost-modal"><span><i class="icons icon-plus"></i></span> Add New Sea Ports/ Airports
                </a>

            </div>
        </div>
    </div>
    <div class="admin-list-table pt-0 ">
        <div class="d-flex align-items-center py-3">
            <div class="common-tbl-head m-0 ml-1 ">
                {{-- <div class="selected-prod border-0 pl-0">Selected Products (<span>0</span>)</div> --}}
                <div class="selected-prod border-0 pl-0"  style="display:none">Selected Sea Ports/ Airports (<span id="sProduct">0</span>)</div>
                <div class="delete-select" id="deletedData" style="display:none">
                    <a href="javascript:void(0);" id="delete_records">Delete Selected <i class="icons icon-delete"></i></a>
                </div>
            </div>
            <div class="table-search ml-auto">
                <i class="icons icon-search-s" id="memberSearch"></i>
                <input type="text" class="form-control" id="search" name="search" placeholder="Search">
            </div>
        </div>

        <div class="admin-table table-freezed " id="table_list">
             <div class="loader_main"  style="  position: relative;
    top: 50%;
    left: 40%;
    transform: translate(50%, 50%);
    width: 100px;
    height:50vh;
    text-align: center;">
 <img width="100" src="{{ url('public/assets/img/ZKZg.gif') }}">
        </div>
        </div>
    </div>
@endsection

@section('modal')
    <!-- Delete Modal -->
    @include('modals.delete_modal')



<div class="modal right fade addPost-modal seaport-airport" data-refresh="true" id="addPost-modal" role="dialog">
    <div class="modal-dialog" id="modals_datas">

    </div>
</div>
@endsection



@section('script')
    <script type="text/javascript">
        $(document).ready(function() {
            var urls = "{{ route('seaport.list') }}"
            data_index(urls);
            $(document).on('click', '#saveUnit', function() {
                var formData = new FormData($("#form-id")[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) {
                        $("#form-id .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 = $("#form-id input[name=" + k + "], #form-id textarea[name=" + k + "], #form-id select[name=" + k + "]").after(err);
                            });
                        } else {
                            AIZ.plugins.notify('success', 'Seaport created successfully');
                            var urls = "{{ route('seaport.list') }}"
                            data_index(urls);
                        }
                    }
                });
            });

            $(document).on('click', '#add_modal', function(event) {
                dataList();
            });

            $(document).on('click', '.edit_port', function(event) {
                let id = $(this).data('id');
                var url = "{{ url('/admin/seaport/edit') }}" + "/" + id;
                edit_blog(url);
            });

            /////////////////////////////// Edit & update seaport

            $(document).on('click', '#update_seaport', 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 = $("#form-id input[name=" + k + "], #form-id textarea[name=" + k + "], #form-id select[name=" + k + "]").after(err);
                            });
                        } else {
                            AIZ.plugins.notify('success', 'Ports Update successfully');
                            var urls = "{{ route('seaport.list') }}"
                            data_index(urls);
                        }
                    }
                });
            });

            $(document).on('click', '#deletebtn', function() {
                var url = $(this).data('href');
                var checkThis = $(this);
                var deleteModal = $('#delete-modal');
                deleteModal.modal({
                    backdrop: 'static',
                    keyboard: false
                });

                $('#delete-link').one('click', function(e) {
                    $.ajax({
                        url: url,
                        type: "GET",
                        success: function(obj) {
                            $('#delete-modal').modal('hide');
                            AIZ.plugins.notify('success', 'Sea Ports/ Airports deleted successfully');
                            loadStoredPagination();
                            // var urls = "{{ route('seaport.list') }}"
                            // data_index(urls);
                        }
                    });
                });
            });

            $('#delete-modal').on('hidden.bs.modal', function () {
                $(this).find('#delete-link').off('click');
            });

            ///////////////////////////////// Searching

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

            $(document).on("click", "#memberSearch", function(event) {
                var searchTerm = $("input[name='search']").val();
                memberSearchAjax(searchTerm);
            });

            function memberSearchAjax(searchTerm) {
                var urls = "{{ route('seaport.list') }}?search=" + searchTerm;
                data_index(urls);
            }


            /* $("#search").keyup(function(){
                var query  = $(this).val();
                var data =  'search='+ query;
                var url = "{{ route('seaport.list') }}?"+data
                data_index(url);
            });  */

            function loadStoredPagination() {
                var storedURL = localStorage.getItem('paginationURL');  
                
                if (storedURL) {
                    $.ajax({
                        url: storedURL,
                        cache: false,
                        success: function(data) { 
                            $("#table_list").html(data); 
                        }
                    });
                }
            } 
            
            $(document).on('click', 'a.page-link', function(event) {
                event.preventDefault();
                var url = $(this).attr('href');
                localStorage.setItem('paginationURL', url);
                $.ajax({
                    url: url,
                    cache: false,
                    success: function(html) {
                        $("#table_list").html(html);
                    }
                });
                $('#sProduct').text('0');
                $('#deletedData').hide();
                $('#restoreData').hide();
            });

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

            function dataList() {
                $.ajax({
                    url: "{{ route('seaport.create') }}",
                    type: 'GET',
                    success: function(data) {
                        $("#modals_datas").html(data);
                    }
                });
            }

            function data_index(url) {
                $.ajax({
                    url: url,
                    type: 'GET',
                    success: function(data) {
                        $("#table_list").html(data);
                    }
                });
            }

            ///////// Delete Multiple Data
            $(document).on('change', "#checkAll", function () {
                $(document).find(".checkedoptions input:checkbox").prop('checked', $(this).prop("checked"));
            });

            $(document).on('click', '#checkAll', function() {
                $("#sProduct").text("0");
                if ($(this).is(":checked")) {
                    $("#deletedData, .selected-prod").css("display", "block");
                    $("#restoreData").css("display", "block");
                    $(this).closest('table').find('#searchPage tr').addClass('active');
                } else {
                    $("#deletedData, .selected-prod").css("display", "none");
                    $("#restoreData").css("display", "none");
                    $(this).closest('table').find('#searchPage tr').removeClass('active');
                }
                $(".product_checkbox").prop("checked", this.checked);
                $("#select_count").html($("input.product_checkbox:checked").length + " Selected");
            });

            $(document).on('click', '.product_checkbox, #checkAll', function() {
                if ($(this).is(':checked')) {
                    $(this).closest('tr').addClass('active');
                } else {
                    $(this).closest('tr').removeClass('active');
                }
                
                const selectedCount = $('.product_checkbox:checked').length;
                $("#sProduct").text(selectedCount);

                if (selectedCount == $('.product_checkbox').length) {
                    $('#checkAll').prop('checked', true);
                } else {
                    $('#checkAll').prop('checked', false);
                }

                if (selectedCount == 0) {
                    $("#deletedData, .selected-prod").css("display", "none");
                    $("#restoreData").css("display", "none");
                } else {
                    $("#deletedData, .selected-prod").css("display", "block");
                    $("#restoreData").css("display", "block");
                }
            });

            $(document).on('click', '#delete_records', function() {
                var row = $(this).closest('tr');
                var products = [];
                var deleteModal = $('#delete-modal');
                $(".product_checkbox:checked").each(function() {
                    products.push($(this).val());
                });


                if (products.length <= 0) {
                    alert("Please select records.");
                } else {
                    var selected_values = products.join(",");
                    deleteModal.modal({
                        backdrop: 'static',
                        keyboard: false
                    });

                    $('#delete-link').one('click', function(e) {
                        $.ajax({
                            type: "POST",
                            headers: {
                                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                            },
                            url: "{{ url('/admin/seaport/multi_delete') }}",
                            cache: false,
                            data: 'emp_id=' + selected_values,
                            success: function(response) {
                                var emp_ids = response.split(",");
                                for (var i = 0; i < emp_ids.length; i++) {
                                    $("#" + emp_ids[i]).closest("tr").remove();
                                }
                                $("#sProduct").text("0");
                                if (emp_ids.length > 0) {
                                    AIZ.plugins.notify('success', 'Sea Ports/ Airports Deleted successfully');
                                    var urls = "{{ route('seaport.list') }}"
                                    data_index(urls);
                                } else {
                                    AIZ.plugins.notify('success', 'Sea Ports/ Airports Not Deleted successfully');
                                }
                                $('#delete-modal').modal('hide');
                                $("#deletedData").hide();
                            }
                        });
                    });
                }
            });
        });

    </script>
@endsection