@extends('layouts.app')

@section('title', 'Booking Report')

@section('content')

    @php
        $bookingColumns = [
            'booking_id' => 'Booking ID',

            'member_id' => 'Member ID',

            'member_name' => 'Member Name',

            'member_phone' => 'Member Phone',

            'member_email' => 'Member Email',

            'event_name' => 'Event',

            'booking_date' => 'Booking Date',

            'details' => 'Details',

            'total_amount' => 'Total Amount',

            'reg_point' => 'Registration Point',

            'payment_status' => 'Payment Status',

            'account_type' => 'Account Type',

            'account_num' => 'Account Number',

            'bank_tran_id' => 'Bank Transaction ID',

            'created_by' => 'Created By',

            'created_date' => 'Created Date',

            'updated_by' => 'Updated By',

            'updated_date' => 'Updated Date',

            'status' => 'Status',

        ];


        $defaultColumns = [

            'booking_id',

            'member_id',

            'member_name',

            'event_name',

            'booking_date',

            'details',

            'total_amount',

            'payment_status',

        ];

    @endphp


        <!-- ============================================================= -->
    <!-- Metrics -->
    <!-- ============================================================= -->

    <div class="grid grid-cols-1 md:grid-cols-4 gap-4 mb-6">


        <div class="bg-white p-4 rounded-lg shadow-sm
                border border-gray-100">

            <p class="text-xs font-medium text-gray-500
                  uppercase tracking-wider">

                Total Bookings

            </p>

            <p id="totalBookingsCard"
               class="text-2xl font-semibold
                  text-gray-900 mt-1">

                0

            </p>

        </div>


        <div class="bg-white p-4 rounded-lg shadow-sm
                border border-gray-100">

            <p class="text-xs font-medium text-gray-500
                  uppercase tracking-wider">

                Paid

            </p>

            <p id="paidBookingsCard"
               class="text-2xl font-semibold
                  text-green-600 mt-1">

                0

            </p>

        </div>


        <div class="bg-white p-4 rounded-lg shadow-sm
                border border-gray-100">

            <p class="text-xs font-medium text-gray-500
                  uppercase tracking-wider">

                Pending

            </p>

            <p id="pendingBookingsCard"
               class="text-2xl font-semibold
                  text-yellow-600 mt-1">

                0

            </p>

        </div>


        <div class="bg-white p-4 rounded-lg shadow-sm
                border border-gray-100">

            <p class="text-xs font-medium text-gray-500
                  uppercase tracking-wider">

                Total Amount

            </p>

            <p id="totalBookingAmountCard"
               class="text-2xl font-semibold
                  text-indigo-600 mt-1">

                0

            </p>

        </div>

    </div>


    <!-- ============================================================= -->
    <!-- Filters -->
    <!-- ============================================================= -->

    <div class="bg-white p-4 rounded-lg shadow-sm
            border border-gray-100 mb-6">


        <!-- Columns -->

        <div class="border border-gray-200 rounded-lg
                p-4 bg-gray-50 mb-5">

            <div class="flex items-center
                    justify-between mb-4">

                <div>

                    <h3 class="text-sm font-semibold
                           text-gray-800">

                        Report Columns

                    </h3>

                    <p class="text-xs text-gray-500 mt-1">

                        Select the columns you want
                        to display and export.

                    </p>

                </div>


                <div class="flex gap-3">

                    <button type="button"
                            id="selectAllColumns"
                            class="text-xs font-medium
                               text-indigo-600">

                        Select All

                    </button>


                    <button type="button"
                            id="clearAllColumns"
                            class="text-xs font-medium
                               text-red-600">

                        Clear All

                    </button>

                </div>

            </div>


            <div class="grid grid-cols-2 sm:grid-cols-3
                    md:grid-cols-4 lg:grid-cols-5
                    gap-3">


                @foreach($bookingColumns as $key => $label)

                    <label class="flex items-center gap-2
                              text-xs text-gray-700">

                        <input type="checkbox"
                               class="report-column
                                  rounded border-gray-300
                                  text-indigo-600
                                  focus:ring-indigo-500"
                               value="{{ $key }}"
                            @checked(
                                in_array(
                                    $key,
                                    $defaultColumns
                                )
                            )>

                        {{ $label }}

                    </label>

                @endforeach

            </div>

        </div>


        <!-- Filters -->

        <div class="grid grid-cols-1 sm:grid-cols-2
                lg:grid-cols-4 xl:grid-cols-5 gap-3">


            <div>

                <label class="block text-xs font-medium
                          text-gray-600 mb-1">

                    Booking ID

                </label>

                <input type="text"
                       id="filterBookingId"
                       placeholder="Booking ID..."
                       class="w-full px-3 py-2 text-sm
                          border border-gray-300
                          rounded-md">

            </div>


            <div>

                <label class="block text-xs font-medium
                          text-gray-600 mb-1">

                    Member ID

                </label>

                <input type="text"
                       id="filterMemberId"
                       placeholder="Member ID..."
                       class="w-full px-3 py-2 text-sm
                          border border-gray-300
                          rounded-md">

            </div>


            <div>

                <label class="block text-xs font-medium
                          text-gray-600 mb-1">

                    Member Name

                </label>

                <input type="text"
                       id="filterMemberName"
                       placeholder="Member name..."
                       class="w-full px-3 py-2 text-sm
                          border border-gray-300
                          rounded-md">

            </div>


            <div>

                <label class="block text-xs font-medium
                          text-gray-600 mb-1">

                    Event

                </label>

                <input type="text"
                       id="filterEventId"
                       placeholder="Event ID..."
                       class="w-full px-3 py-2 text-sm
                          border border-gray-300
                          rounded-md">

            </div>


            <div>

                <label class="block text-xs font-medium
                          text-gray-600 mb-1">

                    Payment Status

                </label>

                <select id="filterPaymentStatus"
                        class="w-full px-3 py-2 text-sm
                           border border-gray-300
                           rounded-md">

                    <option value="">
                        All
                    </option>

                    <option value="paid">
                        Paid
                    </option>

                    <option value="pending">
                        Pending
                    </option>

                    <option value="failed">
                        Failed
                    </option>

                </select>

            </div>


            <div>

                <label class="block text-xs font-medium
                          text-gray-600 mb-1">

                    Booking Date From

                </label>

                <input type="date"
                       id="filterBookingDateFrom"
                       class="w-full px-3 py-2 text-sm
                          border border-gray-300
                          rounded-md">

            </div>


            <div>

                <label class="block text-xs font-medium
                          text-gray-600 mb-1">

                    Booking Date To

                </label>

                <input type="date"
                       id="filterBookingDateTo"
                       class="w-full px-3 py-2 text-sm
                          border border-gray-300
                          rounded-md">

            </div>


            <div>

                <label class="block text-xs font-medium
                          text-gray-600 mb-1">

                    Account Type

                </label>

                <input type="text"
                       id="filterAccountType"
                       placeholder="Account type..."
                       class="w-full px-3 py-2 text-sm
                          border border-gray-300
                          rounded-md">

            </div>


            <div>

                <label class="block text-xs font-medium
                          text-gray-600 mb-1">

                    Bank Transaction ID

                </label>

                <input type="text"
                       id="filterBankTranId"
                       placeholder="Bank transaction..."
                       class="w-full px-3 py-2 text-sm
                          border border-gray-300
                          rounded-md">

            </div>


            <div>

                <label class="block text-xs font-medium
                          text-gray-600 mb-1">

                    Status

                </label>

                <select id="filterStatus"
                        class="w-full px-3 py-2 text-sm
                           border border-gray-300
                           rounded-md">

                    <option value="">
                        All
                    </option>

                    <option value="active">
                        Active
                    </option>

                    <option value="inactive">
                        Inactive
                    </option>

                </select>

            </div>


            <div>

                <label class="block text-xs font-medium
                          text-gray-600 mb-1">

                    Per Page

                </label>

                <select id="perPage"
                        class="w-full px-3 py-2 text-sm
                           border border-gray-300
                           rounded-md">

                    <option value="10">
                        10
                    </option>

                    <option value="25" selected>
                        25
                    </option>

                    <option value="50">
                        50
                    </option>

                    <option value="100">
                        100
                    </option>

                </select>

            </div>

        </div>


        <!-- Actions -->

        <div class="flex flex-wrap
                justify-between gap-3 mt-5">


            <div class="flex gap-2">

                <button type="button"
                        id="btnFilter"
                        class="px-4 py-2
                           bg-indigo-600
                           text-white text-sm
                           rounded-md">

                    Filter Report

                </button>


                <button type="button"
                        id="btnReset"
                        class="px-4 py-2
                           bg-gray-100
                           text-gray-700
                           text-sm rounded-md">

                    Reset

                </button>

            </div>


            <div class="flex gap-2">

                <button type="button"
                        id="btnExportCsv"
                        class="px-3 py-2
                           bg-gray-700
                           text-white text-sm
                           rounded-md">

                    CSV

                </button>


                <button type="button"
                        id="btnExportExcel"
                        class="px-3 py-2
                           bg-green-600
                           text-white text-sm
                           rounded-md">

                    Excel

                </button>


                <button type="button"
                        id="btnExportPdf"
                        class="px-3 py-2
                           bg-red-600
                           text-white text-sm
                           rounded-md">

                    PDF

                </button>

            </div>

        </div>

    </div>


    <!-- ============================================================= -->
    <!-- Table -->
    <!-- ============================================================= -->

    <div class="bg-white rounded-lg shadow-sm
            border border-gray-100
            overflow-hidden">

        <div class="overflow-x-auto">

            <table class="min-w-full divide-y
                      divide-gray-200 text-sm">

                <thead class="bg-gray-50">

                <tr id="reportTableHead"></tr>

                </thead>


                <tbody id="reportTableBody"
                       class="bg-white divide-y
                          divide-gray-200">

                <tr>

                    <td class="text-center py-10
                               text-gray-500">

                        Loading booking report...

                    </td>

                </tr>

                </tbody>

            </table>

        </div>


        <div class="px-4 py-3 bg-gray-50
                border-t border-gray-200
                flex flex-col sm:flex-row
                items-center justify-between
                gap-3">

            <p id="paginationInfo"
               class="text-xs text-gray-600">

                Showing 0 to 0 of 0 entries

            </p>


            <div id="pagination"
                 class="flex items-center space-x-1">

            </div>

        </div>

    </div>

