@use('App\Services\Date')
@extends('companyuser::layouts.master')
@section('title', __('sales::customer_receipts.Customer Receipts'))
@section('extra-styles')
<link href="{{asset('assets/css/filter.css') }}" rel="stylesheet">
<link rel="stylesheet" href="{{asset('assets/vendors/css/pickers/daterange/daterangepicker.css')}}">
<link href="{{asset('assets/css/custom/modal/style.css') }}" rel="stylesheet">
<link href="{{asset('assets/css/style-svgFont.css') }}" rel="stylesheet">
<script src="{{ asset('/js/app.js') }}" defer></script>
<style>
    a.disabled {
        pointer-events: none;
        cursor: default;
    }
</style>
@endsection

@push('extra_scripts')

<script src="{{asset('assets/js/vendors/js/pickers/dateTime/moment-with-locales.min.js')}}" defer></script>
<script src="{{asset('assets/js/vendors/js/pickers/daterange/daterangepicker.js')}}" defer></script>
<script src="{{ asset('assets/js/custom/daterangepicker.js') }}" defer></script>
<script src="{{ asset('assets/js/scripts/modal/components-modal.js') }}" defer></script>
@endpush
@section('breadcrumb')
<div class="row breadcrumbs-top">
    <div class="breadcrumb-wrapper col-xs-12">
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a>@lang('companyuser::sidebar.Sales')</a></li>
            <li class="breadcrumb-item active"><a href="#">@lang('companyuser::sidebar.Customer Receipts')</a></li>
        </ol>
    </div>
