@extends('companyuser::layouts.master')
@section('title', __('sales::customers.Customers'))
@section('extra-styles')
<link href="{{asset('assets/css/filter.css') }}" rel="stylesheet">
<link href="{{asset('assets/css/style-svgFont.css') }}" rel="stylesheet">
@endsection
{{-- didnt read --}}
@push('extra-styles')
<link href="{{url('assets/css/filter.css') }}" rel="stylesheet">
<link href="{{ url('assets/css/plugins/input-dropdown/input-dropdown.css') }}" rel="stylesheet">
<link href="{{ url('assets/css/plugins/range/range.css') }}" rel="stylesheet">
@endpush
@push('extra-scripts')
<script src="{{ url('assets/js/plugins/range/balance-range.js') }}"></script>
<script src="{{ url('assets/js/plugins/input-dropdown/input-dropdown.js') }}"></script>
@endpush
<style>
    .select2 {
        width: 100% !important;
    }
    a.disabled {
        pointer-events: none;
        cursor: default;
    }
    .table td,
    .table th {
        font-size: 0.8rem !important;
    }
    a.disabled-delete,a.disabled-delete:hover{
        background-color: #a7a7a7 !important;
        border-color: #a7a7a7 !important;
    }
</style>
@if(app()->getlocale() == 'en')
<style>
    div.dataTables_filter{
        display: inline-block;
        width: 50%;
        vertical-align: middle;
        text-align: right;
    }
    #customers_table_filter{
        width: 100%;
    }
</style>
@endif
@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.Customers')</a></li>
        </ol>
    </div>
</div>
@endsection

