@extends('admin.layout.master')
@section('title','PURCHASE')
@section('custom_style')
    <style>
        .table {
            border: 1px solid black;
        }
        .table th,
        .table td {
            padding: 0rem;
            padding-left: 0.35rem;
            padding-right: 0.35rem;
            border: 1px solid black;
        }
        .table td {
            color: black;
        }
        .table th {
            background: var(--tableHeader);
            padding: 5px !important;
            color: white !important;
        }
        .custom-td {
            white-space:pre-wrap;
            word-wrap:break-word;
        }
    </style>
@endsection
@section ('content')
    <div class="card sina-card">
        <div class="card-header card-header-s d-flex flex-wrap align-items-center">
            <h4 class="col-6 pl-0">{{__('obs.purchase')}} {{__('obs.queue')}}</h4>
            <div  class="col-6 d-flex justify-content-end">
                @if(checkAuthPermission('purchase.create'))
                <a href="{{ route('purchase.create') }}" class="btn-sina-title-add d-flex align-items-center" type="button" name="button">
                    <div class="col pl-0 pr-2">
                        <i class="fas fa-plus-circle"></i>
                    </div>
                    <div class="">  {{__('obs.add')}} {{__('obs.new')}} </div>
                </a>
                @endif
            </div>
        </div>
        <div class="card-body">
            <form method="post" name="filter_form" id="filter_form">
                @csrf
                <input type="hidden" name="index" id="index" value="1">
                {{-- <div class="row mb-1"> --}}
                    <div class="d-flex flex-wrap justify-content-center">
                        <div class="col-md-2 col-12 flex-wrap pr-0 mb-2">
                            <label for="inv_no">{{__('obs.invoice')}} {{__('obs.no')}}</label>
                            <input type="text" class="form-control" name="inv_no" id="inv_no">
                        </div>
                        @if (env("purchase_queue_from_api") == 1)
                            <div class="col-md-2 col-12 flex-wrap pr-0 mb-2">
                                <label for="factory_id">{{__('obs.factory')}}</label>
                                <select class="form-control select_2" name="factory_id" id="factory_id">
                                    <option value="2" selected>{{__('obs.nasirabad')}}</option>
                                    {{-- <option value="1" selected>{{__('obs.nasirabad')}}</option>
                                    <option value="2">{{__('obs.classfood')}}</option> --}}
                                </select>
                            </div>
                        @endif
                        <div class="col-md-3 col-12 flex-wrap pr-0 mb-2">
                            <label for="date_from">{{__('obs.date')}} {{__('obs.from')}}</label>
                            <input type="text" class="form-control date_picker" name="date_from" id="date_from" value="{{ date('d-m-Y') }}">
                        </div>
                        <div class="col-md-3 col-12 flex-wrap pr-0 ">
                            <label for="date_to">Date To</label>
                            <input type="text" class="form-control date_picker" name="date_to" id="date_to" value="{{ date('d-m-Y') }}">
                        </div>
                        <div class="col-md-1 col-1 flex-wrap pr-0 text-center pt-2">
                            <label for=""></label>
                            <button class="btn btn-sm btn-outline-info font-weight-bold d-flex" style="margin-top: -9px;" name="filter" id="filter"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-filter pt-1" viewBox="0 0 16 16">
                                <path d="M6 10.5a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 0 1h-3a.5.5 0 0 1-.5-.5zm-2-3a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5zm-2-3a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11a.5.5 0 0 1-.5-.5z"/>
                            </svg>&nbsp;{{__('obs.filter')}}</button>
                        </div>
                    </div>
                {{-- </div> --}}
            </form>
            <hr>
            @include('admin.global.loader')
            <div class="table-responsive"  id="div_tbl">
                <table class="table Dtable table-striped table-bordered dataTable no-footer" id="tbl">
                    <thead class="">
                        <tr>
                            <th>#</th>
                            <th>{{__('obs.invoice')}} {{__('obs.no')}}</th>
                            <th>{{__('obs.invoice')}} {{__('obs.date')}}</th>
                            <th>{{__('obs.invoice')}} {{__('obs.net')}} {{__('obs.total')}}</th>
                            <th>{{__('obs.vendor')}}</th>
                        </tr>
                    </thead>
                    <tbody id="tbl_body">
                    </tbody>
                </table>
            </div> 
        </div>
    </div>
@endsection

@section('script')
    <script>
    </script>
    <script type="text/javascript" src="{{ asset('inventory/blade_js/common.js') }}"></script>
    <script type="text/javascript">
        const store_setting = @json(store_info());
        const setting = @json(getDefaultSettings(3));
        const pro_setting = @JSON($pro_setting);
        const mulInvAmountBy = {{ env("mul_PQ_inv_amount_by") }};

        $(document).ready(function() {
            $('.select_2').select2(); 
            $('#filter_form').on('submit', function(event) {
                event.preventDefault();
                $('#div_tbl').html('');
                var d = $('#filter_form').serializeArray();
                installInv();
            });
        });

        function installInv() {
            let data = {
                inv_type: 4,
                inv_no: $('#inv_no').val(),
                factory_id: $('#factory_id').val(),
                date_from: $('#date_from').val(),
                date_to: $('#date_to').val(),
            };
            ajaxCall('/purchase-invoice/filter-grn', 'POST', data, setInvData);
        }

        const setInvData = data => {
            let str = `<table class="table table-bordered table-hover" id="inv_tbl">
                <thead>
                    <th class="text-center">#</th>
                    <th class="text-center">Invoice No</th>
                    <th class="text-center">Invoice Date</th>
                    <th class="text-center">Invoice Net Total</th>
                    <th class="text-center">Vendor</th>
                    <th class="text-center">Action</th>
                </thead>
            <tbody>`;
            if (data.type != 1) {
                invoices = [...data.store, ...data.fg_store];
                console.log("invoices", invoices);
                let i = 0;
                for (const row of invoices) {
                    str += `<tr>
                        <td>${Number(i+1)}</td>
                        <td>${row.invoice_no}</td>
                        <td>${(GetFormattedDate(row.date, 'dmy his'))}</td>
                        <td>${parseFloat(row.net_total*parseFloat(mulInvAmountBy)).toFixed(2)}</td>
                        <td>${(row.party != null ? row.party.name_eng : '')}</td>
                        <td class="text-center"><a href="/purchase/create?id=${row.id}&from=${row.model_name}" class="btn btn-hover text-success p-0 pl-1" title="Accept"><i class="fas fa-vote-yea"></i></a></td>
                    </tr>`;
                }
            } else {
                // let i = 0;
                for (const [i, row] of data.api_invoices.entries()) {
                    console.log(row);
                    str += `<tr>
                        <td>${Number(i+1)}</td>
                        <td>${row.id}</td>
                        <td>${(GetFormattedDate(row.date, 'dmy his'))}</td>
                        <td>${ row.amount ? parseFloat(row.amount).toFixed(2) : 0 }</td>
                        <td>${(row.party != null ? row.party.name_eng : '')}</td>
                        <td class="text-center"><a href="/purchase/create?id=${row.id}&from=api" class="btn btn-hover text-success p-0 pl-1" title="Accept"><i class="fas fa-vote-yea"></i></a></td>
                    </tr>`;
                }
            }

            $('#div_tbl').html(str+`</tbody> </table>`);
            $('#loader').hide();
        }
    </script>
@endsection