@extends('LifeAtGainup.Navbar.header')

@section('title', 'MERCHANDISER ORDER DETAILS')

@section('content')
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/css/select2.min.css" rel="stylesheet" />
<style>
   /*TAble popup*/

   #tip-first {
    display: none;
}
.select2-container .select2-selection--multiple .select2-selection__choice {
        color: #191818 !important;
    }

   .tooltip-inner {
    background-color: #add8e6;  /* Light blue background */
            color: black;  /* Text color */
            border: 1px solid #ccc;  /* Optional: Light border */
            padding: 10px;  /* Padding around the tooltip content */
            max-width: none;  /* Allow tooltip to adjust width automatically */
            white-space: normal; 
 
}

  
.status-container {
    display: flex;
    justify-content: flex-end; /* Pushes the status boxes to the end of the container */
    gap: 10px;
}

.status-box {
    width: 100px;
    height: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    font-weight: bold;
    border-radius: 5px;
}

.pending {
    background-color: red;
}

.done {
    background-color: green;
}

.late {
    background-color: orange;
}


   @media screen and (min-device-width: 1000px) and (max-device-width: 2400px) {

   .modal-contentt {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 50%;
    margin-left: 25%;
    color: var(--bs-modal-color);
    pointer-events: auto;
    background-color: var(--bs-modal-bg);
    background-clip: padding-box;
    border: var(--bs-modal-border-width) solid var(--bs-modal-border-color);
    border-radius: var(--bs-modal-border-radius);
    outline: 0;
}
   }
   @media screen and (min-device-width: 3px) and (max-device-width: 900px) {
    .modal-contentt {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;

    color: var(--bs-modal-color);
    pointer-events: auto;
    background-color: var(--bs-modal-bg);
    background-clip: padding-box;
    border: var(--bs-modal-border-width) solid var(--bs-modal-border-color);
    border-radius: var(--bs-modal-border-radius);
    outline: 0;

}
   }
   .countBadge {
    position: absolute;
    top: -4px;
    right: -4px;
    background-color: red;
    color: white;
    border-radius: 50%;
    padding: 0px 2px;
    font-size: 8px;
    font-weight: bold;
        }
.caro_wid{

    width: 500px;
    height: 300px;
}
.caro_wid_center{
    justify-content: center;
    align-items: center;
    display: flex;
}

   .carousel-control-prev-icon,
.carousel-control-next-icon {
    background-color: red; /* Sets the background color to red */
    /* If you want to change the icon color itself, you may need to use a different approach depending on your setup */
}

.carousel-control-prev-icon,
.carousel-control-next-icon {
    /* For custom icons or to ensure proper visibility */
    background-size: 100%, 100%; /* Adjust if necessary */
    background-repeat: no-repeat;
    background-position: center;
}

.carousel-control-prev-icon:before,
.carousel-control-next-icon:before {
    /* Set a color for icons if they are font icons */
    color: red; /* This will work if icons are font icons like from FontAwesome */
}

   table.dataTable thead>tr>th.sorting, table.dataTable thead>tr>th.sorting_asc, table.dataTable thead>tr>th.sorting_desc, table.dataTable thead>tr>th.sorting_asc_disabled, table.dataTable thead>tr>th.sorting_desc_disabled, table.dataTable thead>tr>td.sorting, table.dataTable thead>tr>td.sorting_asc, table.dataTable thead>tr>td.sorting_desc, table.dataTable thead>tr>td.sorting_asc_disabled, table.dataTable thead>tr>td.sorting_desc_disabled {

 padding-right: 17px;
}
.greencolor, .greencolor td{
    background-color: #ff0d0d33 !important;
}
   .header-fixed {
                            position: sticky;
                            top: 0px;
                            background-color: white;
                          }
   .table_popup{
        font-size: 11px !important;
    }
    .modal_popup{
        max-width: 1250px !important;
    }

    .ocrstatuscon {
        max-height: 800px;
        overflow-y: auto;
        overflow-x: auto;
    }

    .ocrstatus {
        width: 100%;
        border-collapse: collapse;
    }

    .ocrstatus thead th {
        position: sticky;
        top: 0;
        background-color: #fff;
        z-index: 10;
    }

    .ocrstatus th,
    .ocrstatus td {
        white-space: nowrap;
        text-align: center;
    }

    .sideallign{
        text-align: end !important;
    }

    .dt-button.buttons-pdf,
        .dt-button.buttons-html5 {
            padding: 2px 9px !important;
        }

    table.dataTable.no-footer{
        border-top: 1px solid rgba(0, 0, 0, 0.3);
    }
    table.dataTable{
        border-top: 1px solid rgba(0, 0, 0, 0.3);
        border-bottom: 1px solid rgba(0, 0, 0, 0.3);
    }


    table.dataTable thead>tr>th.sorting, table.dataTable thead>tr>th.sorting_asc, table.dataTable thead>tr>th.sorting_desc, table.dataTable thead>tr>th.sorting_asc_disabled, table.dataTable thead>tr>th.sorting_desc_disabled, table.dataTable thead>tr>td.sorting, table.dataTable thead>tr>td.sorting_asc, table.dataTable thead>tr>td.sorting_desc, table.dataTable thead>tr>td.sorting_asc_disabled, table.dataTable thead>tr>td.sorting_desc_disabled {
        padding-right:17px !important;
    }

    .budget_abstract{
        width: 700px !important;
    font-size: 14px !important;
    }

    #noteText{
        color: blue !important;
    }
    .table_popup thead th {
    font-weight: bold;
}

.table_popup tfoot td {
    font-weight: bold;
}

.highlight-yellow {
    background-color: #deef636b !important; 
}

.highlight-green {
    background-color: #93ff8f45 !important; 
}

.highlight-red {
    background-color: #eea0936b !important; 
}

#dataTablee_wrapper .dt-buttons {
    margin-left: 15px;
    margin-top: 48px;
}

.centerallign{
    text-align: center !important;
}

    /* Your existing styles */
