@extends('layouts.main')
@section('title', 'View Book Stock Details')
@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;
        }
        .responsive-table {
  width: 100%;
  border-collapse: collapse;
  margin: 20px 0;
  font-size: 16px;
  text-align: left;
}

/* Styling table headers and cells */
.responsive-table th,
.responsive-table td {
  padding: 12px 15px;
  border: 1px solid #ddd;
}

/* Styling table headers */
.responsive-table th {
  background-color: #f4f4f4;
  font-weight: bold;
}

/* Responsive behavior for smaller screens */
@media screen and (max-width: 600px) {
  .responsive-table {
    display: block;
    overflow-x: auto; /* Enables horizontal scrolling */
    white-space: nowrap; /* Prevents text wrapping */
  }

  .responsive-table thead,
  .responsive-table tbody,
  .responsive-table th,
  .responsive-table td,
  .responsive-table tr {
    display: block;
  }

  /* Hide table headers for mobile view */
  .responsive-table thead tr {
    position: absolute;
    top: -9999px;
    left: -9999px;
  }

  .responsive-table tr {
    margin-bottom: 10px;
    border-bottom: 2px solid #ddd;
  }

  .responsive-table td {
    border: none;
    position: relative;
    padding-left: 50%;
    text-align: right;
  }

  /* Add labels for mobile view using data-label attribute */
  .responsive-table td:before {
    content: attr(data-label);
    position: absolute;
    left: 15px;
    width: 45%;
    padding-right: 10px;
    font-weight: bold;
    text-align: left;
  }
}
    </style>

    {{-- ************ Div **************** --}}
    <div class="container-fluid">
        <div class="row">
            <div class="col-xl-12 active-p">
                <div class="row">
                    <div class="col-xl-12 col-lg-12">
                        <div class="card" style="height: max-content;">
                            <div class="card-header p-2" style="background:var(--secondary) ;">
                                <div class="row" style=" width: 100%; ">
                                    <div class="col-md-6 col-6">
                                        <h4 class="card-title">BookStock Templete - {{ $data->name }}</h4>
                                    </div>
                                    <div class="col-md-6 col-6">
                                        <div></div>
                                        <button class="btn btn-primary p-2 m-2" style="float:right;"><i class="fa fa-plus"></i> Add
                                            BookStock</button>
                                        <button class="btn btn-primary p-2 mt-2" style="float:right;" data-bs-toggle="modal"
                                            data-bs-target=".bd-example-modal-sm"><i class="fa fa-plus"></i> Add Bulk
                                            BookStock</button>
                                    </div>
                                </div>
                            </div>
                            <div class="card-body">
                                {{-- ******** tables ********* --}}

                                @php
                                $columns = [
                                    'Item SKU Code',
                                    'Item Name',
                                    'Item Type',
                                    'Item Sub Type',
                                    'EAN Code',
                                    'Pack Size',
                                    'Brand',
                                    'Location',
                                    'Uom',
                                    'Batch Number',
                                    'Item Mrp',
                                    'Item Rate',
                                    'Item Qty',
                                    'Field 1',
                                    'Field 2',
                                    'Field 3',
                                    'Field 4',
                                    'Field 5'
                                ];
                                $i = 1;
                                $j = 1;
                            @endphp

                       

                                {{-- Filter Controls --}}
                                <div class="row">
                                     <div class="col-md-2">
                                        <div class="btn-group">
                                            <button class="btn btn-outline-primary dropdown-toggle" type="button"
                                                id="columnSelectDropdown" data-bs-toggle="dropdown" aria-expanded="false">
                                                <i class="fas fa-columns"></i> Columns
                                            </button>
                                            <ul class="dropdown-menu" id="columnSelectionMenu">
                                                <li><a class="dropdown-item disabled" href="#" data-column="0"><input
                                                            type="checkbox" class="column-toggle" data-column="0" checked
                                                            readonly disabled> Sr</a></li>
                                                <li><a class="dropdown-item disabled" href="#" data-column="1"
                                                        readonly><input type="checkbox" class="column-toggle"
                                                            data-column="1" checked readonly disabled> Actions</a></li>

                                                   @foreach($columns as $r => $row)
                                                        @php ++$i; @endphp
                                                        <li>
                                                            <a class="dropdown-item" href="#" data-column="{{ $i }}">
                                                                <input type="checkbox" class="column-toggle" data-column="{{ $i }}">
                                                                {{ $row }}
                                                            </a>
                                                        </li>
                                                    @endforeach

                                            </ul>
                                            <button id="resetFilters" class="btn btn-outline-secondary">
                                                <i class="fas fa-sync-alt"></i> Reset
                                            </button>
                                        </div>
                                    </div>
                                    <div class="col-md-6"></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>
                                {{-- Data Table --}}
                                <div class="table-responsive">
                                    <table id="bookstockTable" class="table table-bordered table-striped table-hover">
                                        <thead class="table-light">
                                            <tr>
                                                <th data-sortable="true" class="filter-header">Sr <i
                                                        class="fas fa-filter filter-icon" data-column="0"></i>
                                                    <div class="filter-dropdown">
                                                        <input type="text" class="form-control column-filter"
                                                            data-column="0" placeholder="Filter ID...">
                                                    </div>
                                                </th>
                                                <th>Actions</th>
                                                @foreach($columns as $r => $row)
                                                        @php ++$j; @endphp
                                                <th data-sortable="true" data-sortable="true" class="filter-header">{{ $row }}
                                                    <i class="fas fa-filter filter-icon" data-column="{{ $j }}"></i>
                                                    <div class="filter-dropdown">
                                                        <input type="text" class="form-control column-filter"
                                                            data-column="{{ $j }}" placeholder="Filter {{ $row }}...">
                                                    </div>
                                                </th>
                                                @endforeach
                                            </tr>
                                        </thead>
                                    </table>
                                </div>
                                {{-- Pagination --}}
                                <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>
                                {{-- ********** table ********* --}}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    </div>
    {{-- ************ Div **************** --}}
@endsection
<form id="deletenow">
    @csrf
    <input type="hidden" id="deleteid" name="deleteid" />
    <input type="hidden" id="status" name="status" />
    <button class="btn btn-danger" id="deletenowsubmit"></button>

</form>


 <div class="modal fade bd-example-modal-sm bd-example-modal-sm-none" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog modal-sm">
            <div class="modal-content">
                <div class="modal-header" style="background:var(--secondary) ;">
                    <h5 class="modal-title">Upload BookStock</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal">
                    </button>
                </div>
                <div class="modal-body">
                    <form id="uploadbookstock">
                        <div class="row">
                            <div class="col-md-12">
                                <label for="bookstock">Book Stock</label>
                                 (<a href="{{ asset('downloadformat/bookstock.xlsx') }}" 
            style="text-decoration: none; color:red;" 
            download><b>Download Excel</b></a>)
					<input type="file" name="filename" class="form-control" id="bookstock" />
                                <input type="hidden" value="{{ $data->id }}" name="temp_id" />
                            </div>
                            <hr>
                            <div class="col-md-12">
                                <button class="btn btn-primary btn-block">Submit</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>


<input type="hidden" value="{{ $data->id }}" id="planid" />
<script nonce="{{ $cspNonce }}" src="{{ asset('public/js/jquery-3.6.0.min.js') }}"></script>
<script nonce="{{ $cspNonce }}" src="{{ asset('js/editbookstock.js') }}"></script>