@extends('companyuser::layouts.master')
@section('title', __('purchases::purchase_bills.purchase_bills'))
@section('extra-styles')
<link rel="stylesheet" type="text/css" href="{{url('assets/css/filter.css') }}">
<link rel="stylesheet" type="text/css" href="{{ url('assets/css/plugins/input-dropdown/input-dropdown.css') }}">
<link rel="stylesheet" type="text/css" href="{{ url('assets/css/plugins/range/range.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>
@endsection

@push('extra_scripts')
<script src="{{url('assets/js/vendors/js/pickers/dateTime/moment-with-locales.min.js')}}" defer></script>
<script src="{{url('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/custom/exportPdf.js') }}" defer></script>
<script src="{{ asset('assets/js/scripts/modal/components-modal.js') }}" defer></script>
@endpush
<style>
  a.disabled {
    pointer-events: none;
    cursor: default;
}
</style>
@section('breadcrumb')
<div class="row breadcrumbs-top">
    <div class="breadcrumb-wrapper col-xs-12">
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="{{route('company.suppliers.index', $subdomain)}}">@lang('companyuser::sidebar.Purchases')</a></li>
            <li class="breadcrumb-item active"><a href="#">@lang('companyuser::sidebar.Bills')</a></li>
        </ol>
    </div>
</div>
@endsection