</style>

<div id="layout-wrapper">
    <div class="main-content">
        <div class="page-content">
            <div class="container-fluid">
            <div class="row">
                    <div class="col-xxl-12">
                        <div class="card">
                            <div class="card-header">
                            <div class="row">
                                    <div class="col-md-6">
                                        MERCHANDISER ORDER DETAILS
                                    </div>
                                   
                                </div>

                            </div>
                            <div class="card-body">
                                <!-- Start of Form -->
                                <form id="filterForm">
                                    <div class="row">
                                        <!-- DIVISION -->
                                        <div class="col-md-3">
                                            <div class="mb-3">
                                                <label for="division" class="form-label">DIVISION</label>
                                                <select class="form-control select2" name="division" id="division">
                                                    

                                                    <option value="Woven" selected="selected">Woven</option>

                                                    
                                                </select>
                                            </div>
                                        </div>


                                        <div class="col-md-3">
                                            <div class="mb-3">
                                                <label for="buyer_name" class="form-label">BUYER NAME</label>
                                                <select class="form-control select2" name="buyer_name[]" id="buyer_name" multiple="multiple">
                                                    <option value="">Select Buyer</option>
                                                    
                                                </select>
                                            </div>
                                        </div>

                                        <!-- BUYER PO / REF NO. -->
                                        <div class="col-md-3">
                                            <div class="mb-3">
                                                <label for="buyer_po" class="form-label">BRAND</label>
                                                <select class="form-control select2" name="brand[]" id="brand" multiple="multiple">
                                                    <option value="">Select Brand</option>
                                                    
                                                  
                                                
                                                    </select>
                                            </div>
                                        </div>

                                    <!-- OCN NO. -->
                                        <div class="col-md-3">
                                            <div class="mb-3">
                                                <label for="ocn_no" class="form-label">SEASON</label>
                                                <select class="form-control select2" name="season[]" id="season" multiple="multiple"><option value="">--Select Season--</option>
                                                
                                               </select>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <!-- ORDER DATE -->
                                        <div class="col-md-3">
                                            <div class="mb-3">
                                                <label for="cc" class="form-label">CC
                                                </label>
                                                <select class="form-control select2" name="cc[]" id="cc" multiple="multiple"><option value="">--Select CC--</option>
                                                
                                                </select>
                                            </div>
                                        </div>
                                        <div class="col-md-3">
                                            <div class="mb-3">
                                                <label for="cc" class="form-label">MODEL + COLOR
                                                </label>
                                                <select class="form-control select2" name="model_color[]" id="model_color" multiple="multiple"><option value="">--Select Model+Color--</option>
                                                
                                                </select>
                                            </div>
                                        </div>
                                        <!-- COMPLETE KIT DATE -->
                                        <!-- <div class="col-md-3">
                                            <div class="mb-3">
                                                <label for="kit_date" class="form-label">Plan Month
                                                </label>
                                                <input type="text" name="plan_month" id="plan_month"  value="" class="form-control " >
                                            </div>
                                        </div> -->

                                        <!-- SHIPMENT DATE --> 
                                        <div class="col-md-3">
                                            <div class="mb-3">
                                                <label for="ck_date" class="form-label">FRC CK DATE</label>
                                                <input type="text" name="ck_date" id="ck_date"  value="" placeholder="dd-mm-yyyy" class="form-control flatpickr-input" >
                                            </div>
                                        </div>
                                        <div class="col-md-3">
                                            <div class="mb-3">
                                                <label for="shipment_date" class="form-label">SHIPMENT DATE</label>
                                                <input type="text" name="shipment_date" id="shipment_date"  value="" placeholder="dd-mm-yyyy" class="form-control flatpickr-input" >
                                            </div>
                                        </div>
                                        <div class="col-md-3">
                                            <div class="mb-3">
                                                <label for="merch_name" class="form-label">MERCHANDISER NAME</label>
                                                <select class="form-control select2" name="merch_name[]" id="merch_name" multiple="multiple"><option value="">--Select Merchandiser Name--</option>
                                                
                                            </select>
                                            </div>
                                        </div>
                                        <input type="hidden" name="emp_id" id="emp_id" value="{{Session('empl_id')}}">
                                        <!-- <div class="col-md-3">
                                            <div class="mb-3">
                                                <label for="file_status" class="form-label">File STATUS</label>
                                                <select class="form-control select2" name="file_status" id="file_status">
                                                    <option value="">--Select Status--</option>
                                                    <option value="Pending">Pending</option>
                                                    <option value="Closed">Closed</option>
                                                </select>
                                            </div>
                                        </div> -->


                                     <!-- ORDER STATUS -->
                                    

                                    </div>
                                    <div class="row">
                                  
                                    </div>

                                    <!-- Submit Button -->
                                    <div class="row mt-3">
                                        <div class="col-md-12">
                                            <button type="submit" class="btn btn-primary">Filter</button>
                                            <button type="button" id="resetButton" class="btn btn-secondary">Reset</button>

                                        </div>
                                        <div id="preloder" style="display: none;">
                                            <div class="lds-hourglass">

                                            </div>
                                    </div>
                            </form>

                             <div class="table-responsive mt-4 table-card" style="max-height:700px; ">
                                    <table class="table table-hover table-centered align-middle" id="dataTablee">
                                   


    <tfoot align="right">
            <tr>
                <th colspan="7">Total</th>
                <th ></th>
                <th id="totalSelQty"></th>
                
               
                
                <th ></th>
                <th id="totalprodQty"></th>
                <th id="totalcfmQty"></th>
                <th id="totalshdiffQty"></th>
                <th id="totalshippQty"></th>
                <th id="totalshipdiff"></th>
                <th ></th>
                <th id="totalshipQty"></th>
                <th id="totalshortship"></th>
                <th colspan="2"></th>
            </tr>
        </tfoot>
                                        <thead class="text-muted table-light" style="font-size: 11px;">
                                            <tr>
                                            <th style="position: sticky; top: 0; background: white; z-index: 10;">SNO</th>
                                                <th style="position: sticky; top: 0; background: white; z-index: 10;">CC
                                                </th>
                                                <th style="position: sticky; top: 0; background: white; z-index: 10;">Model + Color
                                                </th>
                                                <th style="position: sticky; top: 0; background: white; z-index: 10;">DMI /DSI
                                                </th>
                                                <th style="position: sticky; top: 0; background: white; z-index: 10;">Season
                                                </th>
                                                <th style="position: sticky; top: 0; background: white; z-index: 10;">FRC/CK Date
                                                </th>
                                                <th style="position: sticky; top: 0; background: white; z-index: 10;">Shipped Date
                                                </th>
                                              
                                               
                                                
                                                <th style="position: sticky; top: 0; background: white; z-index: 10;">Proj Qty
                                                </th>
                                                <th style="position: sticky; top: 0; background: white; z-index: 10;">Sel Qty
                                                </th>
                                                <th style="position: sticky; top: 0; background: white; z-index: 10;">FRC Qty
                                                </th>
                                               
                                                <th style="position: sticky; top: 0; background: white; z-index: 10;">C/O Qty
                                                </th>
                                              
                                                <th style="position: sticky; top: 0; background: white; z-index: 10;">Prod Qty
                                                </th>
                                                <th style="position: sticky; top: 0; background: white; z-index: 10;">Buyer Po Qty
                                                </th>
                                                <th style="position: sticky; top: 0; background: white; z-index: 10;">Ship Qty

                                                </th>
                                                <th style="position: sticky; top: 0; background: white; z-index: 10;">Ship Diff</th>
                                                <!-- <th style="position: sticky; top: 0; background: white; z-index: 10;">PO's Status</th> -->
                                                <th style="position: sticky; top: 0; background: white; z-index: 10;">Prod Status

                                                </th>
                                                <th style="position: sticky; top: 0; background: white; z-index: 10;">Past EHD

                                                </th>
                                                <th style="position: sticky; top: 0; background: white; z-index: 10;">Short Ship
                                                </th>
                                                
                                               
                                                <th style="position: sticky; top: 0; background: white; z-index: 10;">Brand
                                                </th>
                                                <th style="position: sticky; top: 0; background: white; z-index: 10;">Merch
                                                </th>
                                            </tr>
                                        </thead>
                                        
                                        <tbody style="font-size: 11px">
                                            <!-- Data will be loaded here via AJAX -->
                                          
                                        </tbody>
                                    </table>
                              
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            </div>
        </div>
    </div>
