@extends('admin.layout.master')
@section('title','DISTRIBUTION MANAGEMENT')
@section('custom_style')
<style>
   .table-wrp {
        max-width: 100%;
        max-height: calc(100vh - 140px);
        overflow: scroll;
        position: relative;
    }

    .table {
        position: relative;
        /* border-collapse: collapse; */
        border-collapse: separate;
        border-spacing: 0px;
    }

    td, th {
        padding: 10px;
    }

    .table thead th {
        position: -webkit-sticky; /* for Safari */
        position: sticky;
        top: 0;
        background: #e2e2e2; 
        color: black;
        z-index: 1;
        text-align: center;
        border: 1px solid red;
    }
    
    .table tfoot th {
        position: -webkit-sticky; /* for Safari */
        position: sticky;
        top: 0;
        background: #e2e2e2; 
        /* background: rgb(255, 255, 255); */
        color: rgb(0, 0, 0);
        z-index: 1;
        text-align: center;
        border: 1px solid red;
    }

    .table thead th:first-child { 
        z-index: 2;
    }

    tbody th:first-child{
        position: -webkit-sticky; /* for Safari */
        position: sticky;
        left: 0;
        background: #e2e2e2; 
        /* background: #FFF; */
        z-index: 3;
    }

    tbody th:nth-child(2){
        position: -webkit-sticky; /* for Safari */
        position: sticky; 
        left: 34px;
        background: #e2e2e2; 
        /* background: #FFF; */
        z-index: 3;
    }

    tbody th:nth-child(3) {
        position: -webkit-sticky; /* for Safari */
        position: sticky;
        left: 130px;
        background: #e2e2e2; 
        /* background: #FFF; */
        z-index: 3;
    }
    /* tbody th:nth-child(4) {
        position: -webkit-sticky; 
        position: sticky;
        left: 163px;
        background: #FFF;  
        z-index: 3;
    } */
 
    .table .first-head-tr th:nth-child(1) {
        position: -webkit-sticky; /* for Safari */
        position: sticky;
        left: 0;
        /* background: #FFF; */
        z-index: 4;
    }

    .table .first-head-tr th:nth-child(2) {
        position: -webkit-sticky; /* for Safari */
        position: sticky; 
        left: 34px;
        /* background: #FFF; */
        z-index: 4;
    }

    .table .first-head-tr th:nth-child(3) {
        position: -webkit-sticky; /* for Safari */
        position: sticky;
        left: 130px;
        /* background: #FFF; */
        z-index: 4;
    }
    /* .table .first-head-tr th:nth-child(4) {
        position: -webkit-sticky; 
        position: sticky;
        left: 163px;
        background: #FFF; 
        z-index: 4;
    } */
    .table .third-head-tr th:nth-child(1) {
        z-index: 4;    
    }

    .table .third-head-tr th:nth-child(n) {
        position: -webkit-sticky; 
        position: sticky;
        left: 0px;
        /* background: #FFF; */
        top: 90px;
    }
    
    /* tr td:last-child {
        position: -webkit-sticky;  
        position: sticky;
        right: 0;
        background: rgb(255, 255, 255);
        z-index: 0;
    
    } */
    
    .table .second-head-tr > th {
        top: 45px;
    }
 

    /* Selects the last three elements */
    /* tr > td:nth-last-child(-n+3) {
        background-color: pink;
    }
    tr > th:nth-last-child(-n+3) {
        background-color: pink;
    } */
    .inp_bdr {
        border: 1px solid;
    }
</style>
@endsection
@section ('content')
<div class="card sina-card mb-0">
    <div class="card-header card-header-s">
        <h4>DISTRIBUTION</h4>
    </div>
    <div class="card-body">    
        <input type="hidden" name="" id="csrf-token" value="{{ Session::token() }}" />
        <div class="row">
            <label class="pl-3" for="product_id">Finished Product</label>
            <div class="col-md-12 d-flex"> 
                <select name="product_id[]" style="width: 100%" id="product_id" class="form-control finished_product" multiple> </select> 
                <button type="button" id="btn_sub" class="btn btn-pill btn-sm btn-hover btn-danger" onclick="generateTable()">
                    <i class="fa fa-search"></i>
                </button> 
            </div> 
        </div> 
       <hr> 
       <form id="form" method="post" action="{{ route('issue.distribution-store') }}" name="form" enctype="multipart/form-data">
            <div class="table-wrp table-responsive"  style="display: none !important" id="div_tbl">
                @csrf
                <table class="table Dtable table-striped table-bordered dataTable no-footer" id="tbl">
                     
                </table> 
                
                <div class="stickybutton">
                    <button class="btn btn-sm btn-success btn-pill" style="font-size: 16px" onclick="addRow()" type="button" name="add_Row" id="add_Row"> <i class="fa fa-plus"></i></button>
                </div>
            </div>
            <div class="row pb-0 mt-2 modal-footer">
                <a type="button" class="btn-sina-close" href="{{ route('issue.index') }}">close</a>
                <input class="btn-sina-submit" type="submit" id="save" value="save"> 
            </div>
        </form> 
    </div>
</div>
@endsection

@section('script')
    {{-- <script type="text/javascript" src="{{ asset('inventory/blade_js/product/inventory-default.js') }}"></script> --}}
    <script type="text/javascript" src="{{ asset('inventory/blade_js/product/issue/distribution.js') }}"></script>
    <script>  
        var issue_setting = @json(getDefaultsettings(8));  
        var production_setting = @json(getDefaultsettings(12));  
        var store_setting = @json(warehouse_info());
    </script>
@endsection