@extends('Frontend.partials.layout')
@section('styles')
<link rel="stylesheet" href="{{ asset('/vendor/libs/select2/select2.css') }}">
@endsection
@section('content')

<style>
    #pkv-note-heading{
        width: 20% !important;
        max-width: 20%;
    }

    #pkv-name-heading,
    #pkv-date-heading{
        width: 200px !important;
        max-width: 200px;
    }

    #package-list-table_length,
    #package-list-table_filter,
    #package-list-table_info,
    #package-list-table_paginate {
        padding: 20px;
    }
    #note-modal .modal-dialog,
    #view-modal .modal-dialog{
        top: 80px;
        margin: auto;
    }
    #note-modal .modal-content {
        width: 100%;
    }

    #view-modal .modal-body {
        max-height: 75vh;
        overflow-y: auto;
        height: auto;
    }

    #check-all-heading{
        padding-left: 0px;
        padding-right: 0px;
        text-align: center;
        width: 80px !important;
    }
    #package-list-table tbody td.text-center{
        padding: 10px 0px !important;
        max-width: 80px;
    }
    #package-list-table tbody td.text-center .single-check {
        margin-top: 10px;
    }
    #package-list-table td.sorting_1 {
        padding-left: 10px !important;
    }

    .pkg-preloader{
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 9999;
        animation: movebg 30s infinite;
        opacity: 0.8;
        background-size: auto;
    }
    .pkg-preloader > div{
        display: flex;
        justify-content: center;
    }
    .pkg-preloader img{
        height: 160px;
        width: 160px;
        top: 100px;
        animation: rotating 5s linear infinite;
        position: absolute;
        content: '';
    }
    table#package-list-table span.unique-id {
        display: block;
        font-size: 14px;
        font-weight: 500;
        position: relative;
        margin: 5px auto;
    }
    @media only screen and (max-width: 1760px){
        #package-list-table_wrapper thead tr th:nth-child(4){
            width: 22% !important;
        }
        #package-list-table_wrapper .sorting_disabled{
            width: 40% !important;
        }
    }    
    
    @media only screen and (max-width: 1200px){
        #package-list-table_wrapper thead tr th:nth-child(4){
            width: 20% !important;
        }
        #package-list-table_wrapper .sorting_disabled{
            width: 49% !important;
        }
    }    
    
    @media only screen and (max-width: 992px){
        #package-list-table_wrapper thead tr th:nth-child(4){
            width: 26% !important;
        }
        #package-list-table_wrapper .sorting_disabled{
            width: 38% !important;
        }

        #package-list-table_wrapper > div.row:nth-child(2) > .col-sm-12,
        .dataTables_scroll,
        .dataTables_scrollHead,
        .dataTables_scrollHeadInner {
            width: 1200px !important;
            overflow-x: scroll !important;
        }
    }
