@extends('companyuser::layouts.master')
@section('title', __('purchases::suppliers.Suppliers'))
@section('extra-styles')
<link href="{{asset('assets/css/filter.css') }}" rel="stylesheet">
@if(app()->getlocale() == 'en')
    <style>
        div.dataTables_filter{
            display: inline-block;
            width: 50%;
            vertical-align: middle;
            text-align: right;
        }
        #suppliers_table_filter{
            width: 100%;
        }
    </style>
@endif
@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
<link href="{{asset('assets/css/style-svgFont.css') }}" rel="stylesheet">
<style>
   .table.table-column td, .table.table-column th {
    font-size: 0.8rem !important;
}
a.disabled-delete,a.disabled-delete:hover{
        background-color: #a7a7a7 !important;
        border-color: #a7a7a7 !important;
    }
</style>
@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.Suppliers')</a></li>
        </ol>
    </div>
</div>
@endsection

@section('content')
<section>
    <div class="container-fluid">
        <div class="headBtns mb-2 mx-1 fixed-btns" style="padding-bottom: 10px;">
            <div class="btn-group pull-right">
                @can('purchases.suppliers.create')
                    <a class="text-green pull-left" href="{{route('company.suppliers.import', $subdomain)}}" title="{{__('Import')}}">
                        <span class="icon-Import-New action-icon rot"></span>
                    </a>
                    <a class="text-green" href="{{route('company.suppliers.create', $subdomain)}}" title="@lang('Add')">
                        <span class="icon-Add action-icon"></span>
                    </a>
                @endcan
            </div>
        @can('purchases.suppliers.export')
            <div class="mb-1">
                <a href="{{route('company.suppliers.export', ['subdomain' => $subdomain]+request()->all())}}" class="pull-left" title="@lang('reports::reports.download_excel')">
                        <span class="icon-Excel action-icon"></span>
                </a>

                <a href="{{route('company.suppliers.exporting-pdf', ['subdomain' => $subdomain]+request()->all())}}" class="pull-left" title="@lang('reports::reports.Download_Pdf')">
                    <span class="icon-Pdf action-icon"></span>
                </a>
                <a href="{{route('company.suppliers.print-suppliers-list', ['subdomain' => $subdomain]+request()->all())}}" class="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.suppliers.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="category">@lang('purchases::suppliers.Status')</label>
                                        </div>
                                        <div class="col-md-12">
                                            <select name="status" class="w-100 py-1 form-control h-45">
                                                <option value="">@lang('All')</option>
                                                <option @if(request('status') == '1') selected @endif value="1">@lang('purchases::suppliers.Active')</option>
                                                <option @if(request('status') == '0') selected @endif value="0">@lang('purchases::suppliers.Not Active')</option>
                                            </select>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-lg-6">
                                    <div class="row">
                                        <div class="col-md-6">
                                            <label for="category">@lang('purchases::suppliers.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">
                                <button type="submit" class="btn btn-info mr-1 mb-1 p-5">
                                    <img src="{{asset('assets/images/Done.png') }}" alt="done" width="32px">
                                </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">
                                <div class="card-block card-dashboard">
                                    <table
                                    class="table table-striped" id="suppliers_table" style="width:100%;display: inline-table;border-collapse: collapse !important;">
                                        <thead>
                                            <tr>
                                                <th>@lang('purchases::suppliers.Code')</th>
                                                <th>@lang('purchases::suppliers.Supplier Name')</th>
                                                <th>@lang('purchases::suppliers.Phone')</th>
                                                <th>@lang('purchases::suppliers.Email')</th>
                                                <th>@lang('purchases::suppliers.Account')</th>
                                                <th>@lang('purchases::suppliers.Outstanding Balance')</th>
                                                <th>@lang('purchases::suppliers.Status')</th>
                                                <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('purchases::suppliers.Total Outstanding') :
                                            </h3>
                                            <h3 class="col-md-2">
                                                {{number_format($suppliersTotalBalance,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('purchases::suppliers.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 supplier 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('purchases::suppliers.delete supplier 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 supplier -------------------------------}}
                    <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('purchases::suppliers.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>
</div>
</section>
</div>
    </section>
@endsection

@section('extra_scripts')
    <script>
        gtag('event', 'web_purchases_suppliers_list');
        console.log('web_purchases_suppliers_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);
            });

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

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