@section('content')
<section>
    <div class="container-fluid">
        <div class="col-xs-6 headTitle" style="padding-bottom: 10px;">
            <h3 class="py-half">@lang('purchases::purchase_bills.purchase_bills')</h3>
        </div>
        <div class="headBtns fixed-btns" style="padding-bottom: 10px;">
            <div class="btn-group pull-right">
                @can('purchases.bills.create')
                <a class="text-white" href="{{route('company.bills.create', $subdomain)}}" title="@lang('Add')">
                    <span class="icon-Add action-icon" @if(!$accountingSettingsCount) disabled @endif></span>
                </a>
                @endcan
            </div>
        <!--check for right permissions      -->
        <div class="mb-1">
            <a href="{{route('company.bills.export', ['subdomain' => $subdomain,'supplier' => request('supplier') , 'amount_from'=> request('amount_from') , 'amount_to' => request('amount_to'),
                'date_from' => request('date_from'), 'date_to'=> request('date_to') , 'cost_center_id' => request('cost_center_id'), 'current_year_receipts' => request('current_year_receipts')

                ])}}"  class="{{!count($purchaseBills) ? 'disabled' : ''}} pull-left" title="@lang('reports::reports.download_excel')">
                    <span class="icon-Excel action-icon"></span>
            </a>

            <a href="#"  id="export-all-pdf" class="{{!count($purchaseBills) ? 'disabled' : ''}} pull-left" title="@lang('reports::reports.Download_Pdf')">
                 <span class="icon-Pdf action-icon"></span>
            </a>
            <a href="{{route('company.bills.export-print', ['subdomain' => $subdomain,'supplier' => request('supplier') , 'amount_from'=> request('amount_from') , 'amount_to' => request('amount_to'),
                'date_from' => request('date_from'), 'date_to'=> request('date_to') , 'cost_center_id' => request('cost_center_id')])}}" class="{{!count($purchaseBills) ? 'disabled' : ''}} pull-left" target="_blank" title="@lang('Print')">
                <span class="icon-Print action-icon"></span>
            </a>
        </div>
        </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

        @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>


        <div class="collapse filter-section-collapse" id="collapseExample">
            <form action="{{ route('company.bills.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 w-100-ipad-portrait">
                                        <label for="supplier">@lang('purchases::purchase_bills.Supplier')</label>
                                    </div>
                                    <div class="col-md-12  w-100-ipad-portrait 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  w-100-ipad-portrait">
                                        <label for="category">@lang('purchases::purchase_bills.Amount')</label>
                                    </div>
                                    <div class="col-md-6  w-50-ipad-portrait mb-half">
                                        <input type="number" name="amount_from" value="{{ request('amount_from') }}" class="form-control h-45" placeholder="@lang('from')">
                                    </div>
                                    <div class="col-md-6  w-50-ipad-portrait mb-half">
                                        <input type="number" name="amount_to" value="{{ request('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">
                                    <div class="col-md-12  w-100-ipad-portrait">
                                        <label for="category">@lang('purchases::purchase_bills.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="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 ml-0 pl-0 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>
                    <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::purchase_bills.old_year_bills')</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::purchase_bills.current_year_bills')</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>
        {{-- <div class='row my-1'>
                        <div class="col-md-7"></div>
                        <div class="col-md-5 additionalBar">
                            <span><i class="fas fa-cog fa-lg"></i></span>
                            <span class="px-1"><i class="fas fa-print fa-lg"></i></span>
                            <span><i class="fas fa-file-excel-o fa-lg"></i></span>
                        </div>

                    </div> --}}

        <div>
            <section id="configuration">
                <div class="row mt-2">
                    <div class="col-xs-12">
                        <div class="card">
                            <div class="card-block card-dashboard" style="overflow-x: scroll;" >
                                <table id="purchase_bills_table" class="table table-striped  @if(app()->getlocale() == 'ar') ar-language @endif" style="width:100%;display: inline-table;">
                                    <thead>
                                        <tr>
                                            <th>@lang('purchases::purchase_bills.Reference ID')</th>
                                            <th>@lang('purchases::purchase_bills.Supplier')</th>
                                            <th>@lang('purchases::purchase_bills.Date')</th>
                                            <th>@lang('purchases::purchase_bills.status')</th>
                                            <th>@lang('products::cost_center.Cost Center')</th>
                                            <th>@lang('purchases::purchase_bills.Amount')</th>
                                            <th>@lang('purchases::purchase_bills.outstanding')</th>
                                            <th>@lang('purchases::purchase_bills.Supplier Invoice Reference Number')</th>
                                            <th>@lang('purchases::purchase_bills.return_reference')</th>
                                            <th>@lang('Actions')</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                    </tbody>
                                </table>
                                <attachments-popup-component
                                @close="attachmentModalShowing = false"
                                :closetext="{{ json_encode(__('Close')) }}"
                                :title="{{ json_encode(__('purchases::purchase_bills.attachments')) }}"
                                :showing="attachmentModalShowing = false"
                                :no-attachments-text="{{ json_encode(__('purchases::purchase_bills.there_is_no_attachments')) }}"
                                :attachments="attachments = []">
                                </attachments-popup-component>

                                <receipts-modal
                                    :type="{{ json_encode(__('purchases::purchase_bills.bill')) }}"
                                    :allocation="{{ json_encode(__('purchases::purchase_bills.allocation')) }}"
                                    :remaningamount="{{json_encode(__('purchases::purchase_bills.remaningAmount')) }}"
                                    :unpaidbills="{{json_encode(__('purchases::purchase_bills.unpaidtype')) }}"
                                    :Youhavetoasignselectedreceiptamountto="{{json_encode(__('purchases::supplier_receipts.You have to assign receipts to be linked with this')) }}"
                                    :referenceid="{{json_encode(__('purchases::purchase_bills.ReferenceID')) }}"
                                    :date="{{json_encode(__('purchases::purchase_bills.Date')) }}"
                                    :amount="{{json_encode(__('purchases::purchase_bills.Amount')) }}"
                                    :assigned="{{json_encode(__('purchases::purchase_bills.assign')) }}"
                                    :totalstring="{{json_encode(__('purchases::purchase_bills.totalString')) }}"
                                    :save="{{ json_encode(__('Save')) }}"
                                    :cancel="{{ json_encode(__('Cancel')) }}"
                                    :showing="exampleModalShowing"
                                    @close="exampleModalShowing = false"
                                    :receiptslist="receipts = []"
                                    :outstanding="outstanding = 0"
                                    :allocated="allocated = 0"
                                    :allocatedstring="{{ json_encode(__('sales::customer_receipts.allocated')) }}"
                                    :total="total = 0"
                                    :route="route = ''"
                                    :csrf="'{{csrf_token()}}'"
                                    :billreference="billReference = ''"
                                    :lang="{{ json_encode(app()->getLocale()) }}"
                                    :search="{{ json_encode(__('purchases::purchase_bills.search')) }}"
                                >
                                </receipts-modal>

                                {{---------------- popup to deleted purchase bill -------------------------------}}
                                <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::purchase_bills.delete_confirmation')
                                                </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 purcahse bill with deactivated/deleted products ---------------------}}
                                <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 id="cloneMsg">

                                                </p>
                                                <div id="deletedProducts">

                                                </div>
                                            </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>

                                {{-- Edit modal --}}
                                <div class="modal fade" id="editModal" tabindex="-1" role="dialog" aria-labelledby="editModalLabel">
                                    <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="editModalLabel">@lang('landing_page.warning')</h4>
                                            </div>
                                            <div class="modal-body">
                                                <p id="editMsg">

                                                </p>
                                            </div>
                                            <div class="modal-footer">
                                                <button type="button" class="btn btn-primary d-flex ok-button" style="margin: auto;" data-dismiss="modal">@lang('Ok')</button>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                            </div>
                        </div>
                    </div>
                </div>
            </section>
        </div>
    </div>
