@extends('layout.default')

@section('styles')
    <style type="text/css">
        /* Select 2 */
        table .select2-selection__rendered {
            line-height: 10px !important;
        }

        table .select2-container .select2-selection--single {
            width: 225px !important;
            height: 34px !important;
            font-size: 1rem !important;
        }

        table .select2-selection__arrow {
            height: 33px !important;
        }

        .btn-group > .select2-container--default {
            flex: 1 1 auto !important;
        }

        .btn-group > .select2-container--default .select2-selection--single {
            height: 100% !important;
            border-radius: 0.42rem 0 0 0.42rem !important;
            line-height: inherit !important;
        }

        /* End/- 2 */
    </style>
@endsection
@section('subheaderRightToolbar')
    @PermissionsCan(groupPermissionName('purchaseorder.index'))
    <a href="{{ route('purchaseorder.index') }}"
       class="btn btn-light-primary font-weight-bolder mr-2">
        <i class="ki ki-long-arrow-back icon-sm"></i>Back(ESC)</a>
    @endPermissionsCan
    @PermissionsCan(groupPermissionName('purchaseorder.store'))
    <div class="btn-group">
        <button type="submit" class="btn btn-primary font-weight-bolder" form="purchaseorder_form">
            <i class="ki ki-check icon-sm"></i><u>S</u>ave & Continue
        </button>
    </div>
    @endPermissionsCan
