@extends('layouts.main')

@push('page_headers')
<div class="row my-md-4 my-3" >
    <div class="col-lg-5 col-md-4 col-xl-5" ></div>
    <div class="col-lg-7 col-md-8 col-xl-7 col-12 text-end" >
        <div class="btn-rgt_div mr-auto d-block">
            <div class="btn-rgt_div_container w-100 d-flex justify-content-end">
                <div class="btn_primary_fade dwnAs">
                    <button role="button" onclick='CompanyObj.listFilterFormOpen()' class="pt-2 align-items-center">
                        <img src="public/assets/img/icn/search.svg" class="w-16" alt="Plus" />
                    </button>
                </div>
                <div class="btn_primary_fade dwnAs ms-2">
                    <button role="button" onclick='CompanyObj.addNewItemModalInit()' class="pt-2 d-flex justify-center px-3 align-items-center">
                        <img src="public/assets/img/icn/plus.svg" class="w-12 plus text-white" alt="Plus" /><span class="ms-2 text-white text-nowrap">Add Company</span>
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>
@endpush

@section('content')
<div class="mn-bdy_dv_tbl_container">
    <table class="table table-bordered" id="listingTbl">
        <thead>
            <tr>
                <th class="text-nowrap text-uppercase">Sr. No.</th>
                <th class="text-nowrap text-uppercase">Logo</th>
                <th class="text-nowrap text-uppercase">Company Name</th>
                <th class="text-nowrap text-uppercase">CIN</th>
                <th class="text-nowrap text-uppercase">GSTIN</th>
                <th class="text-nowrap text-uppercase">PAN CARD</th>
                <th class="text-nowrap text-uppercase">Download</th>
                <th class="text-nowrap text-uppercase">NO. OF EMPLOYEES</th>
            </tr>
        </thead>
        <tbody></tbody>
    </table>
</div>

<!-- Pagination Container - Outside Table -->
<div class="pagination-container">
    <div class="row">
        <div class="col-md-12 col-sm-12 col-12 text-end">
            <ul class="pagination_link pagination-sm"></ul>
        </div>
    </div>
</div>
@stop