@endsection


@push('scripts')

    <script>

        let currentPage = 1;


        /*
        |--------------------------------------------------------------------------
        | Column Labels
        |--------------------------------------------------------------------------
        */

        const columnLabels =
            @json($bookingColumns);


        /*
        |--------------------------------------------------------------------------
        | Selected Columns
        |--------------------------------------------------------------------------
        */

        function getSelectedColumns()
        {
            return $('.report-column:checked')
                .map(function () {

                    return $(this).val();

                })
                .get();
        }


        /*
        |--------------------------------------------------------------------------
        | Header
        |--------------------------------------------------------------------------
        */

        function renderTableHeader()
        {
            let html = '';


            getSelectedColumns()
                .forEach(function(column) {

                    html += `

                <th class="px-4 py-3 text-left
                           text-xs font-semibold
                           text-gray-500 uppercase
                           whitespace-nowrap">

                    ${escapeHtml(
                        columnLabels[column] ?? column
                    )}

                </th>

            `;

                });


            $('#reportTableHead')
                .html(html);
        }


        /*
        |--------------------------------------------------------------------------
        | Details
        |--------------------------------------------------------------------------
        */

        function formatDetails(details)
        {
            if (
                !details ||
                !details.length
            ) {

                return '-';

            }


            return details
                .map(function(detail) {

                    return Object.entries(detail)

                        .filter(function([key]) {

                            return ![
                                'booking_detail_id',
                                'booking_id',
                                'created_at',
                                'updated_at'
                            ].includes(key);

                        })

                        .map(function([key, value]) {

                            return (

                                key
                                    .replaceAll('_', ' ')
                                    .replace(/\b\w/g, c =>
                                        c.toUpperCase()
                                    )

                                + ': ' +

                                (value ?? '-')

                            );

                        })

                        .join(' | ');

                })

                .join('<br>');
        }


        /*
        |--------------------------------------------------------------------------
        | Value
        |--------------------------------------------------------------------------
        */

        function getBookingValue(
            booking,
            column
        ) {

            switch (column) {

                case 'member_name':

                    return booking.member
                        ? booking.member.full_name
                        : '-';


                case 'member_phone':

                    return booking.member
                        ? booking.member.mobile_no
                        : '-';


                case 'member_email':

                    return booking.member
                        ? booking.member.email
                        : '-';


                case 'event_name':

                    return booking.event
                        ? booking.event.name
                        : '-';


                case 'details':

                    return formatDetails(
                        booking.booking_details
                    );


                default:

                    return booking[column] ?? '-';

            }
        }


        /*
        |--------------------------------------------------------------------------
        | Row
        |--------------------------------------------------------------------------
        */

        function renderBookingRow(booking)
        {
            let html =
                '<tr class="hover:bg-gray-50">';


            getSelectedColumns()
                .forEach(function(column) {

                    let value =
                        getBookingValue(
                            booking,
                            column
                        );


                    if (column === 'total_amount') {

                        value =
                            Number(value || 0)
                                .toLocaleString(
                                    undefined,
                                    {
                                        minimumFractionDigits: 2,
                                        maximumFractionDigits: 2
                                    }
                                );

                    }


                    if (
                        column === 'payment_status' ||
                        column === 'status'
                    ) {

                        let badgeClass =
                            'bg-gray-100 text-gray-700';


                        if (value === 'paid') {

                            badgeClass =
                                'bg-green-100 text-green-800';

                        }
                        else if (value === 'pending') {

                            badgeClass =
                                'bg-yellow-100 text-yellow-800';

                        }
                        else if (value === 'failed') {

                            badgeClass =
                                'bg-red-100 text-red-800';

                        }
                        else if (value === 'active') {

                            badgeClass =
                                'bg-green-100 text-green-800';

                        }
                        else if (value === 'inactive') {

                            badgeClass =
                                'bg-red-100 text-red-800';

                        }


                        value = `

                    <span class="inline-flex
                                 px-2 py-0.5
                                 rounded-full
                                 text-xs font-semibold
                                 ${badgeClass}">

                        ${escapeHtml(value)}

                    </span>

                `;

                    }


                    /*
                    |--------------------------------------------------------------------------
                    | Details are already HTML
                    |--------------------------------------------------------------------------
                    */

                    if (column === 'details') {

                        html += `

                    <td class="px-4 py-3 text-xs
                               text-gray-600
                               min-w-[350px]">

                        ${value}

                    </td>

                `;

                    } else {

                        html += `

                    <td class="px-4 py-3 text-xs
                               text-gray-600
                               whitespace-nowrap">

                        ${
                            (
                                column === 'payment_status' ||
                                column === 'status'
                            )
                                ? value
                                : escapeHtml(value)
                        }

                    </td>

                `;

                    }

                });


            html += '</tr>';


            return html;
        }


        /*
        |--------------------------------------------------------------------------
        | Filters
        |--------------------------------------------------------------------------
        */

        function getFilters(page = 1)
        {
            return {

                page: page,

                perPage:
                    $('#perPage').val(),

                booking_id:
                    $('#filterBookingId').val(),

                member_id:
                    $('#filterMemberId').val(),

                member_name:
                    $('#filterMemberName').val(),

                event_id:
                    $('#filterEventId').val(),

                payment_status:
                    $('#filterPaymentStatus').val(),

                booking_date_from:
                    $('#filterBookingDateFrom').val(),

                booking_date_to:
                    $('#filterBookingDateTo').val(),

                account_type:
                    $('#filterAccountType').val(),

                bank_tran_id:
                    $('#filterBankTranId').val(),

                status:
                    $('#filterStatus').val()

            };
        }


        /*
        |--------------------------------------------------------------------------
        | Load
        |--------------------------------------------------------------------------
        */

        function loadReport(page = 1)
        {
            currentPage = page;


            renderTableHeader();


            $.ajax({

                url:
                    "{{ route('booking.report.data') }}",

                type: 'GET',

                data: {
                    ...getFilters(page),

                    columns:
                        getSelectedColumns()
                },


                beforeSend: function() {

                    $('#reportTableBody')
                        .html(`

                    <tr>

                        <td colspan="${
                            getSelectedColumns().length || 1
                        }"
                        class="text-center py-10
                               text-gray-500">

                            Loading booking report...

                        </td>

                    </tr>

                `);

                },


                success: function(res) {

                    /*
                    |--------------------------------------------------------------------------
                    | Metrics
                    |--------------------------------------------------------------------------
                    */

                    $('#totalBookingsCard')
                        .text(
                            res.metrics.total ?? 0
                        );


                    $('#paidBookingsCard')
                        .text(
                            res.metrics.paid ?? 0
                        );


                    $('#pendingBookingsCard')
                        .text(
                            res.metrics.pending ?? 0
                        );


                    $('#totalBookingAmountCard')
                        .text(
                            Number(
                                res.metrics.total_amount ?? 0
                            ).toLocaleString(
                                undefined,
                                {
                                    minimumFractionDigits: 2,
                                    maximumFractionDigits: 2
                                }
                            )
                        );


                    /*
                    |--------------------------------------------------------------------------
                    | Table
                    |--------------------------------------------------------------------------
                    */

                    let html = '';


                    if (
                        !res.bookings.data ||
                        res.bookings.data.length === 0
                    ) {

                        html = `

                    <tr>

                        <td colspan="${
                            getSelectedColumns().length || 1
                        }"
                        class="text-center py-10
                               text-gray-500">

                            No booking records found.

                        </td>

                    </tr>

                `;

                    }
                    else {

                        res.bookings.data
                            .forEach(function(booking) {

                                html +=
                                    renderBookingRow(
                                        booking
                                    );

                            });

                    }


                    $('#reportTableBody')
                        .html(html);


                    /*
                    |--------------------------------------------------------------------------
                    | Pagination
                    |--------------------------------------------------------------------------
                    */

                    $('#paginationInfo')
                        .text(

                            `Showing ${
                                res.bookings.from ?? 0
                            } to ${
                                res.bookings.to ?? 0
                            } of ${
                                res.bookings.total ?? 0
                            } entries`

                        );


                    renderPagination(
                        res.bookings
                    );

                },


                error: function(xhr) {

                    console.error(xhr);


                    $('#reportTableBody')
                        .html(`

                    <tr>

                        <td colspan="${
                            getSelectedColumns().length || 1
                        }"
                        class="text-center py-10
                               text-red-500">

                            Failed to load booking report.

                        </td>

                    </tr>

                `);

                }

            });
        }


        /*
        |--------------------------------------------------------------------------
        | Pagination
        |--------------------------------------------------------------------------
        */

        function renderPagination(data)
        {
            let html = '';


            if (data.last_page <= 1) {

                $('#pagination')
                    .html('');

                return;

            }


            html += `

        <button
            onclick="loadReport(
                ${data.current_page - 1}
            )"
            ${
                data.current_page === 1
                    ? 'disabled'
                    : ''
            }
            class="px-3 py-1 border
                   rounded-md text-xs">

            &laquo;

        </button>

    `;


            let start =
                Math.max(
                    1,
                    data.current_page - 2
                );


            let end =
                Math.min(
                    data.last_page,
                    start + 4
                );


            for (
                let i = start;
                i <= end;
                i++
            ) {

                html += `

            <button
                onclick="loadReport(${i})"
                class="px-3 py-1 border
                       rounded-md text-xs
                       ${
                    i === data.current_page
                        ? 'bg-indigo-600 text-white'
                        : 'hover:bg-gray-100'
                }">

                ${i}

            </button>

        `;

            }


            html += `

        <button
            onclick="loadReport(
                ${data.current_page + 1}
            )"
            ${
                data.current_page === data.last_page
                    ? 'disabled'
                    : ''
            }
            class="px-3 py-1 border
                   rounded-md text-xs">

            &raquo;

        </button>

    `;


            $('#pagination')
                .html(html);
        }


        /*
        |--------------------------------------------------------------------------
        | Escape
        |--------------------------------------------------------------------------
        */

        function escapeHtml(value)
        {
            if (
                value === null ||
                value === undefined
            ) {

                return '-';

            }


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


        /*
        |--------------------------------------------------------------------------
        | Export
        |--------------------------------------------------------------------------
        */

        function exportReport(type)
        {
            const filters =
                getFilters();


            const params =
                new URLSearchParams();


            Object.keys(filters)
                .forEach(function(key) {

                    if (
                        key === 'page' ||
                        key === 'perPage'
                    ) {

                        return;

                    }


                    if (
                        filters[key] !== null &&
                        filters[key] !== undefined &&
                        filters[key] !== ''
                    ) {

                        params.append(
                            key,
                            filters[key]
                        );

                    }

                });


            /*
            |--------------------------------------------------------------------------
            | Selected columns
            |--------------------------------------------------------------------------
            */

            getSelectedColumns()
                .forEach(function(column) {

                    params.append(
                        'columns[]',
                        column
                    );

                });


            let url;


            if (type === 'csv') {

                url =
                    "{{ route('booking.report.csv') }}";

            }
            else if (type === 'excel') {

                url =
                    "{{ route('booking.report.excel') }}";

            }
            else {

                url =
                    "{{ route('booking.report.pdf') }}";

            }


            window.location.href =
                url + '?' + params.toString();
        }


        /*
        |--------------------------------------------------------------------------
        | Select All
        |--------------------------------------------------------------------------
        */

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

                $('.report-column')
                    .prop('checked', true);

                loadReport(1);

            });


        /*
        |--------------------------------------------------------------------------
        | Clear
        |--------------------------------------------------------------------------
        */

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

                $('.report-column')
                    .prop('checked', false);


                $('.report-column[value="booking_id"]')
                    .prop('checked', true);


                loadReport(1);

            });


        /*
        |--------------------------------------------------------------------------
        | Column change
        |--------------------------------------------------------------------------
        */

        $(document).on(
            'change',
            '.report-column',
            function() {

                if (
                    $('.report-column:checked').length === 0
                ) {

                    $(this).prop(
                        'checked',
                        true
                    );

                    return;

                }


                loadReport(1);

            }
        );


        /*
        |--------------------------------------------------------------------------
        | Ready
        |--------------------------------------------------------------------------
        */

        $(document).ready(function() {

            loadReport(1);


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

                    loadReport(1);

                });


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

                    loadReport(1);

                });


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

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

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

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

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

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

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

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

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

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

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

                    $('#perPage').val('25');


                    $('.report-column')
                        .prop('checked', false);


                    @foreach($defaultColumns as $column)

                    $(
                        '.report-column[value="{{ $column }}"]'
                    ).prop(
                        'checked',
                        true
                    );

                    @endforeach


                    loadReport(1);

                });


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

                    exportReport('csv');

                });


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

                    exportReport('excel');

                });


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

                    exportReport('pdf');

                });

        });

    </script>

@endpush