@extends('st::layouts.app')

@section('head')

<!-- Prism -->
<link rel="stylesheet" href="{{ url('vendors/prism/prism.css') }}" type="text/css">
<!-- DataTable -->
<link rel="stylesheet" href="{{ url('vendors/dataTable/datatables.min.css') }}" type="text/css">
<script>
    var add_permission = "{{ Auth::user()->can('st_supplier_add')}} ";
    var edit_permission = "{{ Auth::user()->can('st_supplier_edit')}} ";
</script>
@endsection

@section('content')

<div class="page-header">
    <div>
        <h3></h3>
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb">
                <li class="breadcrumb-item">
                    <a href="#">Home</a>
                </li>
                <li class="breadcrumb-item">
                    <a href="#">Pages</a>
                </li>
                <li class="breadcrumb-item active" aria-current="page">Form Page</li>
            </ol>
        </nav>
    </div>
</div>

<div class="row">
    <div class="col-md-12">
        <div class="card ">
            <form method="POST" id="supplierForm" enctype="multipart/form-data">
                {{ csrf_field() }}
                <div class="card-body">
                    <h6 class="card-title">Supplier</h6>
                    <ul class="nav nav-pills mb-3" role="tablist" id="navMenuItem">
                        <li class="nav-item">
                            <a class="nav-link active" id="pills-general-tab" data-toggle="pill" href="#tbGeneral" role="tab" aria-controls="pills-general" aria-selected="true">General</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" id="pills-contact-tab" data-toggle="pill" href="#tbContactInfo" role="tab" aria-controls="pills-contact" aria-selected="false">Contact info</a>
                        </li>
                    </ul>
                    <br>


                    <div class="tab-content">
                        <div class="tab-pane fade show active" id="tbGeneral" role="tabpanel" aria-labelledby="pills-general-tab">

                            <div class="row">
                                <!--Left!-->
                                <div class="col-md-7">
                                    <div class="row">
                                        <div class="col-md-3 mb-2">
                                            <label for="SupplierId">Supplier ID</label>
                                            <input type="text" class="form-control required-input" name="supplierId" id="txtSupplierId" placeholder="Supplier Id">
                                            <div class="required-feedback">
                                                <i class="fa fa-exclamation-triangle text-danger" aria-hidden="true"></i>
                                                <label class="text-danger">Please enter supplier id</label>
                                            </div>
                                        </div>
                                        <div class="col-md-9 mb-2">
                                            <label for="SupplierName">Supplier Name</label>
                                            <input type="text" class="form-control required-input" name="supplierName" id="txtSupplierName" placeholder="Supplier Name">
                                            <div class="required-feedback">
                                                <i class="fa fa-exclamation-triangle text-danger" aria-hidden="true"></i>
                                                <label class="text-danger">Please enter supplier name</label>
                                            </div>
                                        </div>
                                    </div>


                                    <div class="row">
                                        <div class="col-md-12 mb-2">
                                            <label for="SupplierAddress">Supplier Address</label>
                                            <textarea class="form-control required-input" id="txtSupplierAddress" name="supplierAddress"></textarea>
                                            <div class="required-feedback">
                                                <i class="fa fa-exclamation-triangle text-danger" aria-hidden="true"></i>
                                                <label class="text-danger">Please enter supplier address</label>
                                            </div>
                                        </div>
                                    </div>


                                    <div class="row">
                                        <div class="col-md-12 mb-2">
                                            <label for="SupplierWeb">Web Address</label>
                                            <input type="text" class="form-control" name="supplierWebAddress" id="txtSupplierWebAddress" placeholder="Web Address">
                                        </div>
                                    </div>


                                    <div class="row">

                                        <div class="col-md-6 mb-2">
                                            <label for="SupplierCountry">Country</label>
                                            <select id="selcCountry" name="country" class="form-control">
                                                <option selected="true" value="disable" disabled="">Select Country</option>
                                            </select>
                                        </div>

                                        <div class="col-md-6 mb-2">
                                            <label for="SupplierDistrict">District</label>
                                            <select id="selcDistrict" name="district" class="form-control">
                                                <option selected="true" value="disable" disabled="">Select District</option>
                                            </select>
                                        </div>

                                    </div>

                                    <div class="row">
                                        <div class="col-md-12 mb-2">
                                            <label for="SupplierTown">Town</label>
                                            <select id="selcTown" name="town" class="form-control">
                                                <option selected="true" value="disable" disabled="">Select Town</option>
                                            </select>
                                        </div>
                                    </div>

                                    <div class="row">
                                        <div class="col-md-12 mb-2">
                                            <label for="SupplierGoogleMap">Google Map URL</label>
                                            <input type="text" class="form-control" name="supplierGoogleMap" id="txtSupplierGoogleMap" placeholder="Google Map URL">
                                        </div>
                                    </div>


                                    <div class="row">
                                        <div class="col-md-12 mb-2">
                                            <label for="SupplierNote">Notes</label>
                                            <textarea class="form-control" id="txtSupplierNote" name="supplierNote"></textarea>
                                        </div>
                                    </div>

                                </div>

                                <!--Center!-->
                                <div class="col-md-1"> </div>


                                <!--Right!-->
                                <div class="col-md-4">
                                    <div class="row">
                                        <div class="col-md-12 mb-2">
                                            <label for="SupplierType">Supplier Type</label>
                                            <select id="selcSupplierType" name="supplierType" class="form-control">
                                                <option selected="true" value="disable" disabled="">Select Supplier Type</option>
                                            </select>
                                        </div>
                                    </div>

                                    <div class="row">
                                        <div class="col-md-12 mb-2">
                                            <label for="SupplierType">GL Posting</label>
                                            <select id="selcGlPosting" name="glPosting" class="form-control">
                                                <option selected="true" value="disable" disabled="">Select GL Posting</option>
                                            </select>
                                        </div>
                                    </div>

                                    <div class="row">
                                        <div class="col-md-12 mb-2">
                                            <label for="SupplierBank">Bank</label>
                                            <select id="selcBank" name="bank" class="form-control">
                                                <option selected="true" value="disable" disabled="">Select Bank</option>
                                            </select>
                                        </div>
                                    </div>

                                    <div class="row">
                                        <div class="col-md-12 mb-2">
                                            <label for="SupplierBankBranch">Bank Branch</label>
                                            <select id="selcBankBranch" name="bankBranch" class="form-control">
                                                <option selected="true" value="disable" disabled="">Select Branch</option>
                                            </select>
                                        </div>
                                    </div>


                                    <div class="row">
                                        <div class="col-md-6 mb-2">
                                            <label for="SupplierVat">VAT No</label>
                                            <input type="text" class="form-control" id="txtVat" name="vat" placeholder="VAT No">
                                        </div>

                                        <div class="col-md-6 mb-2">
                                            <label for="SupplierSvat">SVAT No</label>
                                            <input type="text" class="form-control" id="txtSvat" name="svat" placeholder="SVAT No">
                                        </div>
                                    </div>



                                    <div class="row">
                                        <div class="col-md-6 mb-2">
                                            <label for="SupplierAlertCreditLimit">Alert Credit Limit</label>
                                            <input type="text" class="form-control" id="txtAlertCreditLimit" name="alertCreditLimit" placeholder="Alert Credit Limit">
                                        </div>

                                        <div class="col-md-6 mb-2">
                                            <label for="SupplierAlertCreditPeriod">Alert Credit Period</label>
                                            <input type="text" class="form-control" id="txtAlertCreditPeriod" name="alertCreditPeriod" placeholder="Alert Credit Period">
                                        </div>
                                    </div>


                                    <div class="row">
                                        <div class="col-md-6 mb-2">
                                            <label for="SupplierHoldCreditLimit">Hold Credit Limit</label>
                                            <input type="text" class="form-control" id="txtHoldCreditLimit" name="holdCreditLimit" placeholder="Hold Credit Limit">
                                        </div>

                                        <div class="col-md-6 mb-2">
                                            <label for="SupplierHoldCreditPeriod">Hold Credit Period</label>
                                            <input type="text" class="form-control" id="txtHoldCreditPeriod" name="holdCreditPeriod" placeholder="Hold Credit Period">
                                        </div>
                                    </div>

                                    <div class="row">
                                        <div class="col-md-12 mb-2">
                                            <label for="SupplierDistance">Distance(Km)</label>
                                            <input type="text" class="form-control float" id="txtDistance" name="distance" placeholder="Distance">
                                        </div>
                                    </div>


                                </div>
                            </div>

                        </div>
                        <div class="tab-pane fade" id="tbContactInfo" role="tabpanel" aria-labelledby="pills-contact-tab">
                            <div class="row">
                                <div class="col-md-4 mb-3">
                                    <button type="button" id="btnAddContact" class="btn btn-primary" data-target="" data-whatever="@getbootstrap" name="addContact">
                                        <i class="fa fa-plus" aria-hidden="true"></i>
                                    </button>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-12">
                                    <div class="table-responsive">
                                        <!-- Required for Responsive -->
                                        <table class="table">
                                            <thead>
                                                <tr>
                                                    <th>Email</th>
                                                    <th>Designation</th>
                                                    <th>Fixed Mobile</th>
                                                    <th>Mobile</th>
                                                    <th>SMS</th>
                                                    <th>Email</th>
                                                    <th>Primary</th>
                                                    <th>Edit</th>
                                                    <th>Delete</th>
                                                </tr>
                                            </thead>
                                            <tbody id="tblContacts"></tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>

                        </div>
                    </div>
                </div>
            </form>
            <div class="card-footer employeeSave">
                <div class="row">
                    <div class="col-md-1">
                        <button type="button" class="btn btn-primary" id="btnAction">Save</button>
                    </div>
                    <div class="col-md-1">
                        <button type="button" class="btn btn-warning" id="btnReset" onclick="resetSupplier()">Reset</button>
                    </div>
                </div>
            </div>
        </div>
    </div>


    <div class="modal fade" id="contactModal" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="contactModalTitle">Add contact</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <i class="ti-close"></i>
                    </button>
                </div>
                <input type="hidden" id="contactID" name="contactID" value>
                <div class="modal-body" id="contactModalBody">
                    <div class="form-row">

                        <div class="col-md-12">
                            <div class="row">
                                <div class="col-md-12 mb-2">
                                    <label for="SupplierEmail">Email</label>
                                    <input type="text" class="form-control" name="supplierEmail" id="txtSupplierEmail" placeholder="Email">
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-12 mb-2">
                                    <label for="SupplierDesignation">Designation</label>
                                    <input type="text" class="form-control" name="supplierDesignation" id="txtSupplierDesignation" placeholder="Designation">
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-6">
                                    <label for="SupplierFixedMobile">Fixed Mobile</label>
                                    <input type="text" class="form-control" name="supplierFixedMobile" id="txtSupplierFixedMobile" placeholder="Fixed Mobile">
                                </div>
                                <div class="col-md-6">
                                    <label for="SupplierMobile">Mobile</label>
                                    <input type="text" class="form-control" name="supplierMobile" id="txtSupplierMobile" placeholder="Mobile">
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-4 mt-3" id="primaryContactDiv">
                                    <input type="checkbox" id="checkPrimaryContact" name="primaryContact">Primary Contact
                                </div>
                                <div class="col-md-4 mt-3" id="smsAlertDiv">
                                    <input type="checkbox" id="checkSMSalert" name="smsAlert">SMS Alert
                                </div>
                                <div class="col-md-4 mt-3" id="emailAlertDiv">
                                    <input type="checkbox" id="checkEmailAlert" name="emailAlert" value="true">Email Alert
                                </div>
                            </div>
                        </div>

                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-danger" data-dismiss="modal">Close
                    </button>
                    <button type="button" class="btn btn-primary" id="btnAdd">Add</button>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

<!-- Javascript -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
@section('script')

<!-- Prism -->
<script src="{{ url('vendors/prism/prism.js') }}"></script>
<!-- DataTable -->
<script src="{{ url('vendors/dataTable/datatables.min.js') }}"></script>

<script src="{{ Module::asset('st:js/rquired_input.min.js') }}?random=67d5fccf3b0e2"></script>
<script src="{{ Module::asset('st:js/numeric.js') }}?random=67d5fccf3b0e5"></script>
<script src="{{ Module::asset('st:js/supplier.js') }}?random=67d5fccf3b0e6"></script>
@endsection