@section('content')
<section>
    <div class="container-fluid">
        <div class="headBtns mx-1 fixed-btns">
            <div class="btn-group pull-right">
                @can('sales.customers.create')
                <a class="text-green pull-left" href="{{route('company.customers.import', $subdomain)}}" title="{{__('Import')}}">
                    <span class="icon-Import-New action-icon rot"></span>
                </a>
                @if ($companyInfo->zatca_comply)
                    @if (gettype($invoiceTypes) == 'string')
                        <a class="text-green" href="{{route('company.customers.create', ['customer_type' => $invoiceTypes, 'subdomain' => $subdomain])}}" title="@lang('Add')">
                            <span class="icon-Add action-icon"></span>
                        </a>
                    @else
                        <a type="button" data-toggle="dropdown" aria-haspopup="true" class="bg-transparent"
                            style="font-size: inherit; border:none;" aria-expanded="false" title="{{ __('Add')}}">
                            <span class="icon-Add action-icon"></span>
                        </a>
                        <div class="dropdown-menu" id="saveAndCreate">
                            @foreach($invoiceTypes as $type)
                            <a class="dropdown-item text-center"
                                href="{{ route('company.customers.create',['customer_type' => $type, 'subdomain' => $subdomain]) }}"
                                title="{{ __('sales::invoices.'.$type.'_message')}}">{{ __('sales::customers.'.$type) }}
                            </a>
                            @endforeach
                        </div>
                    @endif
                @else
                    <a class="text-green" href="{{route('company.customers.create', $subdomain)}}" title="@lang('Add')">
                        <span class="icon-Add action-icon"></span>
                    </a>
                @endif
                @endcan

            </div>
            @can('sales.customers.export')
            <div class="mb-1 pull-left">
                <a href="{{route('company.customers.export', ['subdomain' => $subdomain, 'status' => request('status'), 'from' => request('from'), 'to' => request('to')])}}" class="{{!count($customers) ? 'disabled' : ''}} pull-left" title="@lang('reports::reports.download_excel')">
                    <span class="icon-Excel action-icon"></span>
                </a>
                <a href="{{route('company.customers.exporting-pdf', ['subdomain' => $subdomain, 'status' => request('status'), 'from' => request('from'), 'to' => request('to')])}}" class="{{!count($customers) ? 'disabled' : ''}} pull-left" title="@lang('reports::reports.Download_Pdf')">
                    <span class="icon-Pdf action-icon"></span>
                </a>
                <a href="{{route('company.customers.print-customers-list', ['subdomain' => $subdomain, 'status' => request('status'), 'from' => request('from'), 'to' => request('to')])}}" class="{{!count($customers) ? 'disabled' : ''}} pull-left" target="_blank" title="@lang('Print')">
                    <span  class="icon-Print action-icon"></span>
                </a>
            </div>
            @endcan
        </div>
        <div class="row mt-1">
            <div class="col-md-12 mb-2">
                <div>
                    <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-collapse filter-section-collapse" id="collapseExample">
                    <form action="{{ route('company.customers.index', ['subdomain' => $subdomain]) }}" method="GET" 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-md-4">
                                <div class="row">
                                    <div class="col-md-12">
                                        <label for="status">@lang('sales::customers.Status')</label>
                                    </div>
                                    <div class="col-md-12">
                                        <select name="status" id="status" class="w-100 py-1 form-control h-45">
                                            <option value="">{{__('All')}}</option>
                                            <option @if(request('status') == '1') selected @endif value="1">@lang('sales::customers.Active')</option>
                                            <option @if(request('status') == '0') selected @endif value="0">@lang('sales::customers.Not Active')</option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="row">
                                    <div class="col-md-6">
                                        <label for="category">@lang('sales::customers.Outstanding Balance')</label>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-md-6 mb-1">
                                        <input type="number" name="from" value="{{ request('from') }}" class="form-control h-45" placeholder="@lang('from')">
                                    </div>
                                    <div class="col-md-6 mb-1">
                                        <input type="number" name="to" value="{{ request('to') }}" class="form-control h-45" placeholder="@lang('to')">
                                    </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>
            </div>
        </div>
        @include('companyuser::errors.all')
        @include('companyuser::errors.lists')
        <div>
            <section id="configuration">
                <div class="row">
                    <div class="col-xs-12">
                        <div class="card">
                            <div class="card-body collapse in">
                                <table class="table table-striped" style="width:100%;display: inline-table;border-collapse: collapse !important;" id="customers_table">
                                    <thead>
                                        <tr>
                                            <th>@lang('sales::customers.Code')</th>
                                            <th style="width: 20%">@lang('sales::customers.Customer Name')</th>
                                            <th>@lang('sales::customers.Phone')</th>
                                            <th>@lang('sales::customers.Email')</th>
                                            <th>@lang('sales::customers.Account')</th>
                                            <th>@lang('sales::customers.Outstanding Balance')</th>
                                            <th>@lang('sales::customers.Status')</th>
                                            @if($companyInfo->zatca_comply)
                                                <th>@lang('sales::customers.Type')</th>
                                            @endif
                                            <th>@lang('Actions')</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                    </tbody>
                                </table>

                                <div class="mt-2">
                                    <div class="row">
                                        <h3 class="col-lg-4 col-md-5">
                                            @lang('sales::customers.Total Outstanding') :
                                        </h3>
                                        <h3 class="col-md-2">
                                            {{number_format($customersTotalBalance,2)}}
                                        </h3>
                                    </div>
                            </div>

                            {{---------------- popup to deleted user -------------------------------}}
                            {{-- 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::customers.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="pull-right">
                                                <form action="" method="POST" class="form delete-form">
                                                    @csrf
                                                    @method('delete')
                                                    <button type="submit" class="btn btn-primary">@lang('Continue')</button>
                                                </form>
                                            </span>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            {{-- delete modal when customer balance not equal zero --}}
                            <div class="modal fade" id="favoritesModal2" 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::customers.delete customer with none zero balance')
                                            </p>
                                        </div>
                                        <div class="modal-footer text-center">
                                            <button type="button" class="btn btn-primary mx-1" data-dismiss="modal">@lang('Cancel')</button>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            {{---------------- popup to deactivate customer -------------------------------}}
                            <div class="modal fade" id="deactivateModal" 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('Deactive')</h4>
                                        </div>
                                        <div class="modal-body">
                                            <p>
                                                @lang('sales::customers.deactivate 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>
        <!-- </section> -->
    </div>
</section>
@endsection

@section('extra_scripts')
<script>
    gtag('event', 'web_sales_customers_list');
    console.log('web_sales_customers_list event');
</script>
<script>
    window.addEventListener('DOMContentLoaded', function() {
        $(document).ready(function() {
            // For A Delete Record Popup
            //handel desktop(click) and mobile(touchstart) browsers
            $(document).on('touchstart click', '.delete-item', function() {
                var modal = $(this).attr('data-target');
                var url = $(this).attr('data-url');
                $(modal + ' .delete-form').attr("action", url);
            });

            $('.form-submit-button').click(function() {
                //take value from clicked btn
                const action = $(this).attr('action-value');
                $('#action-type').val(action);
                const formElement = $('#update_settings_form');

                //submit form
                formElement.submit();
            });

            //to reset filter dropdown menus
            //handel desktop(click) and mobile(touchstart) browsers
            $(document).on('touchstart click', '#reset', function(e) {
                e.preventDefault()
                // here we made it val to work in both inputs and dropdown menu
                $('.form-control').val("");
                // or prop('selectedIndex',0);
            });

                $('#customers_table').DataTable({
                processing: true,
                serverSide: true,
                search: true,
                ajax: {
                    url: "{{route('company.customers.index',$subdomain)}}",
                    data: