@use('App\Services\Date')
@extends('companyuser::layouts.master')
@section('title', __('purchases::supplier_receipts.Supplier Receipts'))
@section('extra-styles')
<link rel="stylesheet" type="text/css" href="{{asset('assets/css/filter.css') }}">
<link rel="stylesheet" type="text/css" href="{{asset('assets/vendors/css/pickers/daterange/daterangepicker.css')}}">
<link rel="stylesheet" type="text/css" href="{{asset('assets/css/custom/modal/style.css') }}">
<link rel="stylesheet" type="text/css" href="{{asset('assets/css/style-svgFont.css') }}">
<script src="{{ asset('js/app.js') }}" defer></script>
<style>
    .pl-5 {
        padding-left: 5px;
    }

    .pr-5 {
        padding-right: 5px;
    }

    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>
<script src="{{ asset('assets/js/custom/exportPdf.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.Purchases')</a></li>
            <li class="breadcrumb-item active"><a href="#">@lang('companyuser::sidebar.Supplier 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('purchases::supplier_receipts.Supplier Receipts')</h3>
        </div>
        <div class="headBtns fixed-btns" style="padding-bottom: 10px;">
            <div class="btn-group pull-right">
                @can('purchases.supplier-receipts.create')
                <a class="text-white" href="{{route('company.supplier-receipts.create', $subdomain)}}" @if(!$accountingSettingsCount) disabled @endif title="@lang('Add')">
                    <span class="icon-Add action-icon"></span>
                </a>
                @endcan
            </div>
            <!--check for right permissions      -->
            <div class="mb-1">
                <a href="{{route('company.suppliers-receipts.export', ['subdomain' => $subdomain, 'to_export' => true]+request()->all())}}" class="{{!count($supplierPaymentReceipts) ? 'disabled' : ''}} pull-left" title="@lang('reports::reports.download_excel')">
                        <span class="icon-Excel action-icon"></span>
                </a>

                <a href="{{route('company.suppliers-receipts.export-pdf', ['subdomain' => $subdomain, 'to_export' => true]+request()->all())}}" class="{{!count($supplierPaymentReceipts) ? 'disabled' : ''}} pull-left" title="@lang('reports::reports.Download_Pdf')">
                    <span class="icon-Pdf action-icon"></span>
                </a>
                <a href="{{route('company.suppliers-receipts.export-print', ['subdomain' => $subdomain, 'to_export' => true]+request()->all())}}" class="{{!count($supplierPaymentReceipts) ? '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 ')&nbsp;
                    <a href="{{route('company.accounting-settings.index', $subdomain)}}">
                        @lang('settings::general_settings.accounting settings') </a>
                    &nbsp;
                    @lang('superadmin::Dashboard.to start adding accounting transactions')
                </div>
            </div>
        </div>
        @endif


        <div class="collapse filter-section-collapse" id="collapseExample">
            <form action="{{route('company.supplier-receipts.index', ['subdomain' => $subdomain])}}" method="GET" id="filter-form" class="form form-horizontal striped-rows form-bordered dev-form-validate" novalidate>
            <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="category">@lang('purchases::supplier_receipts.Supplier')</label>
                                </div>
                                <div class="col-md-12 mb-1">
                                    <suppliers-dropdown-component
                                            :selected="{{ 
                                                json_encode(\Modules\Purchases\Models\Supplier::getForDropdown(request('supplier')))
                                             }}"
                                             :create-new="true"
                                             :create-new-url="'{{ route('company.suppliers.create', ['subdomain' => $subdomain]) }}'"
                                             :lang="'{{ app()->getLocale() }}'"
                                             :multi-select="false"
                                             :input-name="'supplier'"
                                             :display-key="'name'"
                                             :translations="{
                                                placeholder: '{{ __('purchases::supplier_receipts.select supplier') }}',
                                                searchPlaceholder: '{{ __('purchases::suppliers.search_suppliers') }}',
                                                noResultsText: '{{ __('purchases::suppliers.no_suppliers_found') }}',
                                                createNewText: '{{ __('purchases::suppliers.add_new_supplier') }}'
                                             }"
                                        />
                                </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('purchases::supplier_receipts.Kind')</label>
                                </div>
                                <div class="col-md-12">
                                    <select name="kind" class="w-100 py-1 form-control select2-tag h-45" style="width:100%">
                                        <option value="" disabled selected>{{ __('All') }}</option>
                                        @foreach(Modules\Purchases\Enums\PaymentReceiptTypesEnum::translatedPaymentReceiptTypesList() as $key => $value)
                                            <option value="{{ $key }}" {{ request('kind') == $key ? 'selected' : '' }}>{{ $value }}</option>
                                        @endforeach
                                    </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('purchases::supplier_receipts.Date')</label>
                                </div>
                                <div class="col-md-6  w-50-ipad-portrait mb-half">
                                    <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  w-50-ipad-portrait mb-half">
                                    <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('purchases::supplier_receipts.Amount')</label>
                                </div>
                                <div class="col-md-6">
                                    <input type="number" class="form-control h-45" name="amount_from" value="{{request('amount_from')}}" placeholder="{{__('from')}}">
                                </div>

                                <div class="col-md-6">
                                    <input type="number" class="form-control h-45" name="amount_to" value="{{request('amount_to')}}" placeholder="{{__('to')}}">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row mt-2">
                    <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('purchases::supplier_receipts.Not Allocated Amount')</label>
                                </div>
                                <div class="col-md-6">
                                    <input type="number" class="form-control h-45" name="not_allocated_amount_from" value="{{request('not_allocated_amount_from')}}" placeholder="{{__('from')}}">
                                </div>

                                <div class="col-md-6">
                                    <input type="number" class="form-control h-45" name="not_allocated_amount_to" value="{{request('not_allocated_amount_to')}}" placeholder="{{__('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('purchases::supplier_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('purchases::supplier_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>
        </div>
        </form>
        <section id="configuration">
            <div class="row mt-2">
                <div class="col-xs-12">
                    <div class="card">
                        <div class="card-body collapse in">
                            <div class="">
                                <table id="supplier_receipts_table" class="table table-striped" style="width:100%;display: inline-table;">
                                    <thead>
                                        <tr>
                                            <th>@lang('purchases::supplier_receipts.Reference ID')</th>
                                            <th>@lang('purchases::supplier_receipts.Supplier')</th>
                                            <th>@lang('purchases::supplier_receipts.Date')</th>
                                            <th>@lang('purchases::supplier_receipts.Kind')</th>
                                            <th>@lang('products::cost_center.Cost Center')</th>
                                            <th>@lang('purchases::supplier_receipts.Amount')</th>
                                            <th>@lang('purchases::supplier_receipts.Not Allocated Amount')</th>
                                            <th>@lang('purchases::supplier_receipts.Supplier Invoice Reference Number')</th>
                                            <th>@lang('Actions')</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                    </tbody>
                                </table>

                                <modal :type="{{ json_encode(__('purchases::supplier_receipts.Receipt')) }}" :allocation="{{ json_encode(__('purchases::supplier_receipts.allocation')) }}" :remaningamount="{{json_encode(__('purchases::supplier_receipts.remaningAmount')) }}" :unpaidtype="{{json_encode(__('purchases::supplier_receipts.unpaidtype')) }}" :Youhavetoasignselectedreceiptamountto="{{json_encode(__('purchases::supplier_receipts.You have to assign receipts to be linked with this')) }}" :referenceid="{{json_encode(__('purchases::supplier_receipts.ReferenceID')) }}" :date="{{json_encode(__('purchases::supplier_receipts.Date')) }}" :amount="{{json_encode(__('purchases::supplier_receipts.Amount')) }}" :assigned="{{json_encode(__('purchases::supplier_receipts.assign')) }}" :totalstring="{{json_encode(__('purchases::supplier_receipts.totalString')) }}" :outstanding="{{json_encode(__('purchases::supplier_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="{{ json_encode(route('company.supplier-receipts.bill.assign',['subdomain' => $subdomain])) }}" :allocated="{{json_encode(__('sales::customer_receipts.allocated')) }}"
                                    :search="{{ json_encode(__('purchases::purchase_bills.search')) }}">

                                </modal>
                                {{---------------- popup to deleted supplier 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('purchases::supplier_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" 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 supplierPaymentReceipt 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('purchases::supplier_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_purchases_supplier_receipts_list');
        console.log('web_purchases_supplier_receipts_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(){
                if($("#collapseExample").hasClass("in") == false && $("#collapseExample").hasClass("dateCheck") == false && (window.location.href.indexOf("date_from") > -1) == false){

                    $(".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("");
                // or prop('selectedIndex',0);
                $('.select2-tag').select2({
                    allowClear: true
                });
                $('.select2-selection__clear').text("");
            })

             // to export all supplier-receipts pdf
             $('#export-supplier-receipts').click(function(e) {
                const outputFileName = "{{__('purchases::supplier_receipts.Supplier Receipts')}}.pdf";
                downloadPdfFileFromUrl("/