@extends('layouts.customer')

@section('content')
    <!-- <main class="default-transition" style="opacity: 1;"> -->
        <div class="container-fluid disable-text-selection">
            <div class="row">
                <div class="col-12">
                    <div class="mb-2">
                        <h1>POS Start Log</h1>
                        <div class="top-right-button-container">
                            <div class="btn-group mb-1 float-right">
                                <button id="date-filter-btn" class="btn btn-secondary btn-sm dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">All Time</button>
                                <div class="dropdown-menu" x-placement="bottom-start" style="position: absolute; will-change: transform; cursor: pointer; top: 0px; left: 0px; transform: translate3d(0px, 38px, 0px);">
                                    <a class="dropdown-item date-filter-item current" data-filter="">All Time</a>
                                    <a class="dropdown-item date-filter-item" data-filter="today">Today</a>
                                    <!-- <a class="dropdown-item date-filter-item" data-filter="yesterday">Yesterday</a> -->
                                    <a class="dropdown-item date-filter-item" data-filter="this_week">This Week</a>
                                    <a class="dropdown-item date-filter-item" data-filter="last_week">Last Week</a>
                                    <a class="dropdown-item date-filter-item" data-filter="this_month">This Month</a>
                                    <a class="dropdown-item date-filter-item" data-filter="last_month">Last Month</a>
                                    <a class="dropdown-item date-filter-item" data-filter="custom">Custom</a>
                                </div>
                                <select id="preset-range" class="d-none">
                                    <option value="">All</option>
                                    <option value="today">Today</option>
                                    <option value="this_week">This Week</option>
                                    <option value="last_week">Last Week</option>
                                    <option value="this_month">This Month</option>
                                    <option value="last_month">Last Month</option>
                                    <option value="custom">Custom</option>
                                </select>
                                <div id="date-filter-form" class="form-inline d-none">
                                    <div class="d-flex mx-2">
                                        <div class="form-group">
                                            <label>From</label>
                                            <input type="text" id="from-date" name="from" class="form-control" placeholder="From" style="display:none;" required="">
                                        </div>
                                        <div class="form-group">
                                            <label>To</label>
                                            <input type="text" id="to-date" name="to" class="form-control" placeholder="To" style="display:none;" required="">
                                        </div>
                                    </div>
                                    <button class="btn btn-info" id="apply-filters">Submit</button>
                                    <!-- <button class="btn btn-primary" id="reset-filters">Reset Filters</button> -->
                                </div>
                            </div>
                        </div>
                        <nav class="breadcrumb-container d-none d-sm-block d-lg-inline-block" aria-label="breadcrumb">
                            <ol class="breadcrumb pt-0">
                                <li class="breadcrumb-item">
                                    <a href="{{url('/')}}/dashboard">Dashboard</a>
                                </li>
                                <li class="breadcrumb-item active" aria-current="page">POS Start Log</li>
                            </ol>
                        </nav>
                    </div>
                </div>
            </div>

            <div class="row mb-2">
                @if ($message = Session::get('success'))
                    <div class="w-100 alert alert-success">
                        <p>{{ $message }}</p>
                    </div>
                @endif
            </div>

            <div class="row">
                <div class="col-12">
                    <div class="card">
                        <div class="card-body">
                            <table id="poslogTable" class="data-table data-table-no-pagination responsive nowrap" data-order="[[ 0, &quot;desc&quot; ]]"> 
                                <thead>
                                    <tr>
                                        <th scope="col">Date</th>
                                        <th scope="col">Added By</th>
                                        <th scope="col">Device Name</th>
                                        <th scope="col">Remarks</th>
                                        <th scope="col">Weather</th>
                                        <th scope="col">Total Amount</th>
                                        <th scope="col">Action</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    <!-- </main> -->
@endsection

