@extends('Admin.layout')
<link rel="stylesheet" href="https://cdn.datatables.net/2.3.4/css/dataTables.bootstrap5.css">

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">

<style>
    div.card-datatable {
        padding-block-end: 0rem !important;
    }
</style>

@section('content')
<div
    class="d-flex flex-column flex-md-row justify-content-between align-items-start align-items-md-center mb-1 row-gap-4">
    <div class="d-flex flex-column justify-content-center">
        <h5> <button type="button" class="btn btn-icon bg-white waves-effect me-2"
                style="box-shadow: 0px 9px 12px -2px #66328E1F;">
                <a href="{{route('bulk_orders')}}"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
                        viewBox="0 0 24 24" fill="none" stroke="#000" stroke-width="2" stroke-linecap="round"
                        stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-chevron-left">
                        <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                        <path d="M15 6l-6 6l6 6" />
                    </svg>
                </a></button>View CFT</h5>
    </div>
    <!-- Button -->
    <div class="col-auto">
        <button id="exportbulkBtn" class="btn buttons-collection btn-label-secondary dropdown-toggle me-4" tabindex="0"
            aria-controls="DataTables_Table_0" type="button" aria-haspopup="dialog" aria-expanded="false"><span><span
                    class="d-flex align-items-center gap-2"><i class="icon-base ti tabler-upload icon-xs me-sm-1"></i>
                    <span class="d-sm-inline-block">Export</span></span></span></button>
    </div>
</div>


<div class="card p-4 mb-5">
    <h5>Generate</h5>

        <form action="{{ route('generate_cft') }}" id="generateForm" method="POST">
            @csrf
            <input type="hidden" name="file_id" value="{{ $file_id }}">
    <div class="row g-3">

            <div class="col-lg-10">
                <input type="number" name="party_count" class="form-control" placeholder="Enter Party Count">
            </div>

            <div class="col-lg-2">
                <button type="button" class="btn btn-primary w-100" data-bs-toggle="modal"
                    data-bs-target="#generate">Generate</button>
            </div>
        </div>
        </form>
</div>

<div class="card mb-5">
    <div class="card-datatable table-responsive pt-0">
        <div class="row card-header flex-column flex-md-row border-bottom mx-0 px-3">
            <div class="justify-content-between dt-layout-table"></div>
            <div class="justify-content-between align-items-center dt-layout-full table-responsive">
                <table id="information" class="table">
                    <thead>
                        <tr>
                            <th>SNO</th>
                            <th>BDL NO</th>
                            <th>LENGTH</th>
                            <th>WIDTH</th>
                            <th>THICKNESS</th>
                            <th>pcs</th>
                            <th>CFT</th>
                        </tr>
                    </thead>
                    <tbody>

                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

<!-- Generate -->
<div class="modal fade" id="generate" tabindex="-1" data-bs-backdrop="static" data-bs-keyboard="false">
    <div class="modal-dialog modal-sm modal-dialog-centered">
        <div class="modal-content rounded-4 text-center p-4 py-5">
            <h5 class="fw-bold mb-2">Are you sure!!</h5>
            <p class="text-muted">Are you confirm to generate ?</p>

            <div class="d-flex justify-content-center align-items-center gap-3 mt-4">
                <button type="button" class="btn btn-outline-primary p-3 fw-semibold  me-3" data-bs-dismiss="modal">
                    Cancel
                </button>
                <button type="submit" form="generateForm" id="generateBtn" class="btn btn-primary p-3 fw-semibold">
                    Yes, Sure
                </button>
            </div>
        </div>
    </div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js"></script> <!-- for Excel -->
<script src="https://cdn.datatables.net/buttons/2.3.6/js/buttons.html5.min.js"></script>
<script src="https://cdn.datatables.net/buttons/2.3.6/js/buttons.print.min.js"></script> <!-- for print -->
<script>
document.getElementById("exportbulkBtn").addEventListener("click", async function () {
    const fileId = "{{ $file_id }}"; // Blade variable

    let allData = [];
    let start = 0;
    const length = 100; // fetch 100 rows at a time
    let hasMore = true;

    while (hasMore) {
        // Construct URL with DataTables server-side params
        const url = `{{ route('bulk_order_view_data', $file_id) }}?start=${start}&length=${length}`;

        const response = await fetch(url);
        const data = await response.json();

        if (data.data && data.data.length > 0) {
            allData = allData.concat(data.data);
            start += length;
            if (data.data.length < length) hasMore = false; // no more data
        } else {
            hasMore = false;
        }
    }

    if(allData.length === 0){
        alert('No data to export!');
        return;
    }

    // Generate CSV
    let csv = [];
    const header = ['SNO', 'BDL NO', 'LENGTH', 'WIDTH', 'THICKNESS', 'PCS', 'CFT'];
    csv.push(header.join(','));

    allData.forEach((row, index) => {
        csv.push([
            index + 1,
            row.bdl_no,
            row.length,
            row.width,
            row.thickness,
            row.pcs,
            row.cft
        ].join(','));
    });

    const blob = new Blob([csv.join('\n')], { type: 'text/csv;charset=utf-8;' });
    const urlBlob = URL.createObjectURL(blob);

    const a = document.createElement('a');
    a.href = urlBlob;
    a.download = `bulk_cft_${fileId}.csv`;
    document.body.appendChild(a);
    a.click();
    document.body.removeChild(a);
    URL.revokeObjectURL(urlBlob);
});
</script>

@endsection

<script src="https://code.jquery.com/jquery-3.7.1.js"></script>
<script src="https://cdn.datatables.net/2.3.4/js/dataTables.js"></script>
<script src="https://cdn.datatables.net/2.3.4/js/dataTables.bootstrap5.js"></script>

<script>
  var jq = jQuery.noConflict();

jq(document).ready(function () {
    jq('#information').DataTable({
        processing: true,
        serverSide: true,
        ajax: "{{ route('bulk_order_view_data', $file_id) }}",
        columns: [
            { data: 'DT_RowIndex', orderable: false, searchable: false },
            { data: 'bdl_no', name: 'bdl_no' },
            { data: 'length', name: 'length' },
            { data: 'width', name: 'width' },
            { data: 'thickness', name: 'thickness' },
            { data: 'pcs', name: 'pcs' },
            { data: 'cft', name: 'cft' }
        ],
        scrollX: true,
        language: {
            search: "",
            searchPlaceholder: "Search items",
            lengthMenu: "_MENU_"
        }
    });
});

    // document.getElementById("exportbulkBtn").addEventListener("click", function() {
    //     let table = document.getElementById("bulk");
    //     let rows = Array.from(table.querySelectorAll("tr"));

    //     let csv = rows.map(row => {
    //         let cells = Array.from(row.querySelectorAll("th, td"));
    //         return cells.map(cell => `"${cell.innerText}"`).join(",");
    //     }).join("\n");

    //     let blob = new Blob([csv], {
    //         type: "text/csv"
    //     });
    //     let url = URL.createObjectURL(blob);

    //     let a = document.createElement("a");
    //     a.href = url;
    //     a.download = "bulk.csv";
    //     a.click();

    //     URL.revokeObjectURL(url);
    // });


    document.getElementById('generateForm').addEventListener('submit', function(e) {
        const btn = document.getElementById('generateBtn');
        btn.disabled = true;
        btn.innerText = 'processing...';
    });
</script>