</div>






<div class="modal fade" id="tableModalocrstatus" tabindex="-1" aria-labelledby="tableModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg modal_popup">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title " id="tableModalLabel">Projection Status</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
            <div class="table-container ocrstatuscon">
            <!-- <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
                Launch demo modal
            </button> -->
            
            <table class="table table-bordered table_popup table_production" id="detailsTable">
                <thead class="header-fixed">
                    
                    <tr>
                        <th >S.No</th>
                        <th>PRJ No</th>
                        <th> PRJDATE</th>
                        <th>  APPDATE</th>
                        <th>  CK_DATE</th>
                        <th>  SHIPDATE</th>
                        <th >PRJ QTY</th>
                        <th >MODEL Code</th>
                        <th >Item Code</th>
                        <th >FABRIC</th>
                        <th >REQ QTY</th>
                        <th >PO QTY</th>
                        <th >GRN QTY</th>
                        <th >GRN Rej QTY</th>
                        <th >UOM</th> 
                        <th >PO PND</th>
                        <th >GRN PND</th>
                        <th >CONS / PCS</th>
                        <th >PLAN PO FG QTY</th>
                        <th >GRN FG QTY</th>
                        <th >Src</th>
                        <th >LEAD DAYS</th>
                    </tr>
                    
                </thead>
                <tbody>
              
                   
                    
                </tbody>
            </table>
            </div>

            </div>
            <!-- <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
            </div> -->
        </div>
    </div>
</div>

<div class="modal " id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Filter Search</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
     
  <div class="form-group">
    <label for="exampleInputEmail1">Pro Number</label>
    <select id="pro_number" class="form-select">
                            <option value="">Select Item</option>
    </select>
  </div>
  <div class="form-group">
    <label for="exampleInputPassword1">App Date</label>
    <input type="text" name="ck_date" id="app_date"  value="" placeholder="dd-mm-yyyy" class="form-control flatpickr-input" readonly="readonly">
    
  </div>
 
  <button  class="btn btn-primary tadetails_search">Submit</button>

      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>



<div class="modal fade" id="tableModalfcrstatus" tabindex="-1" aria-labelledby="tableModalLabelFRC" aria-hidden="true">
    <div class="modal-dialog modal-lg modal_popup">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title " id="tableModalLabelFRC">FRC Status</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
            <div class="table-container ocrstatuscon">

            
            
            <table class="table table-bordered table_popup tableproduction" id="detailsTable_frc">
                <thead class="header-fixed">
                    <tr>
                    <th colspan="38" style="text-align: left;" class = "frc_status_qty">GIL/OCN03990</th>
                    </tr>
                    <tr>
                        <th >S.No</th>
                        <th>FRC No</th>
                        <th>FRCDATE</th>
                        <th>APPDATE</th>
                        <th>CKDATE</th>
                        <th>SHIPDATE</th>
                        <th >FRC QTY</th>
                        <th >MODEL Code</th>
                        <th >Item Code</th>
                        <th >TRIMS</th>
                        <th >REQ QTY</th>
                        <th >PO QTY</th>
                        <th >GRN QTY</th>
                        <th >UOM</th>
                        <th >PO PND</th>
                        <th >GRN PND</th>
                        <th >CONS / PCS</th>
                        <th >PLAN PO FG QTY</th>
                        <th >GRN FG QTY</th>
                        <th >Src</th>
                        <th >LEAD DAYS</th>
                    </tr>
                  
                </thead>
                <tbody>
              
                   
                   
                </tbody>
            </table>
            </div>

            </div>
            <!-- <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
            </div> -->
        </div>
    </div>
</div>















<div id="tip-first" class="tip-content hidden">
    
<div class="container ">
    <div class="row">
        <!-- This column will take up 6 out of 12 columns (50% of the width) -->
        <div class="col-6">
            <p> Consumption</p>
            <hr>
            <p>METER</p>
        </div>

        <!-- Another column that also takes up 6 out of 12 columns (50% of the width) -->
        <div class="col-6">
        <p>Shipped QTY</p>
            <hr>
            <p>KG</p>
        </div>
    </div>
</div>

</div>



@endsection


@section('script')

<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/js/select2.min.js"></script>
<!-- FixedColumns CSS -->





<script>
var productionTable; 
function initializeDataTable() {
    if ($.fn.dataTable.isDataTable('#detailsTable')) {
        return; 
    }
    productionTable = $('#detailsTable').DataTable({
        paging: false,  
        searching: true,  
        ordering: true,  
        responsive: true, 
        order: [[0, 'asc']],  
        columnDefs: [
            {
                targets: [2, 3, 4, 5], 
                type: 'date-dd-mm-yyyy'  
            },
        ],
        dom: 'Bfrtip',  
        buttons: [
            {
                extend: 'excelHtml5',
                title: 'PRODUCTION DETAILS',
                exportOptions: {
                    columns: ':visible'
                },
                footer: true
            },
            {
                extend: 'pdfHtml5',
                text: 'PDF',
                titleAttr: 'PROJ DETAILS',
                orientation: 'landscape',
                pageSize: 'A3',
                exportOptions: {
                    columns: ':visible'
                },
                customize: function(doc) {
                    doc.defaultStyle.fontSize = 7; 
                    doc.content[1].table.widths = 'auto';  
                    doc.content[1].table.dontBreakRows = true;  
                }
            }
        ],
        footerCallback: function (row, data, start, end, display) {
           
        }
    });
}
initializeDataTable();

$(document).on('click', '.tadetails', function() {
    
    let division = $(this).data('division');
    let ccNo = $(this).data('cc-no');
    let modelColor = $(this).data('model_color');
   
    $('#tableModalocrstatus').data('cc-no', ccNo)
                              .data('division', division)
                              .data('model_color', modelColor);

   
    $('#tableModalocrstatus').modal('show');
});


let isAjaxInProgress = false;


$('#tableModalocrstatus').on('shown.bs.modal', function () {
   
    if (isAjaxInProgress) {
        console.log('An AJAX request is already in progress.');
        return; 
    }

   
    isAjaxInProgress = true;
    let CostID = $(this).data('cc-no');
    let division = $(this).data('division');
    let model_color = $(this).data('model_color');
    console.log(model_color);
    $('.prj_status_qty').text('PRJ STATUS - ' + model_color);
    $.ajax({
        url: '{{ route('prjstatus') }}',  
        method: 'GET',
        data: {
            costId: CostID,
            division: division
        },
        headers: {
            "X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr("content")
        },
        dataType: 'json',
        beforeSend: function () {
            $("#preloder").fadeIn();
                },
        success: function (response) {
           
            populateTable(response.data);
        },
        error: function (xhr, status, error) {
            console.error('Error fetching data:', error);
        },
        complete: function () {
            $("#preloder").fadeOut();
            isAjaxInProgress = false;
        }
    });
});


    function populateTable(data) {
        const productionTable = $('#detailsTable').DataTable();

        
        productionTable.clear();

        if (data.length === 0) {
            
            productionTable.draw();
            return;
        }

    
        data.forEach(function (item, index) {
            var part2 = item.Order_NO ? item.Order_NO.substring(item.Order_NO.length - 8) : 'N/A';  // Default if Order_NO is not available

            const rowData = [
                index + 1, 
                `<span title="${item.Order_NO}">${part2}</span>`,
                formatDateCk(item.Order_Date),
                formatDateCk(item.Approval_Date),
                formatDateCk(item.CK_Date),
                formatDateCk(item.Ship_Date),
                item.Prj_Qty,
                item.Model_COde,
                item.Item_Code,
                item.Fabric,
                parseInt(item.Req_Qty) || 0,
                parseInt(item.PO_Qty) || 0,
                parseInt(item.GRN_Qty) || 0,
                (item.Rej_Qty != '.000') ? parseInt(item.Rej_Qty) : 0,
                item.UOM,
                item.PO_Pending,
                (item.GRN_Pending != '.000') ? parseInt(item.GRN_Pending) : 0,
                item.Cons,
                parseInt(item.PO_Qty_FG),
                parseInt(item.GRN_Qty_FG),
                item.Source,
                item.LeadDays
            ];

        
            productionTable.row.add(rowData);
        });

        
        productionTable.draw();


        
    }

//end prj Popup

//start FCR Popup



var productionFRcTable; 
function initializeDataFRCTable() {
    if ($.fn.dataTable.isDataTable('#detailsTable_frc')) {
        return; 
    } 
    productionTable = $('#detailsTable_frc').DataTable({ 
        paging: false,  
        searching: true,  
        ordering: true,  
        responsive: true, 
        order: [[0, 'asc']],  
        columnDefs: [
            {
                targets: [2, 3, 4, 5], 
                type: 'date-dd-mm-yyyy'  
            },
        ],
        dom: 'Bfrtip',  
        buttons: [
            {
                extend: 'excelHtml5',
                title: 'FRC DETAILS',
                exportOptions: {
                    columns: ':visible'
                },
                footer: true
            },
            {
                extend: 'pdfHtml5',
                text: 'PDF',
                titleAttr: 'FRC DETAILS',
                orientation: 'landscape',
                pageSize: 'A3',
                exportOptions: {
                    columns: ':visible'
                },
                customize: function(doc) {
                    doc.defaultStyle.fontSize = 7; 
                    doc.content[1].table.widths = 'auto';  
                    doc.content[1].table.dontBreakRows = true;  
                }
            }
        ],
        footerCallback: function (row, data, start, end, display) {
           
        }
    });
}
initializeDataFRCTable();

$(document).on('click', '.fcr_tadetails', function() {
    
    let division = $(this).data('division');
    let ccNo = $(this).data('cc-no');
    let modelColor = $(this).data('model_color');
   
    $('#tableModalfcrstatus').data('cc-no', ccNo)
                              .data('division', division)
                              .data('model_color', modelColor);

   
    $('#tableModalfcrstatus').modal('show');
});


let isAjaxFRCInProgress = false;


$('#tableModalfcrstatus').on('shown.bs.modal', function () {
   
    if (isAjaxFRCInProgress) {
        console.log('An AJAX request is already in progress.');
        return; 
    }

   
    isAjaxFRCInProgress = true;
    let CostID = $(this).data('cc-no');
    let division = $(this).data('division');
    let model_color = $(this).data('model_color');
    console.log(model_color);
    $('.frc_status_qty').text('FRC STATUS - ' + model_color);
    $.ajax({
        url: '{{ route('fcrstatus') }}',  
        method: 'GET',
        data: {
            costId: CostID,
            division: division
        },
        headers: {
            "X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr("content")
        },
        dataType: 'json',
        beforeSend: function () {
            $("#preloder").fadeIn();
                },
        success: function (response) {
           
            FRCTable(response.data);
        },
        error: function (xhr, status, error) {
            console.error('Error fetching data:', error);
        },
        complete: function () {
            $("#preloder").fadeOut();
            isAjaxFRCInProgress = false;
        }
    });
});


    function FRCTable(data) {
        const productionFRcTable = $('#detailsTable_frc').DataTable();

        
        productionFRcTable.clear();

        if (data.length === 0) {
            
            productionFRcTable.draw();
            return;
        }

    
        data.forEach(function (item, index) {
            var part2 = item.Order_NO ? item.Order_NO.substring(item.Order_NO.length - 8) : 'N/A';  // Default if Order_NO is not available

            const rowData = [
                index + 1, 
                `<span title="${item.Order_NO}">${part2}</span>`,
                formatDateCk(item.Order_Date),
                formatDateCk(item.Approval_Date),
                formatDateCk(item.CK_Date),
                formatDateCk(item.Ship_Date),
                item.FRC_Qty,
                item.Model_COde,
                item.Item_Code,
                item.Trim_Item,
                parseInt(item.Req_Qty) || 0,
                parseInt(item.PO_Qty) || 0,
                parseInt(item.GRN_Qty) || 0,
                
                item.UOM,
                item.PO_Pending,
                (item.GRN_Pending != '.000') ? parseInt(item.GRN_Pending) : 0,
                item.Cons,
                parseInt(item.PO_Qty_FG),
                parseInt(item.GRN_Qty_FG),
                item.Source,
                item.LeadDays,
                ''
            ];

        
            productionFRcTable.row.add(rowData);
        });

        
        productionFRcTable.draw();


        
    }





    document.addEventListener("DOMContentLoaded", function() {
        // Initialize Flatpickr
        flatpickr("#shipment_date", {
            dateFormat: "d-m-Y",
            mode: "range",
            allowInput: true,
        });
    });

    document.addEventListener("DOMContentLoaded", function() {
        // Initialize Flatpickr
        flatpickr("#order_date", {
            dateFormat: "d-m-Y",
            mode: "range",
        });
    });

    document.addEventListener("DOMContentLoaded", function() {
        // Initialize Flatpickr
        flatpickr("#ck_date", {
            dateFormat: "d-m-Y",
            mode: "range",
            allowInput: true,
        });
    });
    document.addEventListener("DOMContentLoaded", function() {
        // Initialize Flatpickr
        flatpickr("#app_date", {
            dateFormat: "d-m-Y",
            mode: "range",
        });
    });
</script>


<script>
    $.fn.dataTable.ext.type.order['date-dd-mm-yyyy-pre'] = function(d) {
        if (d === null || d === "") {
            return Infinity;  // Treat empty dates as the largest value
        }
        return moment(d, 'DD-MM-YYYY').isValid() ? moment(d, 'DD-MM-YYYY').format('YYYYMMDD') : Infinity;
    };
    $(document).ready(function() {

  
    var totalSelQty = 0;
    var totalProjQty = 0;
    var totalprodQty = 0;
    var totalFrcQty = 0;
    var totalwoQty = 0;
    var totalcfmQty = 0;
    var totalshdiffQty = 0;
    var totalpastehdQty = 0;
    var totalshipQty = 0;
    var totalshortship = 0;
    var totalshippQty = 0;
    var totalshipdiff = 0;
    var table = $('#dataTablee').DataTable({
            paging: false,
            searching: true,
            ordering: true,
            
            order: [[0, 'asc']],  
            columnDefs: [
                {
                    targets: [5,6], 
                    type: 'date-dd-mm-yyyy'  
                },
                { orderable: false, targets: [17, 18] } 
            ],
            dom: 'Bfrtip',  
            buttons: [
            {
                extend: 'excelHtml5',
                text: 'Excel',
                autoFilter: true,
                titleAttr: 'Excel',

                exportOptions: {
                    format: {
                        body: function(data, row, column, node) {
                            // Use moment.js to convert dd-mm-yyyy to ISO date format yyyy-mm-dd for Excel


                            if ((column === 9 || column === 10 || column === 11) && /\d{2}-\d{2}-\d{4}/.test(data)) {
                                // Convert date to 'dd/mm/yyyy'
                                return moment(data, 'DD-MM-YYYY').format('YYYY-MM-DD');
                            } else {
                                // For other columns, return the data without changes
                                return $('<div>').html(data).text(); // Strips any HTML tags if present
                            }
                        }
                    }
                }

            },

            {
                extend: 'pdfHtml5',
                text: 'PDF',
                titleAttr: 'PDF',
                orientation: 'landscape',
                pageSize: 'A3',
                exportOptions: {
                    columns: ':visible'
                },
                customize: function(doc) {
                    doc.defaultStyle.fontSize = 7; // Reduce the font size
                    doc.content[1].table.widths = 'auto'; // Set column width to auto
                    doc.content[1].table.dontBreakRows = true; // Ensure content continues on the next page if too large
                }
                
            }
        ],
        
      
        footerCallback: function (row, data, start, end, display) {
           
                    var api = this.api();
                    
                    var totalSelQty = api.column(8, { search: 'applied' }).data().reduce(function(a, b) {
                        return (parseInt(a) || 0) + (parseInt(b) || 0);
                    }, 0);
                    
                   var totalProjQty = api.column(8, { search: 'applied' }).data().reduce(function(a, b) {
                    return (parseInt(a) || 0) + (parseInt(b) || 0);
                }, 0);
                
                    var totalFrcQty = api.column(9, { search: 'applied' }).data().reduce(function(a, b) {
                        return (parseFloat(a.toString().replace(/[^\d.-]/g, '')) || 0) + 
               (parseFloat(b.toString().replace(/[^\d.-]/g, '')) || 0);
                    }, 0);
                   
                    var totalprodQty = api.column(10, { search: 'applied' }).data().reduce(function(a, b) {
                        return (parseInt(a) || 0) + (parseInt(b) || 0);
                    }, 0);
                    var totalcfmQty = api.column(11, { search: 'applied' }).data().reduce(function(a, b) {
                        return (parseInt(a) || 0) + (parseInt(b) || 0);
                    }, 0);
                    var totalshdiffQty = api.column(12, { search: 'applied' }).data().reduce(function(a, b) {
                        return (parseInt(a) || 0) + (parseInt(b) || 0);
                    }, 0);
                    var totalshippQty = api.column(13, { search: 'applied' }).data().reduce(function(a, b) {
                        return (parseInt(a) || 0) + (parseInt(b) || 0);
                    }, 0);
                    var totalshipdiff = api.column(14, { search: 'applied' }).data().reduce(function(a, b) {
                        return (parseInt(a) || 0) + (parseInt(b) || 0);
                    }, 0);
                    var totalpastehdQty = api.column(15, { search: 'applied' }).data().reduce(function(a, b) {
                        return (parseInt(a) || 0) + (parseInt(b) || 0);
                    }, 0);
                    var totalshipQty = api.column(16, { search: 'applied' }).data().reduce(function(a, b) {
                        return (parseInt(a) || 0) + (parseInt(b) || 0);
                    }, 0);
                    var totalshortship = api.column(17, { search: 'applied' }).data().reduce(function(a, b) {
                        return (parseInt(a) || 0) + (parseInt(b) || 0);
                    }, 0);

                    // Update footer with totals
                    $('#totalSelQty').html(totalSelQty);
                    
                  
                    $('#totalprodQty').html(totalprodQty);
                    $('#totalcfmQty').html(totalcfmQty);
                   
                   
                    $('#totalpastehdQty').html(totalpastehdQty);
                    $('#totalshipQty').html(totalshipQty);
                    $('#totalshortship').html(totalshortship);
                    $('#totalshippQty').html(totalshippQty);
                    $('#totalshipdiff').html(totalshipdiff);
                }
           
        });

        function getNumericValue(cellData) {
    var $cell = $(cellData); // Use jQuery to create a jQuery object
    // If the cell contains a span, get its text
    var value = $cell.find('span').first().text().trim();
    parseInt(value.replace(/[^\d.-]/g, '')) || 0;
    return  parseInt(value.replace(/[^\d.-]/g, '')) || 0; // Return parsed integer or 0 if not a number
}

    // Load data on page load
    $("#preloder").fadeIn();
    loadData();

    // Filter form submission
    $('#filterForm').on('submit', function(e) {
        $("#preloder").fadeIn();
        e.preventDefault();
        loadData();
    });

    $('#resetButton').on('click', function() {
        // Reset the form fields
        $('#filterForm')[0].reset();
        $("#preloder").fadeIn();
        // Clear dynamically populated dropdowns
        $('#buyer_name').empty().append('<option value="">Select Buyer</option>');
        $('#brand').empty().append('<option value="">--Select Brand PO NO--</option>');
        $('#season').empty().append('<option value="">--Select Season--</option>');
        $('#merch_name').empty().append('<option value="">--Select Merch Name--</option>');
        $('#cc').empty().append('<option value="">--Select CC--</option>');
        $('#model_color').empty().append('<option value="">--Select Model+Color--</option>');
        // Reload data with default values
        loadData();
    });

    // Function to load data based on filters
    function loadData() {
        var buyer_nameselected = $('#buyer_name option:selected').map(function() {
                return $(this).val();
            }).get();
        var buyerjoinedValues = buyer_nameselected.join(', ');
        var buyerNamee = buyerjoinedValues;

        console.log('buyer' + buyerNamee );
        
        var division = $('#division').val();
        var ckdate = $('#ck_date').val();
        var shipdate = $('#shipment_date').val();

        var brand_nameselected = $('#brand option:selected').map(function() {
                return $(this).val();
            }).get();
        var brandjoinedValues = brand_nameselected.join(', ');
        
        
        var brand = brandjoinedValues;

        var merch_nameselected = $('#merch_name option:selected').map(function() {
                return $(this).val();
            }).get();
        var merchjoinedValues = merch_nameselected.join(', ');
        var merch_namee = merchjoinedValues;
        var seasonselected = $('#season option:selected').map(function() {
                return $(this).val();
            }).get();
        var seasonjoinedValues = seasonselected.join(', ');
        
        var season = seasonjoinedValues;

        var ccselected = $('#cc option:selected').map(function() {
                return $(this).val();
            }).get();
        var ccjoinedValues = ccselected.join(', ');
        
        var cc = ccjoinedValues;

        var model_colorselected = $('#model_color option:selected').map(function() {
                return $(this).val();
            }).get();
        var model_colorjoinedValues =model_colorselected.join(', ');
        
        
       
        var modelcolor = model_colorjoinedValues;
        $.ajax({
            url: "{{ route('merchandiserorder_technotek') }}",
            type: "GET",
            data: $('#filterForm').serialize(),

            success: function(data) {
                $("#preloder").fadeOut();

                var table = $('#dataTablee').DataTable();
                table.clear().draw();// Clear the existing data
                var ocnNumbers = [];
                var uniqueBuyers = [];
                var ccNOarr = [];
                var MerchName = [];
                var Brandarr = [];
                var divisionarr = [];
                var seasonarr = [];
                var model_colorarr = [];
                var ccarr = [];
                var newCount = 1;
                var ckdatearr = [];
                var shipdatearr = [];
                

                $.each(data.result, function(index, row) {
                    var color = '';
                    var color_qty = '';
                    var titleex = '';
                    var totalpoqty = parseInt(row.Ship_Qty) + parseInt(row.Ship_Diff);
                   // Convert values to integers with fallback for invalid numbers
                    var prjQty = parseInt(row.PRJ_Qty, 10) || 0;
                    var cfmQty = parseInt(row.CFM_Qty, 10) || 0;
                    var frcQty = parseInt(row.FRC_Qty, 10) || 0;
                    var Ship_Qty = parseInt(row.Ship_Qty, 10) || 0;

                    if (prjQty < frcQty) {
                        // Conditional styling
                       // var titleex = prjQty - frcQty; 
                        //if(titleex > 0){
                            var color_qty = 'red !important'; 
                        //}   // Calculate difference
                    }

                    if(frcQty < Ship_Qty){
                        var color = 'red !important';
                        var titleex =  parseInt(row.PRJ_Qty) - parseInt(row.FRC_Qty);
                    }

                    var modelcolor = row['Model \\ Color'];
                    table.row.add([
                       '<span style=" justify-content: center; align-items: center; display: flex;">'+ newCount +'</span>',
                        row.CCNo,
                        row.Col_Lookup,
                        row['DMI/DSI'],
                        
                         row.Seas_Lookup,
                         formatDateCk(row.CK_Date),
                         formatDateCk(row.Ship_Date),
                         
                       
                       
                        '<span style="cursor: pointer; color: blue; " data-bs-toggle="modal" data-bs-target="#tableModalocrstatus" data-division ="'+row.Division+'"  data-cc-no="' + row.Cost_ID + '"  data-model_color="'+ row.CCNo +'_'+ modelcolor +'(' + row.PRJ_Qty +')' +'" class="tadetails" title="'+titleex+'">'+row.PRJ_Qty+'</span>',
                        row.Selection_Qty,
                        '<span style="cursor: pointer; color: blue; color :'+color_qty+'" data-bs-toggle="modal" data-bs-target="#tableModalfcrstatus" data-division ="'+row.Division+'"  data-cc-no="' + row.Cost_ID + '"  data-model_color="'+ row.CCNo +'_'+ modelcolor +'(' + row.FRC_Qty +')' +'" class="fcr_tadetails" title="FRC Status">'+row.FRC_Qty+'</span>',
                      
                       
                        row.CutOrd_Qty,
                        row.Prod_Qty,
                        '<span style ="color:'+color+'">'+row.CFM_Qty+'</span>',
                       
                        row.Ship_Qty
                       ,
                        row.Ship_Diff,
                        '' ,
                        row.Past_EHD,
                        
                        row.Short_Ship,
                      
                       
                        '<span title="' + row.Brand +'">'+row.Brand.substring(0, 5)+'</span>',
                        '<span title="' + row.Merch_Name +'">'+row.Merch_Name.substring(0, 5)+'</span>',
                       
                    ]).draw(false);  // Add new row and redraw table
                    newCount++;
                   
                    table.fixedColumns().update();


                    // Collect unique buyers and OCN numbers for dropdowns
                    if (row.Buyer_Name) {
                        uniqueBuyers.push(row.Buyer_Name);
                    }
                    if (row.CCNo) {
                        ccNOarr.push(row.CCNo);
                    }
                    if (row.Brand) {
                        Brandarr.push(row.Brand);
                    }
                    if (row.Merch_Name) {
                        MerchName.push(row.Merch_Name);
                    }
                    if (row.Division) {
                        divisionarr.push(row.Division);
                    }
                    if (row.Season) {
                        seasonarr.push(row.Season);
                    }
                    if (modelcolor) {
                        model_colorarr.push(modelcolor);
                    }
                    if (row.CK_Date) {
                        ckdatearr.push(row.CK_Date);
                    }
                    if (row.CK_Date) {
                        ckdatearr.push(row.CK_Date);
                    }
                    if(row.Ship_Date){
                        shipdatearr.push(row.Ship_Date)
                    }
                   
                });


                if (shipdate == '') {
    
    var validTimestamps = shipdatearr
        .map(function(date) {
            var timestamp = Date.parse(date); 
            return isNaN(timestamp) ? null : timestamp; 
        })
        .filter(function(timestamp) {
            return timestamp !== null; 
        });

    
    if (validTimestamps.length > 0) {
        var minDateTimestamp = Math.min.apply(null, validTimestamps);  
        var minDate = new Date(minDateTimestamp);  
        var day = minDate.getDate().toString().padStart(2, '0');  
        var month = (minDate.getMonth() + 1).toString().padStart(2, '0');  
        var year = minDate.getFullYear();

        // Format as DD-MM-YYYY
        var formattedDate = day + '-' + month + '-' + year;
        
    //     flatpickr("#shipment_date", {
    //         dateFormat: "d-m-Y",
    //         mode: "range",
    //         defaultDate: formattedDate,
    //         allowInput: true,
    // // Custom default date
    //   });
       // console.log(formattedDate);
    } else {
        //console.log('No valid dates found in the array.');
    }
}
                if (ckdate == '') {
    
    var validTimestamps = ckdatearr
        .map(function(date) {
            var timestamp = Date.parse(date); 
            return isNaN(timestamp) ? null : timestamp; 
        })
        .filter(function(timestamp) {
            return timestamp !== null; 
        });

    
    if (validTimestamps.length > 0) {
        var minDateTimestamp = Math.min.apply(null, validTimestamps);  
        var minDate = new Date(minDateTimestamp);  
        var day = minDate.getDate().toString().padStart(2, '0');  
        var month = (minDate.getMonth() + 1).toString().padStart(2, '0');  
        var year = minDate.getFullYear();

        // Format as DD-MM-YYYY
        var formattedDate = day + '-' + month + '-' + year;
        
    //     flatpickr("#ck_date", {
    //         dateFormat: "d-m-Y",
    //         mode: "range",
    //         defaultDate: formattedDate,
    //         allowInput: true,
    // // Custom default date
    //   });
       // console.log(formattedDate);
    } else {
        //console.log('No valid dates found in the array.');
    }
}

                // Populate the buyer dropdown with unique buyers from the result
                if (buyerNamee == '') {
                    
                    $('#buyer_name').select2({
                            placeholder: "Select Buyer",
                            allowClear: true 
                        });
                    $.each([...new Set(uniqueBuyers)], function(index, value) {
                        $('#buyer_name').append('<option value="' + value + '">' + value + '</option>');
                    });
                } else {
                    var commArray = buyerNamee.split(',');
                    commArray.forEach(function(buyerName) {
                        $('#buyer_name option[value="' + buyerName.replace(/"/g, '\\"') + '"]').prop('selected', true);
                    });
                }
                if (brand == '') {
                    $('#brand').select2({
                            placeholder: "Select Brand",
                            allowClear: true 
                        });
                    $.each([...new Set(Brandarr)], function(index, value) {
                        $('#brand').append('<option value="' + value + '">' + value + '</option>');
                    });
                } else {
                    var commArray = brand.split(',');
                    commArray.forEach(function(brand) {
                        $('#brand_name option[value="' + brand.replace(/"/g, '\\"') + '"]').prop('selected', true);
                    });
                    
                }

                // Populate the OCN dropdown with unique values from the table
                if (division == '') {
                    $('#division').select2({
                            placeholder: "Select Division",
                            allowClear: true 
                        });
                    $.each([...new Set(divisionarr)], function(index, value) {
                        $('#division').append('<option value="' + value + '">' + value + '</option>');
                    });
                } else {
                    $('#division option[value="' + division.replace(/"/g, '\\"') + '"]').prop('selected', true);
                }
                
                if (merch_namee == '') {
                    $('#merch_name').select2({
                            placeholder: "Select Merchandiser Name",
                            allowClear: true 
                        });
                   
                    $.each([...new Set(MerchName)], function(index, value) {
                        $('#merch_name').append('<option value="' + value + '">' + value + '</option>');
                    });
                } else {
                    var commArray = merch_namee.split(',');
                    commArray.forEach(function(merch_namee) {
                        $('#merch_name option[value="' + merch_namee.replace(/"/g, '\\"') + '"]').prop('selected', true);
                    });
                    
                }
                if (season == '') {
                    $('#season').select2({
                            placeholder: "Select Season",
                            allowClear: true 
                        });
                    
                    $.each([...new Set(seasonarr)], function(index, value) {
                        $('#season').append('<option value="' + value + '">' + value + '</option>');
                    });
                } else {
                    var commArray = season.split(',');
                    commArray.forEach(function(season) {
                        $('#season option[value="' + season.replace(/"/g, '\\"') + '"]').prop('selected', true);
                    });
                    
                }
                if (modelcolor == '') {
                    $('#model_color').select2({
                            placeholder: "Select Model Color",
                            allowClear: true 
                        });

                   
                    $.each([...new Set(model_colorarr)], function(index, value) {
                        $('#model_color').append('<option value="' + value + '">' + value + '</option>');
                    });
                } else {
                    var commArray = modelcolor.split(',');
                    commArray.forEach(function(modelcolor) {
                        $('#model_color option[value="' + modelcolor.replace(/"/g, '\\"') + '"]').prop('selected', true);
                    });

                   
                }
                if (cc == '') {
                    $('#cc').select2({
                            placeholder: "Select CC",
                            allowClear: true 
                        });

                    
                    $.each([...new Set(ccNOarr)], function(index, value) {
                        $('#cc').append('<option value="' + value + '">' + value + '</option>');
                    });
                } else {
                    var commArray = cc.split(',');
                    commArray.forEach(function(cc) {
                        $('#cc option[value="' + cc.replace(/"/g, '\\"') + '"]').prop('selected', true);
                    });

                   
                }
            }
        });
    }

  
    });

</script>











<!--supplier po popup-->


<!--T & A details popup-->
<script>
   

//TEchnoteck

function convertToDate(dateStr) {
     const [day, month, year] = dateStr.split('-');
      return new Date(`${year}-${month}-${day}`);
    }
    function formatDateCk(dateString) {

       
    if (!dateString || typeof dateString !== 'string') {
        return '';  // Handle invalid date input
       // console.log('Invalid');
    }

    var parts = dateString.split("-");
    
    if (parts.length === 3) {
        var day = parts[2];
        var month = parts[1];
        var year = parts[0];
        var year = parts[0];
        //console.log(year);
       

        if (year.length === 4 && !isNaN(year) && !isNaN(day) && !isNaN(month)) {
            var shortYear = year.substring(2);  // Extract last two digits of the year
            return `${day}-${month}-${shortYear}`;  // Use template literals for readability
        } else {
            return '';  // Handle incorrect year length or non-numeric values
        }
    } else {
        return '';  // Handle incorrect date format
    }
}

$(document).ready(function() {
  
  $('.select2').select2({
     // placeholder: "Select Season", // Placeholder text
      allowClear: true // Allows clearing the selection
  });


  
});

</script>
@endsection