@section('script')
    <script type="text/javascript">   
        ;(function($){        
            /*$(document).ready(function() {
                if ($().DataTable) {
                    $(".data-table-no-pagination").DataTable({
                        bLengthChange: false,
                        searching: true,
                        paging: false,
                        destroy: true,
                        info: false,
                        sDom: '<"row view-filter"<"col-sm-12"<"float-left"l><"float-right"f><"clearfix">>>t<"row view-pager"<"col-sm-12"<"text-center"ip>>>',
                    });
                }
            });*/

            // Datatables
            let table;
            let fromDate = '';
            let toDate = '';

            function loadDataTable() {
                if ($().DataTable) {
                    table = $(".data-table-no-pagination").DataTable({
                        processing: true,
                        serverSide: true,
                        destroy: true,
                        
                        ajax: {
                            url: "{{ route('pos.start.log.ajax', compact('account')) }}",
                            data: function (d) {
                                d.from = fromDate;
                                d.to = toDate;
                            }
                        },
                        responsive: false,
                        pageLength: 10,
                        lengthMenu: [5, 10, 25, 50],
                        columns: [
                            { data: 'date' },
                            { data: 'added_by' },
                            { data: 'device_name' },
                            { data: 'remarks' },
                            { data: 'weather' },
                            { data: 'total_amount' },
                            { data: 'action' }
                        ],
                        sDom: '<"row view-filter"<"col-sm-12"<"float-left"l><"float-right"f><"clearfix">>>t<"row view-pager"<"col-sm-12"<"text-center"ip>>>',
                    });
                }
            }

            $(document).ready(function () {
                loadDataTable();

                $('#preset-range').change(function () {
                    const value = $(this).val();
                    const today = moment();
                    let start = null, end = null;

                    switch (value) {
                        case 'today':
                            start = end = today;
                            break;
                        case 'this_week':
                            start = moment().startOf('week');
                            end = moment().endOf('week');
                            break;
                        case 'last_week':
                            start = moment().subtract(1, 'weeks').startOf('week');
                            end = moment().subtract(1, 'weeks').endOf('week');
                            break;
                        case 'this_month':
                            start = moment().startOf('month');
                            end = moment().endOf('month');
                            break;
                        case 'last_month':
                            start = moment().subtract(1, 'months').startOf('month');
                            end = moment().subtract(1, 'months').endOf('month');
                            break;
                        case 'custom':
                            $('#from-date, #to-date').show();
                            $('#date-filter-form').addClass('d-inline-flex');
                            return;
                        default:
                            fromDate = toDate = '';
                            $('#from-date, #to-date').hide();
                            $('#date-filter-form').removeClass('d-inline-flex');
                            table.ajax.reload();
                            break;
                    }

                    if (start && end) {
                        fromDate = start.format('YYYY-MM-DD');
                        toDate = end.format('YYYY-MM-DD');
                        $('#from-date, #to-date').hide();
                        $('#date-filter-form').removeClass('d-inline-flex');
                        table.ajax.reload();
                    }

                    // if (value !== 'custom') {
                    //     fromDate = start.format('YYYY-MM-DD');
                    //     toDate = end.format('YYYY-MM-DD');
                    //     $('#from-date, #to-date').hide();
                    //     table.ajax.reload();
                    // }
                });

                $('#from-date').datepicker({
                    dateFormat: 'yy-mm-dd',
                    changeMonth: true,
                    changeYear: true,
                    onClose: function(selectedDate) {
                        $('#to-date').datepicker('option', 'minDate', selectedDate);
                    },
                    onSelect: function () {
                        fromDate = $('#from-date').val();
                        toDate = $('#to-date').val();
                        // table.ajax.reload();
                    }
                });

                $('#to-date').datepicker({
                    dateFormat: 'yy-mm-dd',
                    changeMonth: true,
                    changeYear: true,
                    onClose: function(selectedDate) {
                        $('#from-date').datepicker('option', 'maxDate', selectedDate);
                    },
                    onSelect: function () {
                        fromDate = $('#from-date').val();
                        toDate = $('#to-date').val();
                        // table.ajax.reload();
                    }
                });

                $('#apply-filters').click(function () {
                    table.ajax.reload();
                });

                $('#reset-filters').click(function () {
                    $('#preset-range').val('');
                    $('#from-date, #to-date').val('').hide();
                    $('#date-filter-form').removeClass('d-inline-flex');
                    fromDate = toDate = '';
                    table.ajax.reload();
                });
            });

            $(document).ready(function () {
                // Click event on custom dropdown items
                $('.date-filter-item').on('click', function (e) {
                    e.preventDefault();

                    var selectedFilter = $(this).data('filter');
                    var selectedText = $(this).text();

                    // Update the button text
                    $('#date-filter-btn').text(selectedText);

                    // Update the hidden <select>
                    $('#preset-range').val(selectedFilter).trigger('change');

                    // Highlight selected item
                    $('.date-filter-item').removeClass('current');
                    $(this).addClass('current');
                });

                // Optionally, if select changes by other means, update the button
                $('#preset-range').on('change', function () {
                    var selectedText = $('#preset-range option:selected').text();
                    $('#date-filter-btn').text(selectedText);
                    $('.date-filter-item').removeClass('current');
                    $('.date-filter-item[data-filter="' + $(this).val() + '"]').addClass('current');
                });
            });

        })(jQuery);
    </script>
@endsection