</style>
{{-- pakeage list section --}}
<section class="package-list">
    <div class="row">
        {{-- col-6 content header --}}
        <div class="col-md-6">
            <div class="analysis-content-header d-flex align-items-center">
                <div class="logo">
                    <i class="fas fa-home primary-color"></i>
                </div>
                <div class="heading primary-color">
                    <h2>{{__('action.show_cart')}}</h2>
                </div>
            </div>
        </div>
        <div class="col-md-6 d-flex justify-content-end button-demo">
            <button class="btn btn-danger hide" id="delete_all_saved_cart"><i class="fas fa-trash">&nbsp;</i>{{trans('action.delete_all')}}</button>
        </div>
    </div>

    {{-- @if(count($data['userDetails']->cartpackages) > 50 )
    @php
        $data['userDetails']->cartpackages = $data['userDetails']->cartpackages()->offset(0)->limit(50)->get()
    @endphp --}}
    {{-- @endif --}}
    {{-- @dd($data['packages']->lastPage()) --}}

        {{-- Filters --}}
        @if (auth()->user()->user_type != 0)
        <div class="ui-bordered px-4 pt-4 my-4 bg-white card">
            <div class="form-row align-items-center">
                <div class="col-md-4 col-lg-3 col-sm-4 mb-4 user-select-box">
                    <label class="form-label f-14">{{trans('action.selected_user')}}</label>
                    <select id="user-select" data-style="btn-light col-md-12">
                    </select>
                </div>
    
                <div class="col-md-8 col-lg-9 col-sm-8 mb-4">
                    <label class="form-label f-14"></label>
                    <br>
                    <button class="mr-1 btn btn-success ladda-button" id="user-filter-btn" data-style="zoom-in">
                        <span class="ladda-label"><i class="fas fa-filter">&nbsp;</i>{{trans('action.select_filter')}} </span>
                        <div class="ladda-progress" style="width: 121px;"></div>
                        <span class="ladda-spinner"></span>
                    </button>
    
                    <button class="btn btn-warning ladda-button" id="filter-refresh-btn" data-style="zoom-in">
                        <span class="ladda-label"><i class="ion ion-md-refresh">&nbsp;</i>{{trans('action.refresh')}}</span>
                        <div class="ladda-progress" style="width: 121px;"></div>
                        <span class="ladda-spinner"></span>
                    </button>
                </div>
            </div>
        </div>
        @endif
        {{-- Filters --}}

    {{-- Data table --}}
    <div class="mt-2">
        <div class="table-responsive bg-white">
            <table id="package-list-table" class="table table-striped table-bordered">
                <thead class="font-weight-bold">
                    <tr class="font-weight-bold">
                        <th><input type="checkbox" id="check-all"></th>  
                        <th>{{ trans("action.Name") }}</th>
                        <th>{{ trans("action.log_datetime") }}</th>
                        <th>{{ trans("action.save_cart_note") }}</th>
                        <th>{{ trans("action.options") }}</th>
                    </tr>
                </thead>
                
            </table>
        </div>
    </div>

    <!-- Note Modal -->
    <div class="modal modal-top fade" id="note-modal">
        <div class="modal-dialog">
            <form class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">
                        {{__('action.save_cart_note')}}
                    </h5>
                    <button type="button" class="close" data-dismiss="modal"
                        aria-label="Close">×</button>
                </div>
                <div class="modal-body">
                    <div class="form-group">
                        <textarea class="form-control" id="noteContent" name="noteContent" rows="5"></textarea>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-success" id="noteAddSaveCart" >{{__('action.save')}}</button>
                    <button type="button" class="btn btn-default" data-dismiss="modal">{{__('action.close')}}</button>
                </div>
            </form>
        </div>
    </div>

    <!-- View Modal -->
    <div class="modal modal-top fade" id="view-modal">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">
                        {{__('action.cart_package_content')}}
                    </h5>
                    <button type="button" class="close" data-dismiss="modal"
                        aria-label="Close">×</button>
                </div>
                <div class="modal-body">
                    <ul></ul>
                </div>
                {{-- <div class="modal-footer"></div> --}}
            </div>
        </div>
    </div>

    {{-- preloader --}}
    <div class="pkg-preloader">
        <div>
            <img src="{!! asset('images/Fill-4.png') !!}" alt="preloader">
        </div>
    </div>
</section> 
{{-- pakeage list section /--}}
<script src="{{ asset('/vendor/libs/select2/select2.js') }}"></script>