</div>
@endsection
@section('content')
<section>
    <div class="container-fluid">
        <div class="col-xs-6 headTitle">
            <h3 class="py-half">@lang('sales::customer_receipts.Customer Receipts')</h3>
        </div>
        <div class="headBtns fixed-btns" style="padding-bottom: 10px;">
            @can('sales.customer-receipts.create')
            <a class="text-white pull-right" href="{{route('company.customer-receipts.create', $subdomain)}}">
                <span class="icon-Add action-icon" @if(!$accountingSettingsCount) disabled @endif></span>
            </a>
            @endcan
                <div class="mb-1 pull-left">
                    <a href="{{route('company.customers-receipts.export', ['subdomain' => $subdomain, 'status' => request('status'), 'from' => request('from'), 'to' => request('to'),'to_export' => true]+request()->all())}}" class="{{!count($customerPaymentReceipts) ? 'disabled' : ''}} pull-left" title="@lang('reports::reports.download_excel')">
                        <span class="icon-Excel action-icon"></span>
                    </a>
                    <a href="{{route('company.customers-receipts.exporting-pdf', ['subdomain' => $subdomain, 'status' => request('status'), 'from' => request('from'), 'to' => request('to'),'to_export' => true]+request()->all())}}" class="{{!count($customerPaymentReceipts) ? 'disabled' : ''}} pull-left" title="@lang('reports::reports.Download_Pdf')">
                        <span class="icon-Pdf action-icon"></span>
                    </a>
                    <a href="{{route('company.customers-receipts.print-customer-receipts-list', ['subdomain' => $subdomain, 'status' => request('status'), 'from' => request('from'), 'to' => request('to'),'to_export' => true]+request()->all())}}" class="{{!count($customerPaymentReceipts) ? 'disabled' : ''}} pull-left" target="_blank" title="@lang('Print')">
                        <span class="icon-Print action-icon"></span>
                    </a>
                </div>
        </div>
        @include('companyuser::errors.all')
        @include('companyuser::errors.lists')
        <div id="frontend-validation-errors"></div>

        <div class="mt-1">
            <button class="btn btn-primary w-100 filterbtn" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
                <div class="d-flex justify-content-between">
                    <span>@lang('Filter') </span><i class="fa fa-angle-down"></i>
                </div>
            </button>
        </div>
        @if( !$accountingSettingsCount)
        <div class="row">
            <div class="col-md-12  col-xs-12 text-center">
                <div class="alert alert-white settings-alert"> @lang('superadmin::Dashboard.Please set your ')
                    <a href="{{route('company.accounting-settings.index', $subdomain)}}">@lang('settings::general_settings.accounting settings')</a>
                    @lang('superadmin::Dashboard.to start adding accounting transactions')
                </div>
            </div>
        </div>
        @endif
        <div class="collapse filter-section-collapse" id="collapseExample">
            <form action="{{ route('company.customer-receipts.index', ['subdomain' => $subdomain]) }}" method="GET" class="form form-horizontal striped-rows form-bordered dev-form-validate" novalidate>
                @csrf
                <div class="card card-body mb-0">
                    <div class="row">
                        <div class="col-lg-6">
                            <div class="form-group">
                                <div class="row">
                                    <div class="col-md-12">
                                        <label for="customer">@lang('sales::customer_receipts.Customer')</label>
                                    </div>
                                    <div class="col-md-12 mb-1">
                                        <customers-dropdown-component 
                                        :selected="{{ 
                                            json_encode(\Modules\Sales\Models\Customer::getForDropdown(request('customer'))) 
                                        }}"
                                        :create-new="true"
                                            :create-new-url="'{{ route('company.customers.create', ['subdomain' => $subdomain, 'reference' => 'customer-receipts', 'attachment_id' => request('attachment_id'), 'type' => request('type')]) }}'"
                                            :lang="'{{ app()->getLocale() }}'"
                                            :multi-select="false"
                                            input-name="customer"
                                            :translations="{
                                                 placeholder: '{{ __("sales::customers.select_customer") }}',
                                                searchPlaceholder: '{{ __("sales::customers.search_customers") }}',
                                                createNewText: '{{ __("sales::customers.add_new_customer") }}',
                                                noResultsText: '{{ __("sales::customers.no_customers_found") }}',
                                            }"
                                            class="w-100"
                                        />
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-6">
                            <div class="form-group">
                                <div class="row">
                                    <div class="col-md-12">
                                        <label for="kind">@lang('sales::customer_receipts.Kind')</label>
                                    </div>
                                    <div class="col-md-12 mb-1">
                                        <select name="kind" id="kind" class="w-100 py-1 form-control select2-tag h-45" style="width: 100%;">
                                            <option value="">@lang('All')</option>
                                            @forelse(Modules\Purchases\Enums\PaymentReceiptTypesEnum::translatedPaymentReceiptTypesList() as $key => $kind)
                                                <option @if(request('kind') == $key) selected @endif value="{{$key}}">{{$kind}}</option>
                                            @empty
                                            @endforelse
                                        </select>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-lg-6">
                            <div class="form-group">
                                <div class="row">
                                    <div class="col-md-12">
                                        <label for="category">@lang('sales::customer_receipts.Date')</label>
                                    </div>
                                    <div class="col-md-6">
                                        <x-date-picker 
                                            name="date_from" 
                                            :value="request('date_from')"
                                            input-class="h-45 "
                                            :is-invalid="$errors->has('date_from')"
                                        />
                                        @error('date_from')
                                        <div class="invalid-feedback text text-danger w-100 d-block" role="alert">
                                            <p>{{ $message }}</p>
                                        </div>
                                        @enderror
                                    </div>
                                    <div class="col-md-6">
                                        <x-date-picker 
                                            name="date_to" 
                                            :value="request('date_to')"
                                            input-class="h-45 "
                                            :is-invalid="$errors->has('date_to')"
                                        />
                                        @error('date_to')
                                        <div class="invalid-feedback text text-danger w-100 d-block" role="alert">
                                            <p>{{ $message }}</p>
                                        </div>
                                        @enderror
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-6">
                            <div class="form-group">
                                <div class="row">
                                    <div class="col-md-12">
                                        <label for="category">@lang('sales::customer_receipts.Amount')</label>
                                    </div>
                                    <div class="col-md-6">
                                        <input type="number" name="amount_from" value="{{ request('amount_from') }}" class="form-control h-45 mb-1" placeholder="@lang('from')">
                                    </div>
                                    <div class="col-md-6">
                                        <input type="number" name="amount_to" value="{{ request('amount_to') }}" class="form-control h-45 mb-1" placeholder="@lang('to')">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-lg-6">
                            <div class="col-md-12 w-100-ipad-portrait pl-0 ml-0">
                                <label for="cost_center_id" style="font-size: 13px;">@lang('products::cost_center.Cost Center')</label>
                            </div>
                            <div class="col-md-12 w-100-ipad-portrait pl-5 pr-5 mb-1 padd0">
                                <select name="cost_center_id" id="cost_center_id" class="w-100 py-1 form-control select2-tag h-45" style="width:100%">
                                    @can('cost-center.main-center.view')
                                    <option value="">{{__('All')}}</option>
                                    <option @if(request('cost_center_id')=='main_center' ) selected @endif value="main_center">{{__('products::cost_center.main center')}}</option>
                                    @endcan
                                    @foreach($costCenters as $costCenter)
                                    @if($costCenter->parent_id)
                                    <option @if(request('cost_center_id')==$costCenter->id) selected @endif value="{{$costCenter->id}}">{{$costCenter->code}}
                                        {{ app()->getLocale() == 'ar' ? $costCenter->name_ar : $costCenter->name_en }}
                                    </option>
                                    @else
                                    <option @if(request('cost_center_id')==$costCenter->id) selected @endif value="{{$costCenter->id}}">{{$costCenter->code}} -
                                        {{ app()->getLocale() == 'ar' ? $costCenter->name_ar : $costCenter->name_en }}
                                    </option>
                                    @endif
                                    @endforeach
                                </select>
                            </div>
                        </div>
                        <div class="col-lg-6">
                            <div class="form-group">
                                <div class="row">
                                    <div class="col-md-12">
                                        <label for="category">@lang('sales::customer_receipts.Not Allocated Amount')</label>
                                    </div>
                                    <div class="col-md-6">
                                        <input type="number" name="not_allocated_amount_from" value="{{ request('not_allocated_amount_from') }}" class="form-control h-45" placeholder="@lang('from')">
                                    </div>
                                    <div class="col-md-6">
                                        <input type="number" name="not_allocated_amount_to" value="{{ request('not_allocated_amount_to') }}" class="form-control h-45" placeholder="@lang('to')">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-lg-6">
                            <div class="form-group">
                                <div class="row">
                                    <button class="dropdown-item" type="button">
                                        <fieldset>
                                            <label class="custom-control custom-checkbox">
                                                <input type="checkbox" class="custom-control-input" name="old_year_receipts" @if(request('old_year_receipts')) checked @endif>
                                                <span class="custom-control-indicator"></span>
                                                <span class="custom-control-description">@lang('sales::customer_receipts.Old years Receipts')</span>
                                            </label>
                                        </fieldset>
                                    </button>

                                    <button class="dropdown-item" type="button">
                                        <fieldset>
                                            <label class="custom-control custom-checkbox">
                                                <input type="checkbox" class="custom-control-input" name="current_year_receipts" @if(request('current_year_receipts')) checked @endif>
                                                <span class="custom-control-indicator"></span>
                                                <span class="custom-control-description">@lang('sales::customer_receipts.Current year Receipts')</span>
                                            </label>
                                        </fieldset>
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="text-left mt-2">
                        <button type="submit" class="btn btn-info mr-1 mb-1 p-5">
                            <img src="{{asset('assets/images/Done.png') }}" alt="done" width="35px">
                        </button>
                        <button type="reset" id="reset" class="btn btn-warning mb-1 p-5"> <span class="icon-Delete f-32"></span></button>
                    </div>
                </div>
        </form>
        </div>
        <section id="configuration">
            <div class="row mt-2">
                <div class="col-xs-12">
                    <div class="card">
                        <div class="card-body collapse in">
                            <div>
                                <table id="customer_receipts_table" class="table table-striped" style="width:100%;display: inline-table;">
                                    <thead>
                                        <tr>
                                            <th>@lang('sales::customer_receipts.Reference ID')</th>
                                            <th style="width: 20%">@lang('sales::customer_receipts.Customer')</th>
                                            <th>@lang('sales::customer_receipts.Date')</th>
{{--                                            <th>@lang('sales::customer_receipts.Creation Date')</th>--}}
                                            <th>@lang('sales::customer_receipts.Kind')</th>
                                            <th>@lang('products::cost_center.Cost Center')</th>
                                            <th>@lang('sales::customer_receipts.Amount')</th>
                                            <th>@lang('sales::customer_receipts.Not Allocated Amount')</th>
                                            <th>@lang('Actions')</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                    </tbody>
                                </table>
                                <modal
                                    :type="{{ json_encode(__('sales::customer_receipts.Receipt')) }}"
                                    :allocation="{{ json_encode(__('sales::customer_receipts.allocation')) }}"
                                    :remaningamount="{{json_encode(__('sales::customer_receipts.remaningAmount')) }}"
                                    :unpaidtype="{{json_encode(__('sales::customer_receipts.unpaidtype')) }}"
                                    :Youhavetoasignselectedreceiptamountto="{{json_encode(__('sales::customer_receipts.You have to assign receipts to be linked with this')) }}"
                                    :referenceid="{{json_encode(__('sales::customer_receipts.ReferenceID')) }}"
                                    :date="{{json_encode(__('sales::customer_receipts.Date')) }}"
                                    :amount="{{json_encode(__('sales::customer_receipts.Amount')) }}"
                                    :assigned="{{json_encode(__('sales::customer_receipts.assign')) }}"
                                    :totalstring="{{json_encode(__('sales::customer_receipts.totalString')) }}"
                                    :outstanding="{{json_encode(__('sales::customer_receipts.outstanding')) }}"
                                    :save="{{ json_encode(__('Save')) }}"
                                    :cancel="{{ json_encode(__('Cancel')) }}"
                                    :showing="exampleModalShowing"
                                    @close="exampleModalShowing = false"
                                    :csrf="{{ json_encode(csrf_token()) }}"
                                    :lang="{{ json_encode(app()->getLocale()) }}"
                                    :bills="bills = []"
                                    :receipt="receiptObject = {}"
                                    :route="route = ''"
                                    :allocated="{{json_encode(__('sales::customer_receipts.allocated')) }}"
                                    :search="{{ json_encode(__('purchases::purchase_bills.search')) }}"
                                    :loading-text="{{ json_encode(__('sales::customer_receipts.Loading invoices...')) }}"
                                    :load-error-text="{{ json_encode(__('sales::customer_receipts.Failed to load invoices. Please try again.')) }}">

                                </modal>
                                {{---------------- popup to deleted customer payment receipt -------------------------------}}
                                {{-- to the man in the future who wana refactor this popup te be genric in all the system  --}}
                                {{-- just take care here there is 2 popups one if the balance is zero and other if balance not zero --}}
                                <div class="modal fade" id="favoritesModal" tabindex="-1" role="dialog" aria-labelledby="favoritesModalLabel">
                                    <div class="modal-dialog" role="document">
                                        <div class="modal-content">
                                            <div class="modal-header">
                                                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                                    <span aria-hidden="true">&times;</span></button>
                                                <h4 class="modal-title" id="favoritesModalLabel">@lang('Delete')
                                                </h4>
                                            </div>
                                            <div class="modal-body">
                                                <p>
                                                    @lang('sales::customer_receipts.delete confirmation message')
                                                </p>
                                            </div>
                                            <div class="modal-footer">
                                                <button type="button" class="btn btn-default mx-1" data-dismiss="modal">@lang('Cancel')</button>
                                                <span class="@if(app()->getlocale() == 'ar') pull-right @else pull-left @endif mx-1">
                                                    <form action="" method="POST" class="form delete-form" id="deleteInvoice">
                                                        @csrf
                                                        @method('delete')
                                                        <button type="submit" class="btn btn-primary" id="deleteInvoiceBtn"></button>
                                                    </form>
                                                </span>
                                                <span class="@if(app()->getlocale() == 'ar') pull-right @else pull-left @endif mx-1">
                                                    <form action="" method="POST" class="form delete-form" id="deleteInvoiceWithEntries">
                                                        @csrf
                                                        @method('delete')
                                                        <button type="submit" class="btn btn-primary">@lang('sales::invoices.Delete accounting data')</button>
                                                    </form>
                                                </span>
                                            </div>
                                        </div>
                                    </div>
                                </div>


                                {{---------------- popup for cloning customerPaymentReceipt confirmation -------------------------------}}
                                <div class="modal fade" id="cloneModal" tabindex="-1" role="dialog" aria-labelledby="favoritesModalLabel">
                                    <div class="modal-dialog" role="document">
                                        <div class="modal-content">
                                            <div class="modal-header">
                                                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                                    <span aria-hidden="true">&times;</span></button>
                                                <h4 class="modal-title" id="favoritesModalLabel">@lang('Clone')</h4>
                                            </div>
                                            <div class="modal-body">
                                                <p>
                                                    @lang('sales::customer_receipts.clone confirmation message')
                                                </p>
                                            </div>
                                            <div class="modal-footer">
                                                <button type="button" class="btn btn-default mx-1" data-dismiss="modal">@lang('Cancel')</button>
                                                <span class="pull-right">
                                                    <form action="" method="GET" class="form delete-form">
                                                        <button type="submit" class="btn btn-primary">@lang('Continue')</button>
                                                    </form>
                                                </span>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <input type="text" id="max_delete_date" value="{{Date::now('date')}}" hidden>
        </div>
    </section>
@endsection

@section('extra_scripts')
    <script>
        gtag('event', 'web_sales_customer_receipt_list');
        console.log('web_sales_customer_receipt_list event');
    </script>
{{-- this jquery simulate library to fire native events on selected element instead of
    the normal jquery event (which is not native event) and this to match the vue click event which relies on the native events --}}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-simulate/1.1.1/jquery.simulate.min.js" integrity="sha512-99l4kQHM730187dXruSGULp7g34xamOKXWXHrzz1HuKuKrLg/VBpRTbbI8in5g8lUnzJkchunWlHlHznEbQzAw==" defer crossorigin="anonymous"></script>

<script>
    window.addEventListener('DOMContentLoaded', function() {
        $(document).ready(function() {
            $("body").on("click",".filterbtn",function(){
                let url = new URL(window.location.href);
                let date_from = url.searchParams.get("date_from");
                if($("#collapseExample").hasClass("in") == false && $("#collapseExample").hasClass("dateCheck") == false  && (date_from == '' ||  date_from == null)){

                    $(".singledate").val("");
                    $("#collapseExample").addClass("dateCheck");
                }
            })
            // For A Delete Record Popup
            // $('.delete-item').click(function () {
            //     var modal = $(this).attr('data-target');
            //     var url = $(this).attr('data-url');
            //     $(modal + ' .delete-form').attr("action", url);
            // });

            // the problem was in jquery datatable responsive small screen is that, the datatable hides the the action buttons and
            // create new row appears when you click on the plus icon in small screens,
            // the problem was that new created row dosn't have the vue click event
            // (if that was jquery event it would've been very easy to fix by making $(document).on('click') but the problem was that the
            // the click event was vue and the datatable is jquery, the problem was in that comination)
            // The solution after so many tries : added class to that button and on click check the current tr if it has class child
            // so it means that is the new created row (note : the datatable creats the new row-tr- with class child  )
            // and then go to the previes tr which have the hidden button with click event and trigger click event on it
            // (note : here we used simulate libarary to trigger native click event which vue relies on instead of the jquery click event
            // that triggers by click() or trigger(click) )
            $(document).on('click', '.assign-receipt-btn', function() {
                let parentTr = $(this).closest('tr');
                if (parentTr.hasClass('child')) {
                    let previesTr = parentTr.prev();
                    let lastTd = previesTr.children().last();
                    lastTd.children('.assign-receipt-btn').simulate("click");
                }
            });
            //to reset filter dropdown menus
            $('#reset').click(function(e) {
                e.preventDefault()
                // here we made it val to work in both inputs and dropdown menu
                $('.form-control').val("");
                $('.select2-tag').select2({
                    allowClear: true
                });
                $('.select2-selection__clear').text("");
                // or prop('selectedIndex',0);
            })


            // disable the other checkbox when one is selected
            $('.custom-control-input').on('change', function() {
                // disbale both checkboxes, then enable the just the selected one to be submitted
                // (this to allow to select just one from the two options, so if user selected one option this will remove the other
                // beacause we disable all then enable just the selected option)
                $('.custom-control-input').prop('checked', false);
                $(this).prop('checked', true);

                //this.form.submit()
            });
            $("#customer_receipts_table").DataTable({
                processing: true,
                serverSide: true,
                search: true,
                ajax: {
                    url: "{{route('company.customer-receipts.index',$subdomain)}}",
                    data: