@extends('layouts.main')
@section('title', 'BookStock View - ' . $Distributormaster->distributor_name)
@section('container')
<style>
    .filter-header { position: relative; cursor: pointer; }
    .filter-icon { position: absolute; right: 5px; top: 50%; transform: translateY(-50%); cursor: pointer; color: #6c757d; }
    .filter-dropdown { position: absolute; background: white; border: 1px solid #ddd; padding: 10px; z-index: 1000; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); display: none; min-width: 200px; }
    .pagination-info { margin-top: 8px; font-size: 14px; color: #6c757d; }
    .table-responsive { overflow-x: auto; }
    .dropdown-item { cursor: pointer; }
    .column-toggle { margin-right: 8px; }
    .loading-spinner { display: inline-block; width: 20px; height: 20px; border: 3px solid rgba(0, 0, 0, .1); border-radius: 50%; border-top-color: #F8B940; animation: spin 1s ease-in-out infinite; }
    @keyframes spin { to { transform: rotate(360deg); } }
    .btn-sm { padding: 0.25rem 0.5rem; font-size: 0.875rem; }
    ul.pagination li { margin: 0; padding: 0; line-height: 14px !important; border: 0px !important; padding: 4px 0px !important; margin: 0 !important; }
    .card-container { margin: 15px 0; display: flex; justify-content: center; }
    .badge-title { height: 35px; width: fit-content; padding: 6px 14px; background: #452b90; color: #fff; font-weight: 500; border-radius: 8px; font-size: 14px; margin: 0 auto 10px auto; text-align: center; }
    .badge-title.bg-agency { background: #f7941d; }
    .user-avatar { width: 70px; height: 70px; border-radius: 50%; margin: 0 auto 12px; display: flex; justify-content: center; align-items: center; background: linear-gradient(135deg, #6a11cb, #2575fc); color: #fff; font-size: 22px; font-weight: bold; box-shadow: 0px 4px 10px rgba(0,0,0,0.2); }
    .user-avatar.bg-orange { background: linear-gradient(135deg, #ff9800, #ff5722); }
    .user-name { font-size: 18px; font-weight: 600; margin-bottom: 6px; color: #333; }
    .user-email { font-size: 14px; color: #777; margin-bottom: 16px; }
    .action-btn { padding: 8px 16px; border-radius: 6px; border: none; font-weight: 500; cursor: pointer; transition: all 0.3s ease; background: #452b90; color: #fff; }
    .action-btn:hover { background: #321f68; }
    #columnSelectionMenu { background-color: #fff; border: 1px solid #dee2e6; border-radius: 0.25rem; box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15); padding: 10px; }
    .dropdown-item { display: flex; align-items: center; padding: 8px; font-size: 0.875rem; color: #212529; white-space: normal; word-break: break-word; }
    .column-label { margin-left: 8px; overflow: hidden; text-overflow: ellipsis; display: inline-block; max-width: 100%; }
    .dropdown-item:not(.disabled):hover { background-color: #f8f9fa; }
    .dropdown-item.disabled { opacity: 0.6; cursor: not-allowed; }
    .download-btn { margin-right: 5px; }
    .map-icon { cursor: pointer; color: #007bff; }
    @media (max-width: 768px) {
        #columnSelectionMenu { min-width: 100%; max-width: 100%; }
        .row-cols-md-3, .row-cols-lg-4 { row-cols: 2; }
    }
       :root {
            --primary-blue: #3a60f6;
            --secondary-blue: #6236ff;
            --badge-blue: #3a60f6;
            --badge-green: #28a745;
            --badge-purple: #6f42c1;
            --badge-yellow: #ffc107;
            --badge-gray: #6c757d;
            --badge-red: #dc3545;
            --light-bg: #f8f9fa;
        }
        
 
        
        /* Header Styles */
        .dashboard-header {
            background: linear-gradient(to right, #452B90, #442b90a2);
            border-radius: 13px;
            padding: 7px;
            margin-bottom: 23px;
            color: white;
        }
        
        .icon-container {
            background-color: rgba(255, 255, 255, 0.2);
            width: 60px;
            height: 60px;
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 15px;
        }
        
        .stat-box {
            background-color: #442b90ff;
            border-radius: 10px;
            padding: 12px;
            text-align: center;
            margin-bottom: 12px;
        }
        
        .stat-number {
            font-size: 18px;
            font-weight: bold;
            margin-bottom: 5px;
        }
        
        .stat-label {
            font-size: 14px;
            opacity: 0.9;
        }
        
        .btn-add-member {
            background-color: white;
            color: #452B90;
            border: none;
            border-radius: 8px;
            padding: 10px 20px;
            font-weight: 800;
            display: flex;
            align-items: center;
            gap: 8px;
        }
        
        /* User Card Styles */
        .user-card {
            background-color: #f3f0ecd0;
            border-radius: 12px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
            padding: 20px;
            margin-bottom: 25px;
            height: 100%;
        }
        
        .user-avatar {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            background-color: var(--light-bg);
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: bold;
            color: var(--primary-blue);
            margin-right: 15px;
        }
        
        .user-name {
            font-weight: 600;
            margin-bottom: 5px;
        }
        
        .role-badge {
            padding: 5px 12px;
            border-radius: 20px;
            font-size: 12px;
            font-weight: 500;
        }
        
        .badge-team-leader {
            background-color: var(--badge-blue);
            color: white;
        }
        
        .badge-agency {
            background-color: var(--badge-green);
            color: white;
        }
        
        .badge-auditor {
            background-color: var(--badge-purple);
            color: white;
        }
        
        .status-icon {
            font-size: 20px;
        }
        
        .status-active {
            color: var(--badge-green);
        }
        
        .status-inactive {
            color: var(--badge-red);
        }
        
        .contact-row {
            background-color: var(--light-bg);
            border-radius: 8px;
            padding: 10px 15px;
            margin: 15px 0;
        }
        
        .contact-item {
            display: flex;
            align-items: center;
            gap: 10px;
            margin-bottom: 8px;
        }
        
        .contact-item:last-child {
            margin-bottom: 0;
        }
        
        .contact-icon {
            width: 24px;
            height: 24px;
            background-color: white;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 12px;
            color: var(--primary-blue);
        }
        
        .status-row {
            display: flex;
            align-items: center;
            margin: 15px 0;
        }
        
        .status-label {
            font-weight: 500;
            margin-right: 10px;
        }
        
        .status-badge {
            padding: 4px 10px;
            border-radius: 20px;
            font-size: 12px;
            font-weight: 500;
            margin-right: 8px;
        }
        
        .badge-wip {
            background-color: var(--badge-yellow);
            color: #000;
        }
        .badge-pending {
            background-color: #0d258fff;
            color: #eeeeeeff;
        }
        .badge-submit {
            background-color: #28702cff;
            color: #fff;
        }
        
        .badge-on-hold {
            background-color: var(--badge-yellow);
            color: #000;
        }
        
        .badge-not-started {
            background-color: var(--badge-gray);
            color: white;
        }
        
        .badge-completed {
            background-color: var(--badge-green);
            color: white;
        }
        
        .badge-inactive {
            background-color: var(--badge-gray);
            color: white;
        }
        
        .badge-active {
            background-color: var(--badge-green);
            color: white;
        }
        
        .stats-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 10px;
            margin: 15px 0;
        }
        
        .stat-item {
            background-color: var(--light-bg);
            border-radius: 8px;
            padding: 12px;
            text-align: center;
        }
        
        .stat-item-value {
            font-weight: bold;
            font-size: 18px;
            margin-bottom: 5px;
        }
        
        .stat-item-label {
            font-size: 12px;
            color: #6c757d;
        }
        
        .card-buttons {
            display: flex;
            gap: 10px;
            margin-top: 15px;
        }
        
        .card-btn {
            flex: 1;
            border: 1px solid #dee2e6;
            background: white;
            border-radius: 8px;
            padding: 8px 5px;
            font-size: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 5px;
            color: #6c757d;
        }
        
        @media (max-width: 768px) {
            .stat-box {
                margin-bottom: 10px;
            }
            
            .btn-add-member {
                margin-top: 15px;
            }
        }
        
        /* #bookStockTable {
            table-layout: fixed;
            width: 100%;
        } */
</style>
@php
$rack_get = 0;
$rack_get_count = 0;
@endphp
<div class="row">
    <div class="col-xl-12 col-lg-12 col-sm-12">
        <div class="card" style="height: max-content;">
            <div class="card-header new-card-header p-2" style="background: var(--secondary);">
                <div class="row" style="width: 100%;">
                    <div class="col-md-4 col-4">
                        <h4 class="card-title">BookStock View - {{ $Distributormaster->distributor_name }}</h4>
                    </div>
                    <div class="col-md-8 col-8 text-end">
                        @if(Auth::user()->role_id != 8)
                            @if($project->Sample == 1)
                            <a class="btn btn-primary p-2" 
                            href="{{ route('bookstockviewSample', $Distributormaster->id) }}" 
                            title="Show Sample" target="_blank">
                            <i class="fa fa-eye"></i> Sample View
                            </a>
                            @endif
                    @endif
                    @if(Auth::user()->role_id != 8)
                    @if($Distributormaster->status < 4)
                        @if($project->Sample == 1)
                            @if($Distributormaster->semple_status == 4 && $Distributormaster->status == 3)
                                <a class="btn btn-primary p-2" href="" data-bs-toggle="modal"
                                data-bs-target="#sampletdatdoc" title="Update Status">
                                <i class="fa fa-check-circle"></i> Update  Status
                                </a>
                            @endif
                        @elseif($Distributormaster->status == 3)
                        <a class="btn btn-primary p-2" href="" data-bs-toggle="modal"
                        data-bs-target="#sampletdatdoc" title="Update Status">
                        <i class="fa fa-check-circle"></i> Update Status
                        </a>
                        @endif
                    @endif
                    @endif
                @if(Auth::user()->role_id != 8)
                 @if($Distributormaster->remark_status == 1 && ($Distributormaster->status == 5 || $Distributormaster->status == 7))
                        <a class="btn btn-primary p-2" href="" data-bs-toggle="modal"
                            data-bs-target="#remarkdocs" title="Update Status">
                            <i class="fa fa-check-circle"></i> Update  Status
                        </a>
                @endif
                @endif


                 @if($Distributormaster->pdf_status == 1)
                    @if(Auth::user()->role_id != 8)
                        <a class="btn btn-primary p-2" href="" data-bs-toggle="modal"
                            data-bs-target="#docsupload" title="Update Status">
                            <i class="fa fa-check-circle"></i> Update Status
                        </a>
                    @endif
                       <a class="btn btn-primary p-2" 
                        href="{{ asset('storage/pdfs/' . $Distributormaster->pdf_upload) }}" 
                        download 
                        title="Download PDF">
                            <i class="fa fa-download"></i> Download PDF
                        </a>

                @endif

                        <a class="btn btn-primary p-2 dropdown-toggle" type="button" id="columnSelectDropdownexport" data-bs-toggle="dropdown" aria-expanded="false" title="Export Dropdown">
                            <i class="fa fa-gear"></i> Others 
                        </a>
                        <ul class="dropdown-menu" id="columnSelectDropdownexport" style="min-width: 300px; max-width: 800px; max-height: 400px; overflow-y: auto; padding: 10px;">
                            <div class="container-fluid p-0">
                                <div class="row">
                                    <div class="col-md-12">
                                        <a class="btn btn-sm p-2 js-download-images" width="100%" title="Export Images" data-distributor-id="{{ $Distributormaster->id }}" href="#" style="width:100% !important;">
                                            <i class="fa fa-download"></i> Export Files
                                        </a>
                                        <a class="btn btn-sm p-2 js-open-export-modal" title="Export Excel"
                                        data-bs-toggle="modal" data-bs-target="#downloadexcel" title="Update Status"
                                        href="#" style="width:100% !important;">
                                            <i class="fa fa-file-excel"></i> Export Excel
                                        </a>
                                        <!-- <a class="btn btn-sm p-2 js-download-report" title="Export Report" data-distributor-id="{{ $Distributormaster->id }}" href="#" style="width:100% !important;">
                                            <i class="fa fa-file-excel"></i> Export Report
                                        </a> -->
                                    @if(Auth::user()->role_id != 8)
                                        <a class="btn btn-sm p-2 js-merge-bookstock" title="Export Excel" data-distributor-id="{{ $Distributormaster->id }}" href="#" style="width:100% !important;">
                                            <i class="fa fa-code-fork"></i> Merge bookStock 
                                        </a>
                                    @endif
                                    </div>
                                </div>
                            </div>
                        </ul>
                        <a class="btn btn-primary p-2 dropdown-toggle" type="button" id="columnSelectDropdown" data-bs-toggle="dropdown" aria-expanded="false" title="Column Settings">
                            <i class="fa fa-database"></i> Column Settings
                        </a>
                        <ul class="dropdown-menu" id="columnSelectionMenu" style="min-width: 300px; max-width: 800px; max-height: 400px; overflow-y: auto; padding: 10px;">
                            <div class="container-fluid p-0">
                                <div class="row row-cols-2 row-cols-md-3 row-cols-lg-4 g-2">
                                    <div class="col">
                                        <a class="dropdown-item disabled" href="#" data-column="0">
                                            <input type="checkbox" class="column-toggle" data-column="0" checked readonly disabled>
                                            <span class="column-label">ID</span>
                                        </a>
                                    </div>
                                    <div class="col">
                                        <a class="dropdown-item disabled" href="#" data-column="1">
                                            <input type="checkbox" class="column-toggle" data-column="1" checked readonly disabled>
                                            <span class="column-label">Action</span>
                                        </a>
                                    </div>
                                      @php
                                        
                                        $j = 1;
                                        $appgetdefalt = App\Models\rack_entry::where("distributor_id",$Distributormaster->id)->count();
                                        $appget = App\Models\Rack_id_templete::where("distributor_id",$Distributormaster->id)->count();
                                        @endphp
                                        @if($appgetdefalt > 0)
                                            @php
                                            $columns = [
                                                "Item_SKU_Code" => "Item/SKU Code",
                                                "Item_Name" => "Item Name",
                                                "EAN_Code" => "EAN Code",
                                                "Pack_Size" => "Pack Size",
                                                "item_type" => "Item Type",
                                                "item_sub_type" => "Item Sub Type",
                                                "brand" => "Brand",
                                                "uom" => "UOM",
                                                "batch_number" => "Batch Number",
                                                "item_mrp" => "Item MRP",
                                                "item_rate" => "Item Rate",
                                                "item_qty" => "Item Quantity",
                                                "value" => "Value",
                                                "field_1" => "Field 1",
                                                "field_2" => "Field 2",
                                                "field_3" => "Field 3",
                                                "field_4" => "Field 4",
                                                "field_5" => "Field 5",
                                                "date" => "Date",
                                                "a_remarks" => "Remarks",
                                                "auditor_names" => "Auditor names",
                                                "rack" => "Rack ID",
                                                "barcode_value" => "Count",
                                                 ];
                                                 $rack_get_count = 1;
                                            @endphp
                                        @elseif($appget > 0)
                                            @php
                                            $columns = [
                                                "Item_SKU_Code" => "Item/SKU Code",
                                                "Item_Name" => "Item Name",
                                                "EAN_Code" => "EAN Code",
                                                "Pack_Size" => "Pack Size",
                                                "item_type" => "Item Type",
                                                "item_sub_type" => "Item Sub Type",
                                                "brand" => "Brand",
                                                "uom" => "UOM",
                                                "batch_number" => "Batch Number",
                                                "item_mrp" => "Item MRP",
                                                "item_rate" => "Item Rate",
                                                "item_qty" => "Item Quantity",
                                                "value" => "Value",
                                                "field_1" => "Field 1",
                                                "field_2" => "Field 2",
                                                "field_3" => "Field 3",
                                                "field_4" => "Field 4",
                                                "field_5" => "Field 5",
                                                "date" => "Date",
                                                "a_remarks" => "Remarks",
                                                "auditor_names" => "Auditor names",
                                                "rack" => "Rack ID",
                                                 ];
                                                 $rack_get = 1;
                                            @endphp
                                        @else
                                                @php
                                                $columns = [
                                                "Item_SKU_Code" => "Item/SKU Code",
                                                "Item_Name" => "Item Name",
                                                "EAN_Code" => "EAN Code",
                                                "Pack_Size" => "Pack Size",
                                                "item_type" => "Item Type",
                                                "item_sub_type" => "Item Sub Type",
                                                "brand" => "Brand",
                                                "uom" => "UOM",
                                                "batch_number" => "Batch Number",
                                                "item_mrp" => "Item MRP",
                                                "item_rate" => "Item Rate",
                                                "item_qty" => "Item Quantity",
                                                "value" => "Value",
                                                "field_1" => "Field 1",
                                                "field_2" => "Field 2",
                                                "field_3" => "Field 3",
                                                "field_4" => "Field 4",
                                                "field_5" => "Field 5",
                                                "date" => "Date",
                                                "auditor_names" => "Auditor names",
                                                "a_remarks" => "Remarks",
                                            ];
                                            @endphp
                                                    
                                        @endif
                                    @foreach($columns as $key => $label)
                                        <div class="col">
                                            <a class="dropdown-item" href="#" data-column="{{ ++$j }}">
                                                <input type="checkbox" class="column-toggle" data-column="{{ $j }}" checked>
                                                <span class="column-label" data-bs-toggle="tooltip" data-bs-placement="top" title="{{ $label }}">{{ Str::limit($label, 20, '...') }}</span>
                                            </a>
                                        </div>
                                    @endforeach
                                        @if($rack_get_count == 0)

                                    @foreach($qu_templete as $row)
                                        <div class="col">
                                            <a class="dropdown-item" href="#" data-column="{{ ++$j }}">
                                                <input type="checkbox" class="column-toggle" data-column="{{ $j }}" checked>
                                                <span class="column-label" data-bs-toggle="tooltip" data-bs-placement="top" title="{{ $row->question_text }}">
                                                    {{ Str::limit($row->question_text, 20, '...') }}
                                                </span>
                                            </a>
                                        </div>
                                    @endforeach
                                    @endif
                                </div>
                            </div>
                        </ul>
                        <a class="btn btn-primary p-2" href="#" id="usericon" title="View Users">
                            <i class="fa fa-users"></i>
                        </a>
                        <a class="btn btn-primary p-2" href="#" id="bookstocklisticon" title="View BookStock">
                            <i class="fa fa-book"></i>
                        </a>
                    </div>
                </div>
            </div>
            <div class="card-body" id="bookstockcard">
                <div class="row mt-3" id="bookstockcard">
                    <div class="col-md-4">
                        <div class="input-group">
                            <span class="input-group-text"><i class="fas fa-calendar"></i></span>
                            <input type="date" id="minDate" class="form-control" placeholder="Start Date">
                            <input type="date" id="maxDate" class="form-control" placeholder="End Date">
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="btn-group">
                            <button id="filterDate" class="btn btn-primary mr-2">
                                <i class="fas fa-filter"></i> Filter
                            </button>
                            <button id="resetFilters" class="btn btn-outline-secondary">
                                <i class="fas fa-sync-alt"></i> Reset
                            </button>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="form-inline">
                            <div class="input-group">
                                <span class="input-group-text"><i class="fas fa-search"></i></span>
                                <input type="text" id="globalSearch" class="form-control" placeholder="Search all columns...">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="table-responsive" id="bookstocktable">
                    <table id="bookStockTable" class="table table-bordered table-striped table-hover dataTable no-footer">
                                <thead class="table-light">
                                    <tr>
                                        <th data-sortable="true" class="filter-header">Sr. No. <i class="fas fa-filter filter-icon" data-column="0"></i>
                                            <div class="filter-dropdown" style="display: none;">
                                                <input type="text" class="form-control column-filter" data-column="0" placeholder="Filter Sr. No....">
                                            </div>
                                        </th>
                                        <th class="filter-header">Action <i class="fas fa-filter filter-icon" data-column="1"></i>
                                            <div class="filter-dropdown" style="display: none;">
                                                <input type="text" class="form-control column-filter" data-column="1" placeholder="Filter Action...">
                                            </div>
                                        </th>
                                        @php
                                        
                                        $j = 1;
                                         $appgetdefalt = App\Models\rack_entry::where("distributor_id",$Distributormaster->id)->count();
                                        $appget = App\Models\Rack_id_templete::where("distributor_id",$Distributormaster->id)->count();
                                        @endphp
                                        @if($appgetdefalt > 0)
                                            @php
                                            $columns = [
                                                "Item_SKU_Code" => "Item/SKU Code",
                                                "Item_Name" => "Item Name",
                                                "EAN_Code" => "EAN Code",
                                                "Pack_Size" => "Pack Size",
                                                "item_type" => "Item Type",
                                                "item_sub_type" => "Item Sub Type",
                                                "brand" => "Brand",
                                                "uom" => "UOM",
                                                "batch_number" => "Batch Number",
                                                "item_mrp" => "Item MRP",
                                                "item_rate" => "Item Rate",
                                                "item_qty" => "Item Quantity",
                                                "value" => "Value",
                                                "field_1" => "Field 1",
                                                "field_2" => "Field 2",
                                                "field_3" => "Field 3",
                                                "field_4" => "Field 4",
                                                "field_5" => "Field 5",
                                                "date" => "Date",
                                                "a_remarks" => "Remarks",
                                                "auditor_names" => "Auditor names",
                                                "rack" => "Rack ID",
                                                "barcode_value" => "Count",
                                                 ];
                                                 $rack_get_count = 1;
                                            @endphp
                                        @elseif($appget > 0)
                                            @php
                                            $columns = [
                                                "Item_SKU_Code" => "Item/SKU Code",
                                                "Item_Name" => "Item Name",
                                                "EAN_Code" => "EAN Code",
                                                "Pack_Size" => "Pack Size",
                                                "item_type" => "Item Type",
                                                "item_sub_type" => "Item Sub Type",
                                                "brand" => "Brand",
                                                "uom" => "UOM",
                                                "batch_number" => "Batch Number",
                                                "item_mrp" => "Item MRP",
                                                "item_rate" => "Item Rate",
                                                "item_qty" => "Item Quantity",
                                                "value" => "Value",
                                                "field_1" => "Field 1",
                                                "field_2" => "Field 2",
                                                "field_3" => "Field 3",
                                                "field_4" => "Field 4",
                                                "field_5" => "Field 5",
                                                "date" => "Date",
                                                "a_remarks" => "Remarks",
                                                "auditor_names" => "Auditor names",
                                                "rack" => "Rack ID"
                                                 ];
                                                 $rack_get = 1;
                                            @endphp
                                        @else
                                                @php
                                                $columns = [
                                                "Item_SKU_Code" => "Item/SKU Code",
                                                "Item_Name" => "Item Name",
                                                "EAN_Code" => "EAN Code",
                                                "Pack_Size" => "Pack Size",
                                                "item_type" => "Item Type",
                                                "item_sub_type" => "Item Sub Type",
                                                "brand" => "Brand",
                                                "uom" => "UOM",
                                                "batch_number" => "Batch Number",
                                                "item_mrp" => "Item MRP",
                                                "item_rate" => "Item Rate",
                                                "item_qty" => "Item Quantity",
                                                "value" => "Value",
                                                "field_1" => "Field 1",
                                                "field_2" => "Field 2",
                                                "field_3" => "Field 3",
                                                "field_4" => "Field 4",
                                                "field_5" => "Field 5",
                                                "date" => "Date",
                                                "a_remarks" => "Remarks",
                                                "auditor_names" => "Auditor names"
                                            ];
                                            @endphp
                                                    
                                        @endif
                                        @foreach($columns as $key => $label)
                                            <th data-sortable="true" class="filter-header">{{ $label }} <i class="fas fa-filter filter-icon" data-column="{{ ++$j }}"></i>
                                                <div class="filter-dropdown" style="display: none;">
                                                    <input type="text" class="form-control column-filter" data-column="{{ $j }}" placeholder="Filter {{ $label }}...">
                                                </div>
                                            </th>
                                        @endforeach
                                        @if($rack_get_count == 0)
                                            @foreach($qu_templete as $row)
                                                <th data-sortable="true" class="filter-header" title="{{ $row->question_text }}">
                                                    {{ Str::limit($row->question_text, 20, '...') }}
                                                    <i class="fas fa-filter filter-icon" data-column="{{ ++$j }}"></i>
                                                    <div class="filter-dropdown" style="display: none;">
                                                        <input type="text" class="form-control column-filter" data-column="{{ $j }}" placeholder="Filter {{ Str::limit($row->question_text, 20, '...') }}...">
                                                    </div>
                                                </th>
                                            @endforeach
                                        @endif
                                    </tr>
                                </thead>
                        <tbody></tbody>
                    </table>
                </div>
                <div class="row mt-3">
                    <div class="col-md-6">
                        <div class="pagination-info"></div>
                    </div>
                    <div class="col-md-6">
                        <nav class="float-end">
                            <ul class="pagination" id="paginationControls"></ul>
                        </nav>
                    </div>
                </div>
            </div>
            <div class="card-body" id="usercard">
                <!-- <div class="row">
                    @foreach($user as $row)
                        <div class="col-md-3 card-container">
                            @if($row->id == $teamleder->lead_auditor_id)
                                <div class="badge-title p-1">Leader</div>
                            @endif
                            <div class="user-card">
                                <div class="user-avatar">
                                    {{ strtoupper(substr($row->name ?? '', 0, 2)) }}
                                </div>
                                <div class="user-name">{{ $row->name }}</div>
                                <div class="user-email">{{ $row->email }} - {{ $row->mobile }}</div>
                                <button class="action-btn">Update Status</button>
                            </div>
                        </div>
                    @endforeach
                    @foreach($agency as $agencyRow)
                        <div class="col-md-3 card-container">
                            <div class="badge-title bg-agency">Agency</div>
                            <div class="user-card">
                                <div class="user-avatar bg-orange">
                                    {{ strtoupper(substr($agencyRow->name ?? '', 0, 2)) }}
                                </div>
                                <div class="user-name">{{ $agencyRow->name }}</div>
                                <div class="user-email">{{ $agencyRow->email }} - {{ $agencyRow->mobile }}</div>
                            </div>
                        </div>
                    @endforeach
                </div> -->
                <div class="row">
                    <div class="col-md-12">
                        <!-- **************** User Card ********  -->
                               

                                <!-- User Cards -->
                                <div class="row">
                                @foreach($user as $row)
                                    <div class="col-lg-3 col-md-6 mb-4">
                                        <div class="user-card">
                                            <div class="d-flex justify-content-between align-items-start">
                                                <div class="d-flex align-items-center">
                                                    <div class="user-avatar text-white"> {{ strtoupper(substr($row->name ?? '', 0, 2)) }}</div>
                                                    <div>
                                                        <div class="user-name"> {{ $row->name }}</div>
                                                         @if($row->id == $teamleder->lead_auditor_id)
                                                        <span class="role-badge badge-team-leader">Team Leader</span>
                                                        @else
                                                        <span class="role-badge badge-primary">Auditor</span>
                                                         @endif
                                                    </div>
                                                </div>
                                                <!-- <i class="fas fa-times status-icon status-inactive"></i> -->
                                            </div>
                                            
                                            <div class="contact-row">
                                                <div class="contact-item">
                                                    <div class="contact-icon">
                                                        <i class="fas fa-phone"></i>
                                                    </div>
                                                    <span>{{ $row->mobile }}</span>
                                                </div>
                                                <div class="contact-item">
                                                    <div class="contact-icon">
                                                        <i class="fas fa-envelope"></i>
                                                    </div>
                                                    <span>{{ $row->email }}</span>
                                                </div>
                                                <div class="contact-item">
                                                    <div class="contact-icon">
                                                        <i class="fa fa-lock"></i>
                                                    </div>
                                                    <span>{{ $row->pid }}</span>
                                                </div>
                                            </div>
                                            
                                            <div class="status-row">
                                                <span class="status-label">Status:</span>
                                                @if($Distributormaster->status == 1)
                                                <span class="status-badge badge-pending">Pending</span>
                                                @elseif($Distributormaster->status == 2)
                                                <span class="status-badge badge-wip">WIP</span>
                                                @elseif($Distributormaster->status == 3)
                                                <span class="status-badge badge-submit">Submit</span>
                                                @endif
                                                @if($row->status == 1)
                                                <span class="status-badge badge-success text-white">Active</span>
                                                @else
                                                <span class="status-badge badge-danger text-white">Block</span>
                                                @endif
                                            </div>
                                            @php
                                                $Project = App\Models\Project::where('id',$Distributormaster->project_id)->first();
                                                $total = App\Models\BookStockTemplete::where('template_id', $Project->bookstock_templete_id)->whereNull('dist_id')->where('new_iteam', 0)
                                                        ->count();
                                                $new = App\Models\BookStockTemplete::where('template_id', $Project->bookstock_templete_id)->whereNull('dist_id')->where('new_iteam', 2)
                                                        ->where('user_id',$row->id)->count();
                                                $BookStockOrignal = App\Models\BookStockOrignal::where('dist_id',$id)->pluck('id');
                                                $wip = App\Models\Entry::where('user_id',$row->id)->whereIn('orignals_item_id',$BookStockOrignal->toArray())->distinct('orignals_item_id')->count();
                                            @endphp
                                            <div class="stats-grid">
                                                <div class="stat-item">
                                                    <div class="stat-item-value">{{ $total }}</div>
                                                    <div class="stat-item-label">Total Items</div>
                                                </div>
                                                <div class="stat-item">
                                                    <div class="stat-item-value">{{ $wip }}</div>
                                                    <div class="stat-item-label">Working Items</div>
                                                </div>
                                                <div class="stat-item">
                                                    <div class="stat-item-value">{{ $new }}</div>
                                                    <div class="stat-item-label">New Items</div>
                                                </div>
                                                <div class="stat-item">
                                                    <div class="stat-item-value">{{ $total + $new - $wip }}</div>
                                                    <div class="stat-item-label">Pending Items</div>
                                                </div>
                                            </div>
                                            
                                            <div class="card-buttons">
                                                <!-- @if($row->status == 2)
                                                <button class="card-btn" onclick="workingstatus({{ $row->id }},{{ $id }});">
                                                    <i class="fas fa-tasks"></i> Work Status
                                                </button>
                                                @endif
                                                <button class="card-btn"  onclick="loginstatus({{ $row->id }},{{ $id }});">
                                                    <i class="fas fa-sign-in-alt"></i> Login Status
                                                </button> -->
                                                <!-- <button class="card-btn" onclick="changestatus({{ $row->id }},{{ $id }});">
                                                    <i class="fas fa-user-edit"></i> Change Role
                                                </button> -->
                                                <button class="btn btn-sm btn-primary track-btn" data-userid="{{ $row->id }}">Check Location</button>
                                            </div>
                                        </div>
                                    </div>
                                    @endforeach
                                </div>
                        <!-- **************** User Card ********  -->
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="sampletdatdoc">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header" style="background:var(--secondary) ;">
                <h5 class="modal-title">Update Status</h5>
                <button type="button" class="btn-close btn-close-it" data-bs-dismiss="modal">
                </button>
            </div>
            <form id="submitstatusdoc" method="post">
                @csrf
                <center class="mt-2">
                    <div class="col-8 mb-4">
                        <lable style=" float: left; font-weight: 900; ">Select Status</lable>
                        <select class="form-control" name="status" id="statusdoc" onchange="changedocremark();"
                            aria-label="Default select example" required>
                            <option value="">Select Status</option>
                            <option value="5">Accepted</option>
                            <option value="4">Rejected</option>
                        </select>
                    </div>
                    <div class="col-8 mb-4">
                        <lable style=" float: left; font-weight: 900; ">Enter Remarks</lable>
                        <textarea class="form-control" name="docremark" id="docremark"
                            required></textarea>
                            <input name="distributor_id" value="{{ $id }}" type="hidden"/>
                        </div>
                </center>
                <div class="modal-footer">
                    <button type="submit" class="btn btn-primary deleted-Zone">Submit</button>
                </div>
        </div>
        </form>
    </div>
</div>


<div class="modal fade" id="remarkdocs">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header" style="background:var(--secondary) ;">
                <h5 class="modal-title">Update Status</h5>
                <button type="button" class="btn-close btn-close-it" data-bs-dismiss="modal">
                </button>
            </div>
            <form id="submitstatusremark" method="post">
                @csrf
                <center class="mt-2">
                    <div class="col-8 mb-4">
                        <lable style=" float: left; font-weight: 900; ">Select Status</lable>
                        <select class="form-control" name="status" id="statusdoc" onchange="changedocremark();"
                            aria-label="Default select example" required>
                            <option value="">Select Status</option>
                            <option value="8">Accepted</option>
                            <option value="7">Rejected</option>
                        </select>
                    </div>
                    <div class="col-8 mb-4">
                        <lable style=" float: left; font-weight: 900; ">Enter Remarks</lable>
                        <textarea class="form-control" name="docremark" id="docremark"
                            required></textarea>
                            <input name="distributor_id" value="{{ $id }}" type="hidden"/>
                        </div>
                </center>
                <div class="modal-footer">
                    <button type="submit" class="btn btn-primary deleted-Zone">Submit</button>
                </div>
        </div>
        </form>
    </div>
</div>

<div class="modal fade" id="downloadexcel">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header" style="background:var(--secondary) ;">
                <h5 class="modal-title">Export Excel</h5>
                <button type="button" class="btn-close btn-close-it" data-bs-dismiss="modal">
                </button>
            </div>
            <div class="modal-body">
                <div class="row">
                    <div class="col-md-6">
                        <button type="button" class="btn btn-primary js-download-excel" data-distributor-id="{{ $Distributormaster->id }}" data-export-type="1">Export Reco Excel
                            <i class="fa fa-file-excel-o"></i>
                        </button>
                    </div>
                    <div class="col-md-6">
                        <button type="button" class="btn btn-primary js-download-excel" data-distributor-id="{{ $Distributormaster->id }}" data-export-type="2">Export Full Excel <i class="fa fa-file-excel-o"></i></button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>


<div class="modal fade" id="docsupload">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header" style="background:var(--secondary) ;">
                <h5 class="modal-title">Update Status</h5>
                <button type="button" class="btn-close btn-close-it" data-bs-dismiss="modal">
                </button>
            </div>
            <form id="submitstatusdocpdf" method="post">
                @csrf
                <center class="mt-2">
                    <div class="col-8 mb-4">
                        <lable style=" float: left; font-weight: 900; ">Select Status</lable>
                        <select class="form-control" name="status" id="statusdoc" onchange="changedocremark();"
                            aria-label="Default select example" required>
                            <option value="">Select Status</option>
                            <option value="9">Accepted</option>
                            <option value="10">Rejected</option>
                        </select>
                    </div>
                    <div class="col-8 mb-4">
                        <lable style=" float: left; font-weight: 900; ">Enter Remarks</lable>
                        <textarea class="form-control" name="docremark" id="docremark"
                            required></textarea>
                            <input name="distributor_id" value="{{ $id }}" type="hidden"/>
                        </div>
                </center>
                <div class="modal-footer">
                    <button type="submit" class="btn btn-primary deleted-Zone">Submit</button>
                </div>
        </div>
        </form>
    </div>
</div>

<!-- INF Template View Modal -->
<div class="modal fade" id="infViewModal" tabindex="-1" aria-labelledby="infViewModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg modal-dialog-centered modal-dialog-scrollable">
        <div class="modal-content" style="max-height: 90vh;">
            <div class="modal-header text-white" style="background: var(--secondary);">
                <h5 class="modal-title" id="infViewModalLabel"><i class="fas fa-eye me-2"></i>INF Template Answers</h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body" id="infViewBody" style="max-height: 70vh; overflow-y: auto;">
                <div class="text-center py-5">
                    <div class="spinner-border text-primary" role="status"></div>
                    <p class="mt-3">Loading...</p>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>
<style>
    .inf-template-card { border: 1px solid #dee2e6; border-radius: 10px; margin-bottom: 20px; overflow: hidden; }
    .inf-template-header { background: linear-gradient(to right, #452B90, #442b90a2); color: #fff; padding: 10px 16px; font-weight: 600; font-size: 15px; }
    .inf-qna-row { padding: 8px 16px; border-bottom: 1px solid #f0f0f0; display: flex; gap: 10px; }
    .inf-qna-row:last-child { border-bottom: none; }
    .inf-question { font-weight: 500; color: #444; min-width: 40%; max-width: 50%; }
    .inf-answer { color: #222; flex: 1; }
    .inf-file-thumb { height: 70px; border-radius: 6px; margin: 3px; object-fit: cover; border: 1px solid #ddd; }
    .inf-empty { color: #aaa; font-style: italic; }
    #infViewBody::-webkit-scrollbar { width: 6px; }
    #infViewBody::-webkit-scrollbar-thumb { background: #452b90; border-radius: 4px; }
</style>

<!-- Edit Entry Modal -->
<!-- Edit Entry Modal - Perfect Scrolling Fixed -->
<div class="modal fade" id="editEntryModal" tabindex="-1" aria-labelledby="editEntryModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-xl modal-dialog-centered modal-dialog-scrollable">
        <div class="modal-content" style="max-height: 95vh;">
            <div class="modal-header text-white" style="background: var(--secondary);">
                <h5 class="modal-title " id="editEntryModalLabel">Edit Stock Entry</h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>

            <form id="editEntryForm">
                <div class="modal-body" id="editFormBody" style="max-height: 65vh; overflow-y: auto; padding-right: 10px;">
                    <!-- Yaha dynamic form load hoga -->
                    <div class="text-center py-5">
                        <div class="spinner-border text-primary" role="status"></div>
                        <p class="mt-3">Loading entry data...</p>
                    </div>
                </div>

                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-primary px-4">
                        <i class="fas fa-save"></i> Save Changes
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Extra CSS for smooth scroll (optional but recommended) -->
<style>
    #editFormBody {
        scrollbar-width: thin;
        scrollbar-color: #452b90 #f1f1f1;
    }
    #editFormBody::-webkit-scrollbar {
        width: 8px;
    }
    #editFormBody::-webkit-scrollbar-track {
        background: #f1f1f1;
        border-radius: 4px;
    }
    #editFormBody::-webkit-scrollbar-thumb {
        background: #452b90;
        border-radius: 10px;
    }
    #editFormBody::-webkit-scrollbar-thumb:hover {
        background: #321f68;
    }
    .modal-xl {
        max-width: 96%;
        max-width: 1200px;
    }
</style>

<input id="distributor_id" value="{{ $id }}" type="hidden"/>
<input id="project_id" value="{{ $Distributormaster->project_id }}" type="hidden"/>
<input id="role_id" value="{{ Auth::user()->role_id }}" type="hidden"/>
<input id="rack_id" value="{{ $rack_get }}" type="hidden"/>
<input id="rack_id_get" value="{{ $rack_get_count }}" type="hidden"/>
<div id="s1"></div>
<script nonce="{{ $cspNonce }}" src="{{ asset('public/js/jquery-3.6.0.min.js') }}"></script>
{{-- ZIP --}}
<script nonce="{{ $cspNonce }}" src="{{ asset('plugin/jszip.min.js') }}"></script>

{{-- File Save --}}
<script nonce="{{ $cspNonce }}" src="{{ asset('plugin/FileSaver.min.js') }}"></script>

{{-- Table to Excel --}}
<script nonce="{{ $cspNonce }}" src="{{ asset('plugin/table2excel.min.js') }}"></script>

{{-- Zip.js --}}
<script nonce="{{ $cspNonce }}" src="{{ asset('plugin/zip.min.js') }}"></script>

{{-- SweetAlert2 --}}
<script nonce="{{ $cspNonce }}" src="{{ asset('table/libs/sweetalert2/sweetalert2.min.js') }}"></script>

{{-- SheetJS --}}
<script nonce="{{ $cspNonce }}" src="{{ asset('plugin/xlsx.full.min.js') }}"></script>

{{-- App JS --}}
<script nonce="{{ $cspNonce }}" src="{{ asset('js/showbookstock.js') }}"></script>
<script nonce="{{ $cspNonce }}">
document.addEventListener('DOMContentLoaded', function() {
    var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
    var tooltipList = tooltipTriggerList.map(function(tooltipTriggerEl) {
        return new bootstrap.Tooltip(tooltipTriggerEl);
   });
    $('.filter-dropdown').each(function() {
        if (!$(this).hasClass('active')) {
            $(this).hide();
        }
    });
});
</script>

<!-- ========== Live Track Modal ========== -->
<div class="modal fade" id="trackModal" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog modal-xl modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Live Location - <span id="trackUserLabel"></span></h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
      </div>
      <div class="modal-body">
        <div id="trackMap" style="width:100%;height:600px"></div>
        <div id="trackMeta" class="mt-2 small"></div>
      </div>
    </div>
  </div>
</div>

<script nonce="{{ $cspNonce }}">
let mapFrame = null;
let trackPollTimer = null;
const latestLocationUrlTemplate = @json(url('/users/__USER__/latest-location'));
const trackPollIntervalMs = 15000;

function initTrackMap() {
  if (mapFrame) return;
  const wrapper = document.getElementById('trackMap');
  if (!wrapper) {
    console.error('trackMap element not found in DOM');
    return;
  }
  wrapper.innerHTML = '';
  wrapper.style.position = 'relative';
  wrapper.style.minHeight = '400px';

  mapFrame = document.createElement('iframe');
  mapFrame.id = 'trackMapFrame';
  mapFrame.width = '100%';
  mapFrame.height = '600';
  mapFrame.style.border = '0';
  mapFrame.src = encodeURI('https://www.google.com/maps?q=20.5937,78.9629&z=5&output=embed');
  wrapper.appendChild(mapFrame);

  const openBtn = document.createElement('a');
  openBtn.id = 'openInGoogleMaps';
  openBtn.className = 'btn btn-sm btn-primary';
  openBtn.style.position = 'absolute';
  openBtn.style.right = '12px';
  openBtn.style.top = '12px';
  openBtn.style.zIndex = '9999';
  openBtn.target = '_blank';
  openBtn.href = 'https://www.google.com/maps';
  openBtn.innerText = 'Open in Google Maps';
  wrapper.appendChild(openBtn);
}

function attachTrackButtons() {
  document.querySelectorAll('.track-btn').forEach(btn => {
    btn.removeEventListener('click', onTrackBtnClick);
    btn.addEventListener('click', onTrackBtnClick);
  });
}

function onTrackBtnClick(e) {
  const btn = e.currentTarget;
  const userId = btn.getAttribute('data-userid') || btn.dataset.userid;
  if (!userId) {
    return alert('User id not found on button (data-userid).');
  }

  const labelEl = document.getElementById('trackUserLabel');
  if (labelEl) labelEl.innerText = userId;
  initTrackMap();

  const modalDom = document.getElementById('trackModal');
  if (!modalDom) {
    console.error('Modal #trackModal not found in DOM.');
    return alert('Track modal not present. Check modal markup.');
  }
  if (typeof bootstrap === 'undefined') {
    console.error('Bootstrap JS is not loaded.');
    return alert('Bootstrap JS not loaded. Include bootstrap.bundle.min.js');
  }

  const modalObj = new bootstrap.Modal(modalDom, { keyboard: true });
  modalObj.show();

  startPolling(userId);

  modalDom.addEventListener('hidden.bs.modal', function handler() {
    stopPolling();
    if (mapFrame) {
      try {
        mapFrame.src = 'about:blank';
      } catch (e) {}
    }
    modalDom.removeEventListener('hidden.bs.modal', handler);
  }, { once: true });
}

async function fetchLatestLocation(userId) {
  const meta = document.getElementById('trackMeta');
  const url = latestLocationUrlTemplate.replace('__USER__', encodeURIComponent(userId));

  try {
    const response = await fetch(url, {
      method: 'GET',
      headers: {
        'Accept': 'application/json',
        'X-Requested-With': 'XMLHttpRequest',
      },
      credentials: 'same-origin',
      cache: 'no-store',
    });

    const payload = await response.json();
    if (!response.ok || !payload.status || !payload.data) {
      if (meta) {
        meta.innerText = response.status === 404
          ? 'No location data available yet.'
          : (payload.message || 'Unable to fetch latest location.');
      }
      return;
    }

    const data = payload.data;
    const lat = parseFloat(data.latitude);
    const lng = parseFloat(data.longitude);
    const accuracy = data.accuracy ?? 'n/a';
    const capturedAt = data.captured_at || '';
    const channel = data.channel || 'unknown';

    if (meta) {
      meta.innerText = `lat: ${lat}, lng: ${lng}, accuracy: ${accuracy}m, at: ${capturedAt}, source: ${channel}`;
    }

    if (!mapFrame) initTrackMap();

    const embedUrl = `https://www.google.com/maps?q=${lat},${lng}&z=17&output=embed`;
    mapFrame.src = encodeURI(embedUrl);

    const openBtn = document.getElementById('openInGoogleMaps');
    if (openBtn) {
      openBtn.href = `https://www.google.com/maps/place/${lat},${lng}`;
    }
  } catch (error) {
    console.error('[TrackLocation] fetch error', error);
    if (meta) {
      meta.innerText = 'Unable to fetch latest location right now.';
    }
  }
}

function startPolling(userId) {
  stopPolling();
  fetchLatestLocation(userId);
  trackPollTimer = window.setInterval(() => fetchLatestLocation(userId), trackPollIntervalMs);
}

function stopPolling() {
  if (trackPollTimer) {
    window.clearInterval(trackPollTimer);
    trackPollTimer = null;
  }

  if (mapFrame) {
    try {
      mapFrame.src = 'about:blank';
      const wrapper = document.getElementById('trackMap');
      if (wrapper) wrapper.innerHTML = '';
    } catch (e) { console.warn(e); }
    mapFrame = null;
  }
}

document.addEventListener('DOMContentLoaded', function() {
  attachTrackButtons();
  console.log('Debug: bootstrap loaded?', !!window.bootstrap);
  console.log('Debug: trackModal el', !!document.getElementById('trackModal'));
  console.log('Debug: trackMap el', !!document.getElementById('trackMap'));
  console.log('Debug: any .track-btn found?', !!document.querySelector('.track-btn'));
});
</script>


@endsection