@endsection
@section('content')
    <div class="card card-custom card-sticky" id="kt_page_sticky_card">
        <div class="card-body" id="load-section-js">
            <form class="form" id="purchaseorder_form" data-method="post"
                  data-url="{{ route('purchaseorder.store') }}"
                  enctype="multipart/form-data">
                <div class="row">
                    <div class="col-xl-12">
                        <div class="row">
                            <div class="col-md-4">
                                <div class="form-group d-flex flex-column">
                                    <label>{{ __("Branch") }} <b class="text-danger">*</b></label>
                                    <div class="btn-group">
                                        <select class="form-control form-control-solid form-control-lg branch-select2-js"
                                                name="branch_id" id="branch_id"
                                                @if(empty($quotation))
                                                data-action="{{ route('branch.autocomplete') }}"
                                                @endif
                                                data-placeholder="select Branch">
                                            @if(!empty($quotation) and $quotation->branch_id)
                                                <option value="{{ $quotation->branch_id }}"
                                                        selected>{{ $quotation->branch->code . ' - ' . $quotation->branch->name }}</option>
                                            @endif
                                        </select>
                                        <a href="{{ route('branch.create') }}" target="_blank"
                                           class="btn btn-primary btn-sm"
                                           type="submit"><i class="flaticon-plus"></i></a>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="form-group d-flex flex-column">
                                    <label>Party<b class="text-danger">*</b></label>
                                    <div class="input-group m-input-group">
                                        <select class="form-control form-control-solid form-control-lg customer-select2-js"
                                                name="customer_id" id="customer_id"
                                                @if(empty($quotation))
                                                data-action="{{ route('customer.autocomplete') }}"
                                                @endif
                                                data-placeholder="select Customer">
                                            @if(!empty($quotation) and $quotation->customer_id)
                                                <option value="{{ $quotation->customer_id }}"
                                                        selected>{{ $quotation->customer->name }}</option>
                                            @endif
                                        </select>
                                        <div class="input-group-append">
                                            <button class="btn btn-primary"
                                                    onclick="window.open('{{ route('customer.create') }}','_blank')"
                                                    type="button"><i class="flaticon-plus"></i></button>
                                        </div>
                                    </div>
                                </div>
                                <input type="hidden" name="is_igst_customer" id="is_igst_customer"
                                       @if(!empty($quotation))  value="{{ ($quotation->is_igst_customer == true) ? 'true' : 'false' }}" @endif>
                            </div>
                            <div class="col-md-4 mb-6">
                                <div class="form-group">
                                    <label for="is_customer_same_to_ship_party">Same as Customer to Ship Party?</label>
                                    <div class="checkbox-inline">
                                        <label class="checkbox">
                                            <input type="hidden" name="is_customer_same_to_ship_party" value="0">
                                            <input type="checkbox" id="is_customer_same_to_ship_party"
                                                   name="is_customer_same_to_ship_party" value="1">
                                            <span></span>
                                        </label>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label>Ship To Party <b class="text-danger">*</b></label><br>
                                    <select class="form-control form-control-solid form-control-lg ship_to_party_id-select2-js"
                                            name="ship_to_party_id" id="ship_to_party_id"
                                            data-action="{{ route('customer.autocomplete') }}"
                                            data-placeholder="Select Ship To Party">
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label>Purchase Order No. <b class="text-danger">*</b></label>
                                    <input class="form-control form-control-solid" type="text" name="purchase_order_no"
                                           id="purchase_order_no" readonly/>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label>Purchase Order Date <b class="text-danger">*</b></label>
                                    <input type="date" class="form-control datepicker-js" name="purchase_order_date"
                                           id="purchase_order_date"
                                           value="{{ \Carbon\Carbon::now()->format('Y-m-d') }}">
                                </div>
                            </div>
                        </div>
                        <div class="row">

                            <div class="col-md-4">
                                <div class="form-group d-flex flex-column">
                                    <label>Location<b class="text-danger">*</b></label>
                                    <div class="input-group m-input-group">
                                        <select name="location_id" id="location_id"
                                                class="form-control form-control-solid form-control-lg location-select2-js"
                                                @if(empty($quotation))
                                                data-action="{{ route('location.autocomplete') }}"
                                                @endif
                                                data-placeholder="select Location">
                                            @if(!empty($quotation) and $quotation->location_id)
                                                <option value="{{ $quotation->location_id }}"
                                                        selected>{{ $quotation->location->name }}</option>
                                            @endif
                                        </select>
                                        <div class="input-group-append">
                                            <button class="btn btn-primary"
                                                    onclick="window.open('{{ route('location.create') }}','_blank')"
                                                    type="button"><i class="flaticon-plus"></i></button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label>Dealer/Distributor</label>
                                    <div class="input-group m-input-group">
                                        <select name="customer_distributor_id" id="customer_distributor_id"
                                                class="form-control form-control-solid form-control-lg dealer_distributor_location-select2-js"
                                                @if(empty($quotation))
                                                data-action="{{ route('customer.location_dealer_distributor_customer_autocomplete') }}"
                                                @endif
                                                data-depended="location_id"
                                                data-placeholder="Select Dealer/Distributor">
                                            @if(!empty($quotation->customer_distributor_id))
                                                <option value="{{ $quotation->customer_distributor_id }}"
                                                        selected>
                                                    {{ $quotation->dealer_distributor_customer->partyType->name. ' - '.$quotation->dealer_distributor_customer->name }}
                                                </option>
                                            @endif
                                        </select>
                                        <div class="input-group-append">
                                            <button class="btn btn-primary"
                                                    onclick="window.open('{{ route('customer.create') }}','_blank')"
                                                    type="button"><i class="flaticon-plus"></i></button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label>Auth By.<b class="text-danger">*</b></label><br>
                                    @if(!empty($quotation) and $quotation->user)
                                        <select class="form-control form-control-solid form-control-lg autho_user_by-select2-js"
                                                name="autho_by_user_id" id="autho_by_user_id"
                                                data-depended="location_id"
                                                data-action="{{ route('user.location_user_autocomplete') }}"
                                                data-placeholder="Authorized By" disabled>
                                            <option value="{{ $quotation->autho_by_user->id }}"
                                                    selected>{{  $quotation->autho_by_user->userDetail->last_name ?
                                                                    $quotation->autho_by_user->userDetail->first_name . ' ' .
                                                 $quotation->autho_by_user->userDetail->last_name : $quotation->autho_by_user->userDetail->first_name  }}</option>
                                            <input type="hidden" name="autho_by_user_id"
                                                   value="{{ $quotation->autho_by_user->id }}">
                                        </select>
                                    @else
                                        <div class="input-group m-input-group">
                                            <select class="form-control m-select2 m-select2-general autho_user_by-select2-js"
                                                    name="autho_by_user_id" id="autho_by_user_id"
                                                    data-depended="location_id"
                                                    data-action="{{ route('user.location_user_autocomplete') }}"
                                                    data-placeholder="Authorized By">
                                            </select>
                                            <div class="input-group-append">
                                                <button class="btn btn-primary"
                                                        onclick="window.open('{{ route('employee.create') }}','_blank')"
                                                        type="button"><i class="flaticon-plus"></i></button>
                                            </div>
                                        </div>
                                    @endif
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label for="other_reference">Other Reference</label>
                                    <input type="text" class="form-control"
                                           name="other_reference" id="other_reference">
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label for="mode_terms_of_payment">Mode/Terms of Payment</label>
                                    <input type="text" class="form-control"
                                           name="mode_terms_of_payment" id="mode_terms_of_payment">
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label for="terms_of_delivery">Terms of Delivery</label>
                                    <input type="text" class="form-control"
                                           name="terms_of_delivery" id="terms_of_delivery">
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            @if(isset($quotation->quotation_no))
                                <div class="col-md-4">
                                    <div class="form-group">
                                        <label>Quotation</label><br>
                                        <div class="input-group m-input-group">
                                            <input class="form-control form-control-solid form-control-lg" type="text"
                                                   name="quotation_no"
                                                   id="quotation_no" value="{{ $quotation->quotation_no }}" disabled/>
                                            <input class="form-control form-control-solid form-control-lg" type="text"
                                                   name="quotation_id"
                                                   id="quotation_id" value="{{ $quotation->id }}"
                                                   style="visibility: hidden" readonly/>
                                        </div>
                                    </div>
                                </div>
                            @endif
                        </div>
                    </div>
                </div>
                <div class="tab-content">
                    <div class="table-responsive" id="purchaseorder_details_repeater">
                        <table class="table table-sm table-foot-custom table-foot-bg table-bordered">
                            <thead class="thead-light">
                            <tr class="text-left text-uppercase">
                                <th scope="col" style="min-width: 100px;">Material <b class="text-danger">*</b></th>
                                <th scope="col" style="min-width: 80px;">QTY <b class="text-danger">*</b></th>
                                <th scope="col" style="min-width: 80px;">Unit</th>
                                <th scope="col" style="min-width: 100px;">Size</th>
                                <th scope="col" style="min-width: 100px;">Remarks</th>
                                <th scope="col" style="min-width: 100px;">Due On</th>
                                <th scope="col" style="min-width: 100px;">Rate <b class="text-danger">*</b></th>
                                <th scope="col" style="min-width: 100px;">Amount</th>
                                <th scope="col" style="min-width: 100px;">Discount Amount
                                    <select class="form-control form-control-sm discount_type" name="discount_type"
                                            id="discount_type">
                                        @foreach($discount_types as $key => $discount_type)
                                            <option value="{{ $key }}">{{ $discount_type }}</option>
                                        @endforeach
                                    </select>
                                </th>
                                @if(isset($quotation->is_igst_customer))
                                    @if(($quotation->is_igst_customer) == true)
                                        <th scope="col" style="min-width: 150px;" class="igst_th">IGST % <span
                                                    style="padding-left: 30px;">IGST AMT.</span></th>
                                    @else
                                        <th scope="col" style="min-width: 150px;" class="sgst_th">SGST % <span
                                                    style="padding-left: 30px;">SGST AMT.</span></th>
                                        <th scope="col" style="min-width: 150px;" class="cgst_th">CGST % <span
                                                    style="padding-left: 30px;">CGST AMT.</span></th>
                                    @endif
                                @else
                                    <th scope="col" style="min-width: 150px;" class="sgst_th">SGST % <span
                                                style="padding-left: 30px;">SGST AMT.</span></th>
                                    <th scope="col" style="min-width: 150px;" class="cgst_th">CGST % <span
                                                style="padding-left: 30px;">CGST AMT.</span></th>
                                    <th scope="col" style="min-width: 150px;" class="igst_th">IGST % <span
                                                style="padding-left: 30px;">IGST AMT.</span></th>
                                @endif
                                <th scope="col" style="min-width: 100px;">Net Total</th>
                                <th scope="col" style="min-width: 70px;">Delete</th>
                            </tr>
                            </thead>
                            @php $detail_key_name = "purchaseorder_details"; @endphp
                            <tbody data-repeater-list="{{ $detail_key_name }}" id="purchaseorder_details_tbl-js">
                            @include('purchaseorder::details_tbl', ['purchaseorder_details' => null, 'action' => 'create', 'detail_key_name' => $detail_key_name])
                            </tbody>
                            <tfoot>
                            <tr>
                                <td colspan="14">
                                    <button type="button" class="btn btn-block btn-light-primary btn-sm"
                                            data-repeater-create>
                                        <i class="ki ki-plus icon-1x"></i> Add More Item (Alt+i)
                                    </button>
                                </td>
                            </tr>
                            </tfoot>
                        </table>
                    </div>
                </div>
                <br>

                <div class="row">
                    <div class="col-xl-9"></div>
                    <div class="col-xl-3">
                        <div class="form-group">
                            <label for="sub_total_amount">Sub Total Amt.</label>
                            <input type="text" class="form-control form-control-solid sub_total_amount-js"
                                   name="sub_total_amount" id="sub_total_amount"
                                   readonly>
                        </div>
                    </div>
                </div>
                <div class="row dealer_distributor_discount">
                    <div class="col-xl-6"></div>
                    <div class="col-xl-3">
                        <div class="form-group">
                            <label for="total_amount">Dealer/Distributor Discount in %</label>

                            @if(!empty($quotation) and $quotation->distributor_discount)
                                <input type="text"
                                       class="form-control form-control-solid distributor_discount-js"
                                       name="distributor_discount" id="distributor_discount"
                                       value="{{ $quotation->distributor_discount }}"
                                       readonly>
                            @else
                                <input type="text"
                                       class="form-control form-control-solid distributor_discount-js"
                                       name="distributor_discount" id="distributor_discount"
                                       readonly>
                            @endif
                        </div>
                    </div>
                    <div class="col-xl-3">
                        <div class="form-group">
                            <label for="distributor_discount_amount">Distributor Discount Amount</label>
                            <input type="text"
                                   class="form-control form-control-solid distributor_discount_amount-js"
                                   name="distributor_discount_amount"
                                   id="distributor_discount_amount"
                                   readonly>
                        </div>
                    </div>
                </div>
                <div class="row distributor_discount_sub_total_amount">
                    <div class="col-xl-9"></div>
                    <div class="col-xl-3">
                        <div class="form-group">
                            <label for="distributor_discount_sub_total_amount">Sub with Distributor Discount Total
                                Amount</label>
                            <input type="text"
                                   class="form-control form-control-solid distributor_discount_sub_total_amount-js"
                                   name="distributor_discount_sub_total_amount"
                                   id="distributor_discount_sub_total_amount"
                                   readonly>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-xl-6"></div>
                    <div class="col-xl-3">
                        <div class="form-group">
                            <label for="special_discount">Special Discount</label>
                            @if(!empty($quotation) and $quotation->special_discount)
                                <input type="text"
                                       class="form-control form-control-solid distributor_discount-js"
                                       name="special_discount" id="special_discount"
                                       value="{{ $quotation->special_discount }}">
                            @else
                                <input type="text"
                                       class="form-control form-control-solid special_discount-js"
                                       name="special_discount" id="special_discount">
                            @endif
                        </div>
                    </div>
                    <div class="col-xl-3">
                        <div class="form-group">
                            <label for="special_discount_amount">Special Discount Amount</label>
                            <input type="text"
                                   class="form-control form-control-solid special_discount_amount-js"
                                   name="special_discount_amount"
                                   id="special_discount_amount"
                                   readonly>
                        </div>
                    </div>
                </div>
                <div class="row mt-5">
                    <div class="col-md-6"></div>
                    <div class="col-md-6">
                        <div class="tab-content">
                            <h5>Other Charges</h5>
                            <div class="table-responsive" id="purchase_order_selection_other_charges_repeater">
                                <table class="table table-sm table-foot-custom table-foot-bg table-bordered">
                                    <thead class="thead-light">
                                    <tr class="text-left text-uppercase">
                                        <th scope="col" style="min-width: 100px;">Charge Name</th>
                                        <th scope="col" style="min-width: 100px;">Operation</th>
                                        <th scope="col" style="min-width: 100px;">Amount</th>
                                        <th scope="col" style="min-width: 70px;">Delete</th>
                                    </tr>
                                    </thead>

                                    <tbody data-repeater-list="purchase_order_selection_other_charges"
                                           id="purchase_order_selection_other_charges_tbl-js">
                                    <tr data-repeater-item data-tr_count="0" class="table_tr">
                                        <td>
                                            <div class="btn-group" role="group"
                                                 aria-label="Button group with nested dropdown">
                                                <div class="btn-group" role="group">
                                                    <select name="purchase_order_selection_other_charges[0][selection_other_charges_id]"
                                                            id="selection_other_charges_id_0"
                                                            data-id="selection_other_charges_id"
                                                            data-count="0"
                                                            class="form-control form-control-sm form-control-solid selection_other_charges-select2-js"
                                                            data-action="{{ route('othercharges.autocomplete') }}">
                                                    </select>
                                                </div>
                                                <a href="{{ route('othercharges.create') }}" target="_blank"
                                                   class="btn btn-primary btn-sm" type="submit">
                                                    <i class="flaticon-plus"></i>
                                                </a>
                                            </div>
                                        </td>
                                        <td>
                                            <input class="form-control form-control-sm selection_operation_js"
                                                   data-count="0"
                                                   type="text"
                                                   name="purchase_order_selection_other_charges[0][selection_operation]"
                                                   id="selection_operation_0" readonly="readonly" placeholder=""
                                                   value=""/>
                                        </td>
                                        <td>
                                            <div class="input-group">
                                                <input class="form-control form-control-sm text-right selection_charges-amount-js"
                                                       data-count="0"
                                                       type="text"
                                                       name="purchase_order_selection_other_charges[0][selection_charges_amount]"
                                                       id="selection_charges_amount_0" placeholder=""
                                                       value=""/>
                                            </div>
                                        </td>
                                        <td>
                                            <button type="button"
                                                    class="btn btn-sm btn-clean delete_selection_other_charges btn-icon"
                                                    data-repeater-delete><i
                                                        class="fas fa-trash-alt text-danger icon-md"></i>
                                            </button>
                                        </td>
                                    </tr>
                                    </tbody>
                                    <tfoot>
                                    <tr>
                                        <td colspan="4">
                                            <button type="button" class="btn btn-block btn-light-primary btn-sm"
                                                    data-repeater-create>
                                                <i class="ki ki-plus icon-1x"></i> Add More Item (Alt+i)
                                            </button>
                                        </td>
                                    </tr>
                                    </tfoot>
                                </table>
                            </div>
                        </div>
                        <br/>
                    </div>
                </div>
                <div class="row mt-5">
                    <div class="col-md-6"></div>
                    <div class="col-md-6">
                        <div class="tab-content">
                            <h5>Other Charges</h5>
                            <div class="table-responsive" id="purchase_order_other_charges_repeater">
                                <table class="table table-sm table-foot-custom table-foot-bg table-bordered">
                                    <thead class="thead-light">
                                    <tr class="text-left text-uppercase">
                                        <th scope="col" style="min-width: 100px;">Charge Name</th>
                                        <th scope="col" style="min-width: 100px;">Operation</th>
                                        <th scope="col" style="min-width: 100px;">Amount</th>
                                        <th scope="col" style="min-width: 70px;">Delete</th>
                                    </tr>
                                    </thead>

                                    <tbody data-repeater-list="purchase_order_other_charges"
                                           id="purchase_order_other_charges_tbl-js">
                                    <tr data-repeater-item data-tr_count="0" class="table_tr">
                                        <td>
                                            <div class="input-group">
                                                <input class="form-control form-control-sm"
                                                       data-count="0"
                                                       type="text"
                                                       name="purchase_order_other_charges[0][charges_name]"
                                                       id="charges_name_0" placeholder=""
                                                       value=""/>
                                            </div>
                                        </td>
                                        <td>
                                            <div class="btn-group" role="group"
                                                 aria-label="Button group with nested dropdown">
                                                <div class="btn-group" role="group">
                                                    <select name="purchase_order_other_charges[operation]"
                                                            id="operation_0"
                                                            data-id="operation"
                                                            data-count="0"
                                                            class="form-control form-control-sm form-control-solid operation-select2-js">
                                                        <option value="">Select Operation</option>
                                                        @foreach(\Modules\OtherCharges\Entities\OtherCharges::OPERATIONS as $o_key => $o_status)
                                                            <option value="{{ $o_key }}">{{ $o_status }}</option>
                                                        @endforeach
                                                    </select>
                                                </div>
                                            </div>
                                        </td>
                                        <td>
                                            <div class="input-group">
                                                <input class="form-control form-control-sm text-right charges-amount-js"
                                                       data-count="0"
                                                       type="text"
                                                       name="purchase_order_other_charges[0][charges_amount]"
                                                       id="charges_amount_0" placeholder=""
                                                       value=""/>
                                            </div>
                                        </td>
                                        <td>
                                            <button type="button"
                                                    class="btn btn-sm btn-clean delete_other_charges btn-icon"
                                                    data-repeater-delete><i
                                                        class="fas fa-trash-alt text-danger icon-md"></i>
                                            </button>
                                        </td>
                                    </tr>
                                    </tbody>
                                    <tfoot>
                                    <tr>
                                        <td colspan="4">
                                            <button type="button" class="btn btn-block btn-light-primary btn-sm"
                                                    data-repeater-create>
                                                <i class="ki ki-plus icon-1x"></i> Add More Item (Alt+i)
                                            </button>
                                        </td>
                                    </tr>
                                    </tfoot>
                                </table>
                            </div>
                        </div>
                        <br/>
                    </div>
                </div>
                <div class="row">
                    <div class="col-xl-9"></div>
                    <div class="col-xl-3">
                        <div class="form-group">
                            <label for="total_amount">Total Amount</label>
                            <input type="text"
                                   class="form-control form-control-solid total_amount-js"
                                   name="total_amount"
                                   id="total_amount"
                                   readonly>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-4">
                        <div class="form-group">
                            <label>Status</label>
                            <select class="form-control status-select2-js" id="status" name="status">
                                <option value="">Select Status</option>
                                @foreach($statuses as $key => $status)
                                    <option value="{{ $key }}"
                                            @if($status == 'Pending') selected @endif> {{ $status }} </option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <label>Purchase Order File</label>
                        <div class="input-group file_input_dev">
                            <div class="custom-file">
                                <input type="file" class="custom-file-input purchase_order_file"
                                       id="purchase_order_file"
                                       name="purchase_order_file[]" multiple>
                                <label class="custom-file-label" for="purchase_order_file">Choose File</label>
                            </div>
                        </div>
                    </div>

                </div>
            </form>
        </div>
    </div>
@endsection

@section('scripts')
    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
    <script type="text/javascript" src="{{ asset('js/modules/purchaseorder/create.js?v='.time()) }}"></script>
@endsection