</section>
@endsection

@section('extra_scripts')
    <script>
        gtag('event', 'web_purchases_bills_list');
        console.log('web_purchases_bills_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() {
            const loader=document.getElementById("overlay");
            loader.style.display="none"
            $("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
            // $(document).on('click', '.delete-item', function(){
            // // $('.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");
                }
            });

            $("body").on("click",".popup-item",function(){
                var modal = $(this).attr('data-target');
                var url = $(this).attr('data-url');
                var products = $(this).attr('data-deleted-products');
                var msg = $(this).attr('data-msg');
                var showCancelOnly = $(this).attr('data-show-cancel-only') === 'true';

                // Clear previous products list
                $('#deletedProducts').empty();

                // Decode HTML entities back to JSON string
                if (msg) {
                    msg = $('<div>').html(msg).text();
                }
                $('#cloneMsg').html(msg);

                // Configure modal footer based on the type
                var modalFooter = $(modal).find('.modal-footer');
                if (showCancelOnly) {
                    // Only show Ok button for deleted products case
                    modalFooter.html('<button type="button" class="btn btn-default mx-1" data-dismiss="modal">@lang('Ok')</button>');
                } else {
                    // Show original Continue and Cancel buttons for other cases
                    modalFooter.html(`
                        <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>
                    `);
                }

                $(modal + ' .delete-form').attr("action", url);
            });

            $("body").on("click",".edit-modal",function(){
                let checkAvailabilityableUrl = $(this).attr('data-check-availability-url');
                let url = $(this).attr('data-url');
                let buttonType = $(this).data('button-type');
                let title = $(this).attr('title');

                $.ajax({
                    url: checkAvailabilityableUrl,
                    type: 'GET',
                    dataType: "json",
                    data:{
                        type:title,
                        buttonType:buttonType
                    },
                    success: function(response) {
                            $('#editMsg').html(response.msg);
                            if (response.availability) {
                                if(buttonType != 'delete'){
                                    window.location.replace(url)
                                }else{
                                    $('#deleteInvoice').attr('action',url);
                                    $('#deleteInvoiceWithEntries').css('display','none');
                                    $('#deleteInvoiceBtn').text("@lang('Continue')");
                                    $('#favoritesModal').modal('show')
                                }
                            }else{
                                $("#editModal").modal('show');
                                $('.modal-footer .ok-button').css('display', 'block');

                            }
                    },
                });
            });

            //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);
            });

            $('#export-all-pdf').click(function(e) {
                const outputFileName = "{{__('purchases::purchase_bills.purchase_bills')}}.pdf";
                downloadPdfFileFromUrl("/