@push('page_modals')
<div class="modal fade" id="listFilterModal" tabindex="-1" aria-labelledby="listFilterModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header bg-body-secondary rounded-0">
                <h5 class="modal-title" id="listFilterModalLabel">Search</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <form id="listFilterForm" method="post" onsubmit="CompanyObj.listFilterFormSubmitHandler(event)">
                    <div class="card bg-white border-0">
                        <div class="card-body">
                            <div class="tab row">
                                <div class="col-sm-4">
                                    <div class="mb-3 frm-inp_div">
                                        <label for="cpyNme1" class="form-label">Company Name</label>
                                        <input type="text" name="search_name" class="form-control" autocomplete="off" data-label="Company Name" data-filter_type=" : ">
                                    </div>
                                </div>
                                <div class="col-sm-4">
                                    <div class="mb-3 frm-inp_div">
                                        <label for="cpyNme1" class="form-label">CIN</label>
                                        <input type="text" name="search_cin" class="form-control" autocomplete="off" data-label="Company CIN" data-filter_type=" : ">
                                    </div>
                                </div>
                                <div class="col-sm-4">
                                    <div class="mb-3 frm-inp_div">
                                        <label for="cpyNme1" class="form-label">GSTIN</label>
                                        <input type="text" name="search_gstin" class="form-control" autocomplete="off" data-label="GST" data-filter_type=" : ">
                                    </div>
                                </div>
                                <div class="col-sm-4">
                                    <div class="mb-3 frm-inp_div">
                                        <label for="cpyNme1" class="form-label">Pan</label>
                                        <input type="text" name="search_pan" class="form-control" autocomplete="off" data-label="PAN" data-filter_type=" : ">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer bg-body-secondary py-2 rounded-0">
                <button type="submit" id="next_button" form="listFilterForm" class="btn btn-primary">Submit</button>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="addItemModal" tabindex="-1" aria-labelledby="addItemModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-xl">
        <div class="modal-content">
            <div class="modal-header bg-body-secondary rounded-0">
                <h5 class="modal-title" id="addItemModalLabel">Search</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <div class="slr-div_form">
                    <div class="card bg-white border-0">
                        <div class="card-body">
                            <div class="tab">
                                <form id="addItemForm" class="row frm_emp_prsnl_dtl mt-3" method="post" onsubmit="CompanyObj.addItemFormSubmitHandler(event)" enctype="multipart/form-data">
                                    @csrf
                                    <input type="hidden" name="_token" value="{{ csrf_token() }}">
                                    <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
                                        <div class="mb-3 frm-inp_div">
                                            <label for="cpyNme1" class="form-label">Company Name<span>*</span></label>
                                            <input type="hidden" name="id" />
                                            <input type="text" class="form-control" name="name" required="" placeholder="Comapny Name">
                                        </div>
                                    </div>
                                    <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
                                        <div class="mb-3 frm-inp_div">
                                            <label for="cpyLogo1" class="form-label">Company Logo<span>*</span></label>
                                            <input class="form-control" accept="image/*" name="file" required="" type="file">
                                        </div>
                                    </div>
                                    <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
                                        <div class="mb-3 frm-inp_div">
                                            <label for="cin1" class="form-label">CIN<span>*</span></label>
                                            <input type="text" class="form-control" name="cin" required="" placeholder="CIN">
                                        </div>
                                    </div>
                                    <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
                                        <div class="mb-3 frm-inp_div">
                                            <label for="cin1" class="form-label">GSTIN<span>*</span></label>
                                            <input type="text" class="form-control" name="gstin" required="" placeholder="GSTIN">
                                        </div>
                                    </div>
                                    <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
                                        <div class="mb-3 frm-inp_div">
                                            <label for="cpypan1" class="form-label">PAN No.<span>*</span></label>
                                            <input type="text" class="form-control" name="pan" required="" placeholder="PAN No.">
                                        </div>
                                    </div>
                                    <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
                                        <div class="mb-3 frm-inp_div">
                                            <label for="cpypan1" class="form-label">Address<span>*</span></label>
                                            <input type="text" class="form-control" name="address" required="" placeholder="Address">
                                        </div>
                                    </div>
                                    <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                                        <div class="mb-3 frm-inp_div">
                                            <label for="cpyRrk1" class="form-label">Remarks<span></span></label>
                                            <input type="text" class="form-control" name="remark" placeholder="remark">
                                        </div>
                                    </div>
                                    <div class="col-12">
                                        <div class="d-flex mt-3">
                                            <button type="submit" class="btn nextBtn__ btn-primary me-3">Add</button>
                                            <button type="button" onclick="CompanyObj.addItemFormSubmitHandler(event, true)" class="btn btn-success me-3">Save & Next</button>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="viewItemModal" tabindex="-1" aria-labelledby="viewItemModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-xl">
        <div class="modal-content">
            <div class="modal-header bg-body-secondary rounded-0">
                <h5 class="modal-title" id="viewItemModalLabel">Company Detail</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <div class="slr-div_form">
                    <div class="card bg-white border-0">
                        <div class="card-body">
                            <div class="tab">
                                <div class="row frm_emp_prsnl_dtl mt-3 conpany_detail">

                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endpush

@push('page_scripts')
<script type="text/javascript">

    class Company extends BaseClass {

        constructor() {
            super();

            this.listingTbl                 =   document.getElementById('listingTbl');
            this.listingTblThLength         =   this.listingTbl.querySelector('thead tr').cells.length;
            this.listData                   =   [];
            this.listMeta                   =   null;
            this.listPageNumber             =   1;
            this.per_page                   =   100;

            this.listFilterForm             =   document.getElementById('listFilterForm');
            this.listFilterModalElem        =   document.getElementById('listFilterModal');
            this.listFilterModal            =   new bootstrap.Modal(this.listFilterModalElem, {keyboard: false, backdrop : 'static'});

            this.addItemForm                =   document.getElementById('addItemForm');
            this.addItemModalElem           =   document.getElementById('addItemModal');
            this.addItemModal               =   new bootstrap.Modal(this.addItemModalElem, {keyboard: false, backdrop : 'static'});

            this.viewItemModalElem          =   document.getElementById('viewItemModal');
            this.viewItemModal              =   new bootstrap.Modal(this.viewItemModalElem, {keyboard: false, backdrop : 'static'});

            this.list_url                   =   '