<script type="text/javascript">
    $("#check-all").prop("checked",false);
    $(document).on("click",".page-link, .custom-select",function(){
        $("#check-all").prop("checked",false);
        $(document).find("#delete_all_saved_cart").addClass("hide")
    })

    $(document).ready(function(){
        const userId = "{{ (getAuthId() != getUserId()) ? getUserId() : null }}"
        loadDataTable(userId);

        function loadDataTable(user = null) {
            $('#package-list-table').DataTable({
                language: {
                    sEmptyTable: `{{trans('action.table_norecord')}}`,
                    sLoadingRecords: `{{ trans('action.table_loading')}}`,
                    sProcessing: `{{trans('action.table_pleasewait')}}`,
                    sSearch: `{{trans('action.search')}}`,
                    sZeroRecords: `{{trans('action.table_nodata')}}`,
                    sLengthMenu: "{{trans('action.datatable_show')}} _MENU_ {{trans('action.table_entries')}}",
                    sInfo: "_START_ {{trans('action.datatable_to')}} _END_ {{trans('action.cron_setting_from')}} _TOTAL_ {{trans('action.table_entries')}}",
                    sInfoEmpty: "{{trans('action.table_nodata')}}",
                    infoFiltered: "{{trans('action.datatable_filtered_result')}}",
                    sorting: 'custome',
                    sorting_asc: 'custome_asc',
                    sorting_desc: 'custome_desc',
                    oPaginate: {
                        sFirst: `{{trans('action.table_first')}}`,
                        sPrevious: `{{trans('action.table_back')}}`,
                        sNext: `{{trans('action.table_next')}}`,
                        sLast: `{{ trans('action.table_latest')}}`,
                    }
                },
                search: {
                    return: true,
                },
                button: false,
                searching: true,
                scrollY: true,
                scrollX: false,
                scrollCollapse: true,
                processing: true,
                serverSide: true,
                ajax:{
                    url:"{{ route('dashboard.get-pkv-data') }}",
                    type: "GET",
                    data: {
                        user: user
                    }
                },
                columns: [
                    {
                        data:"id",                        
                        width: '5%',
                        orderable: false,
                        searchable: false,
                        className:"text-center",
                        render: function (data,type,row) {
                            return `<input type="checkbox" class="single-check" data-id='${row.id}' id="single-check">`;
                        }
                    }, 
                    {
                        data: 'package_name',
                        name: 'cart_packages.package_name',
                        orderable: true,
                        searchable: true,
                        width: '20%',
                        render: function (data, type, row) {
                            return '<span class="package-name">' + row.package_name + '</span> <span class="unique-id">' + row.unique_id + '</span>';
                        }
                    },
                    {
                        data: 'created_at',
                        name: 'cart_packages.created_at',
                        orderable: true,
                        searchable: true,
                        width: '10%'
                    },
                    {
                        data: 'note',
                        name: 'cart_packages.note',
                        orderable: false,
                        searchable: true,
                        width: '30%'
                    },
                    {
                        data: 'action',
                        name: 'action',
                        orderable: false,
                        searchable: false,                        
                        width: '10%'
                    }
                ]
            });
        }

        function addNote(cart_id){
            let action= "{{ route('Sajax.addNotePKG') }}";
            var note = $("#note-modal").find("#noteContent").val();
            
            $.ajax({
                type:'POST',
                url:action,
                beforeSend: function(){
                    Swal.fire({
                        title: `{{__('action.processing')}}`,
                        imageUrl: "{!! asset('/') !!}"+"ezgif.com-gif-maker.webp",
                        showConfirmButton: false,
                        allowOutsideClick: false,
                        confirm: true,
                        showLoaderOnConfirm: true,
                        width: '300px',
                        height: '180px'
                    })
                },
                data: {
                    id : cart_id,
                    note : note
                },
                dataType:"json",
                success:function(data){
                    if (data.success == true) {
                        Swal.close();
                        toastr.warning(`{{__('action.note_save')}}`);
                        $('#packages_'+data.cart_id).hide();

                    }
                },
                error:function(data){
                    // console.log(data);
                }
            });
        }

        $("#check-all").change(function(){            
            if ($(this).is(":checked")) {
                $("input.single-check").prop("checked", this.checked);
                $("#delete_all_saved_cart").removeClass("hide");
            } else{
                $("input.single-check").prop("checked", false);
                $("#delete_all_saved_cart").addClass("hide");
            }
        });

        $("#delete_all_saved_cart").click(function () {
            let packageId = [];
            $("input.single-check:checked").each(function() {
                packageId.push($(this).data("id"));
            });
            deletePackage(packageId);
        });

        // The filter code starts here
        $("#user-select").select2({
            placeholder: "{{trans('action.cronSelectUser')}}",
            tags: true,
            tokenSeparators: [',']
        });

        $("#user-select").append(`<option value="">{{trans('action.cronSelectUser')}}</option>`);
        
        $.ajax({
            url: '{{ route("get-subusers") }}',
            dataType: "json",
            type: "GET",
            success: function (data) {
                const loggedInUser = "{{ getUserId() }}";
                $(data.users).each(function() {
                    $("#user-select").append(`<option value="${this.id}" ${(this.id == loggedInUser) ? "selected" : ""}>${this.first_name} ${this.last_name}</option>`);
                });
            },
            error:function(data){
                // console.log(data);
            }
        });

        // filter
        $('#user-filter-btn').click(function(){
            const selectedUser = $("#user-select option:selected").val();

            $('#package-list-table').DataTable().destroy();
            loadDataTable(selectedUser);
        });

        // refresh datatable
        $('#filter-refresh-btn').click(function(){
            $("#user-select").val('').change();

            $('#package-list-table').DataTable().destroy();
            loadDataTable();
        });
    });

    $(document).on("change","input.single-check",function(){
        let checkboxCount = $("input.single-check:checked").length;
        let totalView = $("[name=package-list-table_length]").val()
        if(totalView !== checkboxCount){
            $("#check-all").prop("checked",false);
        }
        else if(totalView == checkboxCount) {
            $(document).find("#check-all").prop("checked",true);
        }

        if (checkboxCount >= 2) {
            $("#delete_all_saved_cart").removeClass("hide");
        } else{
            $("#delete_all_saved_cart").addClass("hide");
        }
    });
</script>
@endsection