@extends('admin.layout')

<link rel="stylesheet" href="https://cdn.datatables.net/1.13.6/css/jquery.dataTables.min.css">
<link rel="stylesheet" href="{{ asset('assets/css/table_filter.css') }}">

<style>
    .dt-search {
        display: none !important;
    }

    #patientsTable th,
    #patientsTable td {
        vertical-align: middle;
    }

    .view-description {
        text-decoration: none;
        cursor: pointer;
    }
    .dt-export {
        display: none !important;
    }
</style>

@section('content')

<h5>
    <button type="button"
        class="btn btn-icon bg-white me-2 waves-effect waves-light"
        style="box-shadow: 0px 9px 12px -2px #66328E1F;">

        <a href="{{ route('admin.stock_list') }}">

            <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">

                <path stroke="none"
                    d="M0 0h24v24H0z"
                    fill="none">
                </path>

                <path d="M15 6l-6 6l6 6"></path>

            </svg>

        </a>

    </button>

    Expenditure

</h5>


<div class="card p-2">

    <div class="row mb-3 align-items-center">

        {{-- Page Length --}}
        <div class="col-auto mb-3">

            <select id="pageLength"
                class="form-select">

                <option value="10">10</option>
                <option value="25">25</option>
                <option value="50">50</option>
                <option value="100">100</option>
                <option value="All">All</option>

            </select>

        </div>


        {{-- Search --}}
        <div class="col-lg-7 col-12 mb-3">

            <div class="search-cluster w-100">

                <div class="search-field">

                    <i class="ti tabler-hash"></i>

                    <input type="text"
                        id="sheetSearch"
                        placeholder="Search expenditure..."
                        class="w-100">

                </div>

            </div>

        </div>


        {{-- Reset --}}
        <div class="col-lg-1 col-12 mb-3">

            <button class="btn btn-secondary w-100"
                id="resetBtn"
                type="button">

                <span>Reset</span>

            </button>

        </div>


        {{-- Export --}}
        <div class="col-lg-1 col-12 mb-3">

            <button type="button"
                class="btn btn-label-secondary w-100"
                id="exportBtn">

                Export

            </button>
        </div>

    </div>


    <div class="table-responsive pt-0 pb-2">

        <table class="table"
            id="patientsTable">

            <thead>

                <tr>

                    <th>S.No</th>
                    <th>Date</th>
                    <th>Expenditure</th>
                    <th>Description</th>
                    <th>Receipt</th>

                </tr>

            </thead>

            <tbody>
            </tbody>

        </table>

    </div>

</div>


{{-- =========================================================
    DESCRIPTION MODAL
========================================================= --}}

<div class="modal fade"
    id="descriptionModal"
    tabindex="-1"
    aria-hidden="true">

    <div class="modal-dialog modal-dialog-centered modal-sm">

        <div class="modal-content">

            <div class="modal-header">

                <h5 class="modal-title">
                    Description
                </h5>

                <button type="button"
                    class="btn-close"
                    data-bs-dismiss="modal">
                </button>

            </div>

            <div class="modal-body">

                <p class="mb-0"
                    id="descriptionText">
                </p>

            </div>

        </div>

    </div>

</div>


{{-- =========================================================
    RECEIPT MODAL
========================================================= --}}

<div class="modal fade"
    id="viewReceiptModal"
    tabindex="-1"
    aria-hidden="true">

    <div class="modal-dialog modal-dialog-centered modal-lg">

        <div class="modal-content">

            <div class="modal-header">

                <h5 class="modal-title">

                    <i class="ti tabler-file-text me-2"></i>
                    Receipt Preview

                </h5>

                <button type="button"
                    class="btn-close"
                    data-bs-dismiss="modal"
                    aria-label="Close">
                </button>

            </div>


            <div class="modal-body text-center p-3"
                id="receiptModalBody">
            </div>


            <div class="modal-footer justify-content-end">

                <a href="#"
                    id="downloadReceiptBtn"
                    target="_blank"
                    class="btn btn-primary"
                    download>

                    <i class="ti tabler-download me-1"></i>
                    Download

                </a>

            </div>

        </div>

    </div>

</div>


<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>


<script>
    $(document).ready(function() {


        /* =========================================================
           DATATABLE
        ========================================================== */

        let table = $('#patientsTable').DataTable({

            processing: true,

            serverSide: true,

            ajax: {

                url: "{{ route('expenditure_data', $vehicle_id) }}",

                type: "GET",

                error: function(xhr) {

                    console.log(
                        'Expenditure DataTable Error:',
                        xhr.responseText
                    );

                }

            },

            paging: true,

            searching: true,

            info: true,

            lengthChange: false,

            pageLength: 10,


            columns: [

                /* =================================================
                   S.NO
                ================================================== */

                {

                    data: 'DT_RowIndex',

                    name: 'DT_RowIndex',

                    orderable: false,

                    searchable: false,

                    className: 'text-center'

                },


                /* =================================================
                   DATE
                ================================================== */

                {

                    data: 'date',

                    name: 'date',

                    className: 'text-center',

                    render: function(data) {

                        if (!data) {

                            return '-';

                        }


                        let date = new Date(data);


                        if (isNaN(date.getTime())) {

                            return data;

                        }


                        let day =
                            String(
                                date.getDate()
                            ).padStart(2, '0');


                        let month =
                            String(
                                date.getMonth() + 1
                            ).padStart(2, '0');


                        let year =
                            date.getFullYear();


                        return (
                            day +
                            '-' +
                            month +
                            '-' +
                            year
                        );

                    }

                },


                /* =================================================
                   EXPENDITURE
                ================================================== */

                {

                    data: 'expenditure',

                    name: 'expenditure',

                    className: 'text-center',

                    render: function(
                        data,
                        type,
                        row
                    ) {

                        if (
                            data === null ||
                            data === undefined ||
                            data === ''
                        ) {

                            return '₹0.00';

                        }


                        let cleanAmount =
                            String(data)
                            .replace(/₹/g, '')
                            .replace(/,/g, '')
                            .trim();


                        let amount =
                            parseFloat(cleanAmount);


                        if (isNaN(amount)) {

                            return '₹0.00';

                        }


                        return (
                            '₹' +
                            amount.toLocaleString(
                                'en-IN', {
                                    minimumFractionDigits: 2,
                                    maximumFractionDigits: 2
                                }
                            )
                        );

                    }

                },


                /* =================================================
                   DESCRIPTION
                ================================================== */

                {

                    data: 'description',

                    name: 'description',

                    className: 'text-start',

                    render: function(
                        data,
                        type,
                        row
                    ) {

                        if (
                            data === null ||
                            data === undefined ||
                            data === ''
                        ) {

                            return '-';

                        }


                        let description =
                            String(data).trim();


                        let words =
                            description.split(/\s+/);


                        /* -----------------------------------------
                           10 WORDS OR LESS
                        ------------------------------------------ */

                        if (words.length <= 10) {

                            return $('<div>')
                                .text(description)
                                .html();

                        }


                        /* -----------------------------------------
                           MORE THAN 10 WORDS
                        ------------------------------------------ */

                        let shortText =
                            words
                            .slice(0, 10)
                            .join(' ');


                        return `

                            <span>
                                ${
                                    $('<div>')
                                    .text(shortText)
                                    .html()
                                }
                            </span>

                            <a href="javascript:void(0)"
                               class="view-description text-primary fw-bold"
                               data-description="${encodeURIComponent(description)}">

                                ...

                            </a>

                        `;

                    }

                },


                /* =================================================
                   RECEIPT
                ================================================== */

                {

                    data: 'receipt',

                    name: 'receipt',

                    orderable: false,

                    searchable: false

                }

            ]

        });



        /* =========================================================
           SEARCH
        ========================================================== */

        $('#sheetSearch').on(
            'keyup',
            function() {

                table
                    .search($(this).val())
                    .draw();

            }
        );



        /* =========================================================
           PAGE LENGTH
        ========================================================== */

        $('#pageLength').on(
            'change',
            function() {

                let value =
                    $(this).val();


                if (value === 'All') {

                    table
                        .page
                        .len(-1)
                        .draw();

                } else {

                    table
                        .page
                        .len(parseInt(value))
                        .draw();

                }

            }
        );



        /* =========================================================
           RESET
        ========================================================== */

        $('#resetBtn').on(
            'click',
            function() {

                $('#sheetSearch').val('');

                $('#pageLength').val('10');

                table
                    .search('')
                    .page
                    .len(10)
                    .draw();

            }
        );



        /* =========================================================
           EXPORT
        ========================================================== */

        $('#exportBtn').on('click', function() {

            let exportButton = $(this);


            /* -----------------------------------------
               PREVENT MULTIPLE CLICKS
            ------------------------------------------ */

            if (exportButton.prop('disabled')) {

                return;

            }


            /* -----------------------------------------
               DISABLE BUTTON
            ------------------------------------------ */

            exportButton.prop(
                'disabled',
                true
            );


            /* -----------------------------------------
               SHOW PROCESSING
            ------------------------------------------ */

            // exportButton.html(`
            //     <span
            //         class="spinner-border spinner-border-sm me-1"
            //         role="status"
            //         aria-hidden="true">
            //     </span>
            //     // Exporting...
            // `);


            /* -----------------------------------------
               GET SEARCH VALUE
            ------------------------------------------ */

            let searchValue =
                $('#sheetSearch').val();


            /* -----------------------------------------
               GET ALL DATA
            ------------------------------------------ */

            $.ajax({

                url: "{{ route('expenditure_data', $vehicle_id) }}",

                type: "GET",

                data: {

                    start: 0,

                    length: -1,

                    'search[value]': searchValue

                },


                /* -----------------------------------------
                   SUCCESS
                ------------------------------------------ */

                success: function(response) {

                    let data =
                        response.data || [];


                    if (data.length === 0) {

                        alert(
                            'No expenditure data available to export.'
                        );

                        return;

                    }


                    /* -----------------------------------------
                       CSV HEADER
                    ------------------------------------------ */

                    let csv = [];

                    csv.push([
                        'S.No',
                        'Date',
                        'Expenditure',
                        'Description'
                    ].join(','));


                    /* -----------------------------------------
                       CSV DATA
                    ------------------------------------------ */

                    $.each(
                        data,
                        function(index, row) {

                            /* -----------------------------
                               DATE
                            ------------------------------ */

                            let date =
                                row.date || '';


                            if (date) {

                                let parsedDate =
                                    new Date(date);


                                if (
                                    !isNaN(
                                        parsedDate.getTime()
                                    )
                                ) {

                                    let day =
                                        String(
                                            parsedDate.getDate()
                                        ).padStart(2, '0');


                                    let month =
                                        String(
                                            parsedDate.getMonth() + 1
                                        ).padStart(2, '0');


                                    let year =
                                        parsedDate.getFullYear();


                                    date =
                                        day +
                                        '-' +
                                        month +
                                        '-' +
                                        year;

                                }

                            }


                            /* -----------------------------
                               EXPENDITURE
                            ------------------------------ */

                            let expenditure =
                                row.expenditure ?? '0';


                            let cleanAmount =
                                String(expenditure)
                                .replace(/₹/g, '')
                                .replace(/,/g, '')
                                .trim();


                            let amount =
                                parseFloat(cleanAmount);


                            if (isNaN(amount)) {

                                amount = 0;

                            }


                            let formattedAmount =
                                '₹' +
                                amount.toLocaleString(
                                    'en-IN',
                                    {
                                        minimumFractionDigits: 2,
                                        maximumFractionDigits: 2
                                    }
                                );


                            /* -----------------------------
                               DESCRIPTION
                            ------------------------------ */

                            let description =
                                row.description ?? '';


                            /* -----------------------------
                               CSV ESCAPE
                            ------------------------------ */

                            function escapeCsv(value) {

                                value =
                                    String(value);

                                value =
                                    value.replace(
                                        /"/g,
                                        '""'
                                    );

                                return `"${value}"`;

                            }


                            /* -----------------------------
                               ADD ROW
                            ------------------------------ */

                            csv.push([
                                index + 1,
                                escapeCsv(date),
                                escapeCsv(formattedAmount),
                                escapeCsv(description)
                            ].join(','));

                        }
                    );


                    /* -----------------------------------------
                       CREATE CSV
                    ------------------------------------------ */

                    let csvContent =
                        '\uFEFF' +
                        csv.join('\n');


                    let blob =
                        new Blob(
                            [csvContent],
                            {
                                type:
                                    'text/csv;charset=utf-8;'
                            }
                        );


                    /* -----------------------------------------
                       DOWNLOAD
                    ------------------------------------------ */

                    let url =
                        URL.createObjectURL(blob);


                    let link =
                        document.createElement('a');


                    link.href = url;


                    link.download =
                        'expenditure_' +
                        new Date()
                        .toISOString()
                        .slice(0, 10) +
                        '.csv';


                    document.body.appendChild(link);


                    link.click();


                    document.body.removeChild(link);


                    URL.revokeObjectURL(url);

                },


                /* -----------------------------------------
                   ERROR
                ------------------------------------------ */

                error: function(xhr) {

                    console.log(
                        'Export Error:',
                        xhr.responseText
                    );


                    alert(
                        'Unable to export expenditure data.'
                    );

                },


                /* -----------------------------------------
                   COMPLETE
                ------------------------------------------ */

                complete: function() {

                    exportButton.prop(
                        'disabled',
                        false
                    );


                    exportButton.html(`
                        Export
                    `);

                }

            });

        });



        /* =========================================================
           VIEW DESCRIPTION
        ========================================================== */

        $(document).on(
            'click',
            '.view-description',
            function() {

                let encodedDescription =
                    $(this).attr(
                        'data-description'
                    );


                let fullText =
                    decodeURIComponent(
                        encodedDescription
                    );


                $('#descriptionText')
                    .text(fullText);


                let modalElement =
                    document.getElementById(
                        'descriptionModal'
                    );


                let modal =
                    bootstrap.Modal
                    .getOrCreateInstance(
                        modalElement
                    );


                modal.show();

            }
        );



        /* =========================================================
           VIEW RECEIPT
        ========================================================== */

        $(document).on(
            'click',
            '.view-receipt-btn',
            function() {

                let fileUrl =
                    $(this).data('url');


                let isPdf =
                    $(this).data('is-pdf');


                let container =
                    $('#receiptModalBody');


                /* -----------------------------------------
                   DOWNLOAD LINK
                ------------------------------------------ */

                $('#downloadReceiptBtn')
                    .attr(
                        'href',
                        fileUrl
                    );


                /* -----------------------------------------
                   PDF
                ------------------------------------------ */

                if (
                    parseInt(isPdf) === 1
                ) {

                    container.html(`

                        <iframe
                            src="${fileUrl}"
                            style="
                                width:100%;
                                height:500px;
                                border:none;
                                border-radius:8px;
                            ">
                        </iframe>

                    `);

                }


                /* -----------------------------------------
                   IMAGE
                ------------------------------------------ */

                else {

                    container.html(`

                        <img
                            src="${fileUrl}"
                            class="img-fluid rounded shadow-sm"
                            style="
                                max-height:500px;
                                object-fit:contain;
                            "
                            alt="Receipt Image">

                    `);

                }

            }
        );



        /* =========================================================
           PREVENT MULTIPLE EXPENDITURE SUBMISSIONS
        ========================================================== */

        let expenditureSubmitting = false;

        $(document).on(
            'click',
            '#saveExpenditureBtn',
            function(e) {

                let button = $(this);


                /* -----------------------------------------
                   PREVENT MULTIPLE CLICKS
                ------------------------------------------ */

                if (expenditureSubmitting) {

                    e.preventDefault();

                    return false;

                }


                /* -----------------------------------------
                   LOCK IMMEDIATELY
                ------------------------------------------ */

                expenditureSubmitting = true;


                /* -----------------------------------------
                   DISABLE BUTTON
                ------------------------------------------ */

                button.prop(
                    'disabled',
                    true
                );


                /* -----------------------------------------
                   SHOW PROCESSING
                ------------------------------------------ */

                button.html(`
                    <span
                        class="spinner-border spinner-border-sm me-1"
                        role="status"
                        aria-hidden="true">
                    </span>
                    Processing...
                `);


                /*
                 * IMPORTANT:
                 * Do NOT preventDefault here.
                 *
                 * Existing form submit will continue normally.
                 */

            }
        );


    });
</script>
@endsection