@extends('admin.layout.dashboard_master')

@section('content')
    <main id="main" class="main">

        <div class="pagetitle">
            <h1>Products</h1>
            <nav>
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="index.html">American Plastic</a></li>
                    <li class="breadcrumb-item">Dashboard</li>
                    <li class="breadcrumb-item active">Products/Out Of Stock</li>
                </ol>
            </nav>
        </div><!-- End Page Title -->
        <script src="https://cdn.jsdelivr.net/npm/xlsx@0.18.5/dist/xlsx.full.min.js"></script>
        <section class="section">

            <div class="row">
                <div class="col-lg-12">
                    <div class="card">
                        <div class="card-body">
                            <div class="mb-3">
                                <button id="downloadExcel" class="btn btn-success">Download as Excel</button>
                            </div>
                            <div class="mb-3">
                                <button id="downloadoutofstockExcel" class="btn btn-success">Download as Excel (Out of
                                    stock)</button>
                            </div>
                            <div class="table-responsive text-nowrap ">
                                <table class="table" id="outofstock_table">
                                    <thead>
                                        <tr>
                                            <th>Product Id</th>
                                            <th>Product Name</th>
                                            <th>Color</th>
                                            <th>Qty</th>
                                            <th>Code</th>

                                        </tr>
                                    </thead>
                                    <tbody>

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

                </div>


            </div>
            <style>
                /* General Styles */

                * {
                    box-sizing: border-box;
                }

                :root {
                    --clr-white: rgb(255, 255, 255);
                    --clr-black: rgb(0, 0, 0);
                    --clr-light: rgb(245, 248, 255);
                    --clr-light-gray: rgb(196, 195, 196);
                    --clr-blue: rgb(63, 134, 255);
                    --clr-light-blue: rgb(171, 202, 255);
                }


                /* End General Styles */

                /* Upload Area */
                .upload-area {
                    width: 100%;
                    max-width: 55rem;
                    background-color: var(--clr-white);
                    box-shadow: 0 10px 60px rgb(218, 229, 255);
                    border: 2px solid var(--clr-light-blue);
                    border-radius: 24px;
                    padding: 2rem 1.875rem 5rem 1.875rem;
                    margin: 0.625rem;

                }

                .upload-area--open {
                    /* Slid Down Animation */
                    animation: slidDown 500ms ease-in-out;
                }

                @keyframes slidDown {
                    from {
                        height: 28.125rem;
                        /* 450px */
                    }

                    to {
                        height: 35rem;
                        /* 560px */
                    }
                }

                /* Header */
                .upload-area__header {}

                .upload-area__title {
                    font-size: 1.8rem;
                    font-weight: 500;
                    margin-bottom: 0.3125rem;
                }

                .upload-area__paragraph {
                    font-size: 0.9375rem;
                    color: var(--clr-light-gray);
                    margin-top: 0;
                }

                .upload-area__tooltip {
                    position: relative;
                    color: var(--clr-light-blue);
                    cursor: pointer;
                    transition: color 300ms ease-in-out;
                }

                .upload-area__tooltip:hover {
                    color: var(--clr-blue);
                }

                .upload-area__tooltip-data {
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    transform: translate(-50%, -125%);
                    min-width: max-content;
                    background-color: var(--clr-white);
                    color: var(--clr-blue);
                    border: 1px solid var(--clr-light-blue);
                    padding: 0.625rem 1.25rem;
                    font-weight: 500;
                    opacity: 0;
                    visibility: hidden;
                    transition: none 300ms ease-in-out;
                    transition-property: opacity, visibility;
                }

                .upload-area__tooltip:hover .upload-area__tooltip-data {
                    opacity: 1;
                    visibility: visible;
                }

                /* Drop Zoon */
                .upload-area__drop-zoon {
                    position: relative;
                    height: 11.25rem;
                    /* 180px */
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    flex-direction: column;
                    border: 2px dashed var(--clr-light-blue);
                    border-radius: 15px;
                    margin-top: 2.1875rem;
                    cursor: pointer;
                    transition: border-color 300ms ease-in-out;
                }

                .upload-area__drop-zoon:hover {
                    border-color: var(--clr-blue);
                }

                .drop-zoon__icon {
                    display: flex;
                    font-size: 3.75rem;
                    color: var(--clr-blue);
                    transition: opacity 300ms ease-in-out;
                }

                .drop-zoon__paragraph {
                    font-size: 0.9375rem;
                    color: var(--clr-light-gray);
                    margin: 0;
                    margin-top: 0.625rem;
                    transition: opacity 300ms ease-in-out;
                }

                .drop-zoon:hover .drop-zoon__icon,
                .drop-zoon:hover .drop-zoon__paragraph {
                    opacity: 0.7;
                }

                .drop-zoon__loading-text {
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    transform: translate(-50%, -50%);
                    display: none;
                    color: var(--clr-light-blue);
                    z-index: 10;
                }

                .drop-zoon__preview-image {
                    position: absolute;
                    top: 0;
                    left: 0;
                    width: 100%;
                    height: 100%;
                    object-fit: contain;
                    padding: 0.3125rem;
                    border-radius: 10px;
                    display: none;
                    z-index: 1000;
                    transition: opacity 300ms ease-in-out;
                }

                .drop-zoon:hover .drop-zoon__preview-image {
                    opacity: 0.8;
                }

                .drop-zoon__file-input {
                    display: none;
                }

                /* (drop-zoon--over) Modifier Class */
                .drop-zoon--over {
                    border-color: var(--clr-blue);
                }

                .drop-zoon--over .drop-zoon__icon,
                .drop-zoon--over .drop-zoon__paragraph {
                    opacity: 0.7;
                }

                /* (drop-zoon--over) Modifier Class */
                .drop-zoon--Uploaded {}

                .drop-zoon--Uploaded .drop-zoon__icon,
                .drop-zoon--Uploaded .drop-zoon__paragraph {
                    display: none;
                }

                /* File Details Area */
                .upload-area__file-details {
                    height: 0;
                    visibility: hidden;
                    opacity: 0;
                    text-align: left;
                    transition: none 500ms ease-in-out;
                    transition-property: opacity, visibility;
                    transition-delay: 500ms;
                }

                /* (duploaded-file--open) Modifier Class */
                .file-details--open {
                    height: auto;
                    visibility: visible;
                    opacity: 1;
                }

                .file-details__title {
                    font-size: 1.125rem;
                    font-weight: 500;
                    color: var(--clr-light-gray);
                }

                /* Uploaded File */
                .uploaded-file {
                    display: flex;
                    align-items: center;
                    padding: 0.625rem 0;
                    visibility: hidden;
                    opacity: 0;
                    transition: none 500ms ease-in-out;
                    transition-property: visibility, opacity;
                }

                /* (duploaded-file--open) Modifier Class */
                .uploaded-file--open {
                    visibility: visible;
                    opacity: 1;
                }

                .uploaded-file__icon-container {
                    position: relative;
                    margin-right: 0.3125rem;
                }

                .uploaded-file__icon {
                    font-size: 3.4375rem;
                    color: var(--clr-blue);
                }

                .uploaded-file__icon-text {
                    position: absolute;
                    top: 1.5625rem;
                    left: 50%;
                    transform: translateX(-50%);
                    font-size: 0.9375rem;
                    font-weight: 500;
                    color: var(--clr-white);
                }

                .uploaded-file__info {
                    position: relative;
                    top: -0.3125rem;
                    width: 100%;
                    display: flex;
                    justify-content: space-between;
                }

                .uploaded-file__info::before,
                .uploaded-file__info::after {
                    content: '';
                    position: absolute;
                    bottom: -0.9375rem;
                    width: 0;
                    height: 0.5rem;
                    background-color: #ebf2ff;
                    border-radius: 0.625rem;
                }

                .uploaded-file__info::before {
                    width: 100%;
                }

                .uploaded-file__info::after {
                    width: 100%;
                    background-color: var(--clr-blue);
                }

                /* Progress Animation */
                .uploaded-file__info--active::after {
                    animation: progressMove 800ms ease-in-out;
                    animation-delay: 300ms;
                }

                @keyframes progressMove {
                    from {
                        width: 0%;
                        background-color: transparent;
                    }

                    to {
                        width: 100%;
                        background-color: var(--clr-blue);
                    }
                }

                .uploaded-file__name {
                    width: 100%;
                    max-width: 6.25rem;
                    /* 100px */
                    display: inline-block;
                    font-size: 1rem;
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;
                }

                .uploaded-file__counter {
                    font-size: 1rem;
                    color: var(--clr-light-gray);
                }
            </style>

        </section>

        <script>
            document.getElementById('downloadoutofstockExcel').addEventListener('click', function() {
                // Show a loading indicator
                const button = this;
                const originalText = button.innerHTML;
                button.innerHTML = '<i class="fa fa-spinner fa-spin"></i> Preparing download...';
                button.disabled = true;

                // Get all data from server (bypassing pagination)
                $.ajax({
                    url: "{{ route('american.plastic.admin.product.get.productcolor.only.out.of.stock.live.report') }}",
                    data: {
                        length: -1 // Tell server to return all records
                    },
                    success: function(response) {
                        // Prepare the data array
                        const data = [];

                        // Add headers
                        const headers = [
                            'Product Id',
                            'Product Name',
                            'Color',
                            'Qty',
                            'Code'
                        ];
                        data.push(headers);

                        // Add row data
                        response.data.forEach(row => {
                            const rowData = [
                                row.product_id,
                                row.product_name,
                                row.product_color,
                                row.qty,
                                row.code
                            ];
                            data.push(rowData);
                        });

                        // Create worksheet
                        const ws = XLSX.utils.aoa_to_sheet(data);

                        // Create workbook
                        const wb = XLSX.utils.book_new();
                        XLSX.utils.book_append_sheet(wb, ws, "OutOfStock");

                        // Download the file
                        XLSX.writeFile(wb, 'Product color.xlsx');

                        // Restore button
                        button.innerHTML = originalText;
                        button.disabled = false;
                    },
                    error: function() {
                        alert('Failed to download data. Please try again.');
                        button.innerHTML = originalText;
                        button.disabled = false;
                    }
                });
            });

            document.getElementById('downloadExcel').addEventListener('click', function() {
                // Show a loading indicator
                const button = this;
                const originalText = button.innerHTML;
                button.innerHTML = '<i class="fa fa-spinner fa-spin"></i> Preparing download...';
                button.disabled = true;

                // Get all data from server (bypassing pagination)
                $.ajax({
                    url: "{{ route('american.plastic.admin.product.get.productcolor.out.of.stock.live.report') }}",
                    data: {
                        length: -1 // Tell server to return all records
                    },
                    success: function(response) {
                        // Prepare the data array
                        const data = [];

                        // Add headers
                        const headers = [
                            'Product Id',
                            'Product Name',
                            'Color',
                            'Qty',
                            'Code'
                        ];
                        data.push(headers);

                        // Add row data
                        response.data.forEach(row => {
                            const rowData = [
                                row.product_id,
                                row.product_name,
                                row.product_color,
                                row.qty,
                                row.code
                            ];
                            data.push(rowData);
                        });

                        // Create worksheet
                        const ws = XLSX.utils.aoa_to_sheet(data);

                        // Create workbook
                        const wb = XLSX.utils.book_new();
                        XLSX.utils.book_append_sheet(wb, ws, "OutOfStock");

                        // Download the file
                        XLSX.writeFile(wb, 'Product color.xlsx');

                        // Restore button
                        button.innerHTML = originalText;
                        button.disabled = false;
                    },
                    error: function() {
                        alert('Failed to download data. Please try again.');
                        button.innerHTML = originalText;
                        button.disabled = false;
                    }
                });
            });
            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });

            var table = $('#outofstock_table').DataTable({
                processing: true,
                serverSide: true,
                ajax: "{{ route('american.plastic.admin.product.get.productcolor.out.of.stock.live') }}",
                columns: [{
                        data: 'product_id',
                        name: 'product_id'
                    },

                    {
                        data: 'product_name',
                        name: 'product_name'
                    },
                    {
                        data: 'product_color',
                        name: 'product_color'
                    },
                    {
                        data: 'qty',
                        name: 'qty'
                    },
                    {
                        data: 'code',
                        name: 'code'
                    },






                ]
            });
        </script>
    </main><!-- End #main -->
@endsection
