@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="row align-items-center justify-content-between mb-3">
        <!-- Heading -->
        <div class="col-auto">
            <h5 class="mb-0">CFT Generation</h5>
        </div>

    </div>


    <div class="card p-4 mb-5">
        <h5>Generate</h5>
        <div class="row g-2">
            <form action="{{ route('upload_file') }}" method="POST" enctype="multipart/form-data">
                @csrf
                <div class="row g-2">
                    <div class="col-lg-10">
                        <input type="file" name="file" class="form-control" required>
                    </div>
                    <div class="col-lg-2">
                        <button type="submit" class="btn btn-primary w-100">Upload</button>
                    </div>
                </div>
                <div class="m-5">

                    <p><span class="text-danger">*</span>Please upload a file in Excel format(.xls, .xlsx)</p>

                    <p><b>File must include the following columns:</b></p>

                    <p>👉 bdl_no, length, width, thickness, pcs, cft</p>
                </div>

            </form>


        </div>
    </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="bulkOrdersTable" class="table">
                        <thead>
                            <tr>
                                <th>SNO</th>
                                <th>DATE</th>
                                <th>FILE ID</th>
                                <th>FILE</th>
                                <th>ACTION</th>

                            </tr>
                        </thead>
                        <tbody>


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


@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('#bulkOrdersTable').DataTable({
            processing: true,
            serverSide: true,
            ajax: "{{ route('bulk_orders_data') }}",
            columns: [
                { data: 'DT_RowIndex', orderable: false, searchable: false },
                { data: 'created_at', name: 'created_at' },
                { data: 'file_id', name: 'file_id' },
                { data: 'file_link', orderable: false, searchable: false },
                { data: 'action', orderable: false, searchable: false }
            ],
            order: [[1, 'desc']],
            language: {
                search: "",
                searchPlaceholder: "Search bulk files",
                lengthMenu: "_MENU_"
            }
        });
    });
</script>

<script>


    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('uploadForm').addEventListener('submit', function (e) {
        const btn = document.getElementById('uploadBtn');
        btn.disabled = true;
        btn.innerText = 'Uploading...';
    });
</script>