@extends('layouts.order-master')
@section('title')
    Dashboard
@endsection
@section('css')
    <link href="https://cdn.datatables.net/1.11.5/css/dataTables.bootstrap5.min.css" rel="stylesheet" type="text/css" />
    <!--datatable responsive css-->
    <link href="https://cdn.datatables.net/responsive/2.2.9/css/responsive.bootstrap.min.css" rel="stylesheet"
        type="text/css" />
    <link href="https://cdn.datatables.net/buttons/2.4.1/css/buttons.dataTables.min.css" rel="stylesheet" type="text/css" />
    <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" type="text/css" />

    <style>
        #list-syncs li {
            list-style: none;
            padding: 10px;
            border-bottom: 1px solid #f1f1f1;
        }

        .ordr-dshbrd-btm {
            margin-bottom: 20px
        }

        div.dataTables_wrapper div.dataTables_filter input {
            margin-left: 0;
            display: flex;
            width: 100%;
        }

        .select2-container .select2-search--inline .select2-search__field {
            margin-top: 9px !important;
        }

        .select2-container--default .select2-selection--multiple .select2-selection__choice__display {
            text-wrap: auto ! important;
        }

        .select2-selection.select2-selection--multiple {
            display: flex !important;
        }

        .card-body .col-md-4 {
            padding: 0 5px !important;
        }


        .dt-buttons button {
            border-radius: 5px !important;
        }

        .buttons-html5,
        .buttons-print {
            background: #405189 !important;
            color: white !important;
            margin: 5px !important;
            height: 31px !important;
            width: 70px !important;
            border-radius: 5px !important;
        }

        @media screen and (max-width: 767px) {
            div.dataTables_wrapper div.dataTables_filter {
                text-align: start !important;
            }
        }

        @media screen and (max-width: 575px) {
            .card-body h4 {
                font-size: 15px;
            }
        }

        .buttons-html5,
        .buttons-print {
            background: #405189 !important;
            color: white !important;
            margin: 5px !important;
            height: 31px !important;
            width: 70px !important;
            border-radius: 5px !important;
        }
    </style>
@endsection
@section('content')
    @can('view dashboard')
    <div class="modal fade" id="customDateModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header bg-light p-3">
                        <h5 class="modal-title" id="exampleModalLabel">Select Date</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"
                            id="close-modal"></button>
                    </div>
                    <form action="" id="customDateForm" method="POST" class="tablelist-form" autocomplete="off">
                        @csrf
                        <div class="modal-body">
                            <div class="mb-3">
                                <label for="custom_start_date" class="form-label">From Date</label>
                                <input type="date" id="custom_start_date" name="custom_start_date" class="form-control"
                                    required>
                            </div>
                            <div class="mb-3">
                                <label for="custom_end_date" class="form-label">To Date</label>
                                <input type="date" id="custom_end_date" name="custom_end_date" class="form-control" required>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <div class="hstack gap-2 justify-content-end">
                                <button type="button" class="btn btn-light" data-bs-dismiss="modal">Close</button>
                                <button type="submit" class="btn btn-primary">Submit</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col">
                <div class="h-100">
                     <div class="row mb-3 pb-1">
                        <div class="col-12">
                            <div class="d-flex align-items-lg-center flex-lg-row flex-column">
                                {{-- @php
                                    $expirationDate = '2025-08-02';
                                    $daysLeft = $daysLeft = Carbon\Carbon::now()->diffInDays($expirationDate, false);
                                @endphp --}}

                                <div class="flex-grow-1">
                                    {{-- @if(Auth::user()->business_key == '051a909d74a19e42b0bf5c26ec6901300485bafb' || Auth::user()->business_key == '13dcdbaca83c873dcb294b9511ae4da3d226773b')
                                        <h3 class="text-danger text-center"><b>Your Subscription will be expired in {{ $daysLeft }} days</h3>
                                    @endif --}}
                                    <h4 class="fs-16 mb-1">{{ $greeting }}, {{ Auth::user()->name }}!</h4>
                                    <p class="text-muted mb-0">Here's what's happening with your business
                                        today.</p>
                                </div>
                                <div>
                                    <select name="" id="filter" class="form-select day-fltr">
                                        <option value="daily" {{ $dashboard_filter == 'daily' ? 'selected' : '' }}>Today
                                        </option>
                                        <option value="yesterday" {{ $dashboard_filter == 'yesterday' ? 'selected' : '' }}>
                                            Yesterday
                                        </option>
                                        <option value="monthly" {{ $dashboard_filter == 'monthly' ? 'selected' : '' }}>This
                                            Month</option>
                                        <option value="previous_month"
                                            {{ $dashboard_filter == 'previous_month' ? 'selected' : '' }}>Previous
                                            Month</option>
                                        <option value="yearly" {{ $dashboard_filter == 'yearly' ? 'selected' : '' }}>This
                                            Financial Year</option>
                                        <option value="customDate" {{ is_array($dashboard_filter) ? 'selected' : '' }}>
                                            {{ is_array($dashboard_filter) ? implode(' - ', $dashboard_filter) : 'Custom Date' }}
                                        </option>

                                    </select>
                                    @if(Auth::user()->staff == null || Auth::user()->staff->all_ledgers == 1)
                                     {{-- <div class="col-md-2 col-sm-6 mb-2"> --}}
                                        <label for="start date"></label>
                                        <select name="branch" class="form-control" id="branch">
                                            <option value="">All Branches</option>
                                            @foreach ($branches as $branch)
                                                <option value="{{ $branch->id }}" @if(app('request')->input('branch_id') == $branch->id) selected @endif>{{ $branch->name }}</option>
                                            @endforeach
                                        </select>
                                    {{-- </div> --}}
                                    @endif 
                                    @if (Auth::user()->company_profile->manage_ledger_stock == 1)
                                       <div class="col-md-2  col-sm-6 mb-2 mt-2" style="margin-left: 5px; width: 100%;">
                                           <label for="order_type">Order Type (Primary/Secondary)</label>
                                           <select name="order_type" id="order_type" class="form-control w-100">
                                               <option value="">Select Order Type</option>
                                               <option value="primary" @if (app('request')->input('order_type') == 'primary') selected @endif>Primary
                                               </option>
                                               <option value="secondary" @if (app('request')->input('order_type') == 'secondary') selected @endif>
                                                   Secondary</option>
                                           </select>
                                       </div>
                                   @endif
                                </div>
                            </div><!-- end card header -->
                        </div>
                        <!--end col-->
                    </div>
                    <!--end row-->
                    <div class="row">
                        <!-- dashboard init -->
                        <div class="col-xl-3 col-md-6">
                            <!-- card -->
                            <a
                                href="{{ Auth::user()->company_profile->mybuss_fas == 1 ? route('order.index') : route('mop-order.index') }}">
                                <div class="card card-animate">
                                    <div class="card-body">
                                        <div class="d-flex align-items-center">
                                            <div class="flex-grow-1 overflow-hidden">
                                                <p class="text-uppercase fw-medium text-muted text-truncate mb-0">
                                                    Total Orders / Amount</p>
                                            </div>
                                            {{-- <div class="flex-shrink-0">
                                <h5 class="text-success fs-14 mb-0">
                                    <i class="ri-arrow-right-up-line fs-13 align-middle"></i>
                                    +16.24 %
                                </h5>
                            </div> --}}
                                        </div>
                                        <div class="d-flex align-items-end justify-content-between mt-4">
                                            <div>
                                                <h4 class="fs-22 fw-semibold ff-secondary mb-4">
                                                    <span class="counter-value" data-target="">{{ $total_order_count }}</span> /
                                                    <span class="counter-value" data-target="">{{ $total_order_amount }}</span>
                                                </h4>
                                            </div>
                                            <div class="avatar-sm flex-shrink-0">
                                                <span class="avatar-title bg-soft-primary rounded fs-3">
                                                    <i class="las la-shopping-cart text-primary"></i>
                                                </span>
                                            </div>
                                        </div>
                                    </div><!-- end card body -->
                                </div><!-- end card -->
                            </a>
                        </div><!-- end col -->

                        <div class="col-xl-3 col-md-6">
                            <!-- card -->
                            <a href="/admin/collection">
                                <div class="card card-animate">
                                    <div class="card-body">
                                        <div class="d-flex align-items-center">
                                            <div class="flex-grow-1 overflow-hidden">
                                                <p class="text-uppercase fw-medium text-muted text-truncate mb-0">
                                                    Total Collections / Amount</p>
                                            </div>
                                        </div>
                                        <div class="d-flex align-items-end justify-content-between mt-4">
                                            <div>
                                                <h4 class="fs-22 fw-semibold ff-secondary mb-4">
                                                    <span class="counter-value"
                                                        data-target="">{{ $total_collection_count }}</span> /
                                                    <span class="counter-value"
                                                        data-target="">{{ $total_collection_amount }}</span>
                                                </h4>
                                            </div>
                                            <div class="avatar-sm flex-shrink-0">
                                                <span class="avatar-title bg-soft-primary rounded fs-3">
                                                    <i class="las la-shopping-cart text-primary"></i>
                                                </span>
                                            </div>
                                        </div>
                                    </div><!-- end card body -->
                                </div><!-- end card -->
                            </a>
                        </div><!-- end col -->

                        <div class="col-xl-3 col-md-6">
                            <!-- card -->
                            <a
                                href="{{ Auth::user()->company_profile->mybuss_fas == 1 ? route('billed-order.index') : route('mop-billed-order') }}">
                                <div class="card card-animate">
                                    <div class="card-body">
                                        <div class="d-flex align-items-center">
                                            <div class="flex-grow-1 overflow-hidden">
                                                <p class="text-uppercase fw-medium text-muted text-truncate mb-0">
                                                    Total Sales / Amount</p>
                                            </div>
                                        </div>
                                        <div class="d-flex align-items-end justify-content-between mt-4">
                                            <div>
                                                <h4 class="fs-22 fw-semibold ff-secondary mb-4">
                                                    <span class="counter-value" data-target="">{{ $total_sales_count }}</span>
                                                    /
                                                    <span class="counter-value" data-target="">{{ $total_sales_amount }}</span>
                                                </h4>
                                            </div>
                                            <div class="avatar-sm flex-shrink-0">
                                                <span class="avatar-title bg-soft-primary rounded fs-3">
                                                    <i class="las la-shopping-cart text-primary"></i>
                                                </span>
                                            </div>
                                        </div>
                                    </div><!-- end card body -->
                                </div><!-- end card -->
                            </a>
                        </div><!-- end col -->
                        <div class="col-xl-3 col-md-6">
                            <!-- card -->
                            <div class="card card-animate">
                                <div class="card-body">
                                    <div class="d-flex align-items-center">
                                        <div class="flex-grow-1 overflow-hidden">
                                            <p class="text-uppercase fw-medium text-muted text-truncate mb-0">
                                              Total  Cancelled Orders</p>
                                        </div>
                                    </div>
                                    <div class="d-flex align-items-end justify-content-between mt-4">
                                        <div>
                                            <h4 class="fs-22 fw-semibold ff-secondary mb-4">
                                                <span class="counter-value"
                                                    data-target="">{{ $total_orders_cancelled_count }}</span> /
                                                <span class="counter-value"
                                                    data-target="">{{ $total_orders_cancelled_amount }}</span>
                                            </h4>
                                        </div>
                                        <div class="avatar-sm flex-shrink-0">
                                            <span class="avatar-title bg-soft-primary rounded fs-3">
                                                <i class="las la-shopping-cart text-primary"></i>
                                            </span>
                                        </div>
                                    </div>
                                </div><!-- end card body -->
                            </div><!-- end col -->
                        </div>
                    </div> <!-- end .h-100-->

                    <div class="row ordr-dshbrd-btm">
                        {{-- Todays Summary --}}
                        <div class="col-lg-12 col-md-12">
                            <div class="card h-100 ">
                                <div class="card-body">
                                    <div style="display: flex; justify-content: space-between; margin: 15px 0px;">
                                        <h4> Summary</h4>
                                        <span class="text-right text-uppercase font-weight-bold"
                                            style="float: right;padding: 10px;background: #3a497b; color: #fff;">
                                            <span>{{ $pending_order_count }}</span> Pending Orders</span>
                                    </div>
                                    <div class="col-md-12">
                                        <table
                                            class="table table-bordered w-100  dt-responsive nowrap table-striped align-middle dataTable"
                                            id="todaysSummaryTable">
                                            <thead>
                                                <tr>
                                                    <th scope="col">Sale Executive</th>
                                                    <th scope="col">Order</th>
                                                    <th scope="col">Sale</th>
                                                    <th scope="col">Collection</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                            </tbody>
                                            <tfoot>
                                                <th>Total: </th>
                                                <th></th>
                                                <th></th>
                                                <th></th>
                                            </tfoot>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>
                </div> <!-- end col -->
            </div>
        </div>

        </div>
    @endcan
@endsection

@section('script')
    <script src="{{ URL::asset('assets/libs/swiper/swiper.min.js') }}"></script>
    <script src="{{ URL::asset('/assets/js/pages/dashboard-ecommerce.init.js') }}"></script>
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"
        integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
    <script src="https://cdn.datatables.net/1.11.5/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.datatables.net/1.11.5/js/dataTables.bootstrap5.min.js"></script>
    <script src="https://cdn.datatables.net/buttons/2.3.2/js/dataTables.buttons.min.js" type="text/javascript"></script>
    <script src="https://cdn.datatables.net/buttons/2.3.2/js/buttons.html5.min.js" type="text/javascript"></script>
    <script src="https://cdn.datatables.net/buttons/2.3.2/js/buttons.print.min.js" type="text/javascript"></script>
    <script src="https://cdn.datatables.net/buttons/2.4.1/js/buttons.colVis.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js" type="text/javascript"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/pdfmake.min.js" type="text/javascript"></script>
    <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>

    <script>
        $(document).ready(function() {
            $('#branch, #order_type').select2({});
            $('#todaysSummaryTable').DataTable({
                processing: true,
                serverSide: true,
                ordering: false,
                pageLength: 5,
                "scrollX": true,
                autoWidth: true,
                dom: 'lBfrtip',
                buttons: [{
                    extend: 'excelHtml5',
                }, ],
                lengthMenu: [
                    [5, 25, 50],
                    [5, 25, 50]
                ],
                ajax: {
                    url: "{{ route('detailed-order-dashboard') }}",
                    type: 'GET',
                    data: function(d) {
                        d.branch_id = $("#branch").val();
                        @if (Auth::user()->company_profile->manage_ledger_stock == 1)
                            d.order_type = $("#order_type").val();
                        @endif
                        d._token = '{{ csrf_token() }}';
                    },
                },
                columns: [{
                        data: 'sales_exe',
                        name: 'sales_exe'
                    },
                    {
                        data: 'order',
                        name: 'order'
                    },
                    {
                        data: 'sale',
                        name: 'sale'
                    },
                    {
                        data: 'collection',
                        name: 'collection'
                    },
                ],
                "footerCallback": function(row, data, start, end, display) {
                    var api = this.api(),
                        data;

                    // converting to interger to find total
                    var intVal = function(i) {
                        return typeof i === 'string' ?
                            i.replace(/[\$,]/g, '') * 1 :
                            typeof i === 'number' ?
                            i : 0;
                    };
                    var orderCountTotal = 0;
                    var orderAmountTotal = 0;
                    var salesCountTotal = 0;
                    var salesAmountTotal = 0;
                    var collectionCountTotal = 0;
                    var collectionAmountTotal = 0;

                    api.column(1).data().each(function(value) {
                        // Split by slash and trim whitespace
                        var parts = value.split('/');
                        var count = parseFloat(parts[0].trim());
                        var amount = parseFloat(parts[1].trim());

                        if (!isNaN(count)) orderCountTotal += count;
                        if (!isNaN(amount)) orderAmountTotal += amount;
                    });
                    api.column(2).data().each(function(value) {
                        // Split by slash and trim whitespace
                        var parts = value.split('/');
                        var count = parseFloat(parts[0].trim());
                        var amount = parseFloat(parts[1].trim());

                        if (!isNaN(count)) salesCountTotal += count;
                        if (!isNaN(amount)) salesAmountTotal += amount;
                    });
                    api.column(3).data().each(function(value) {
                        // Split by slash and trim whitespace
                        var parts = value.split('/');
                        var count = parseFloat(parts[0].trim());
                        var amount = parseFloat(parts[1].trim());

                        if (!isNaN(count)) collectionCountTotal += count;
                        if (!isNaN(amount)) collectionAmountTotal += amount;
                    });




                    $(api.column(1).footer()).html(orderCountTotal + ' / ' + orderAmountTotal
                        .toFixed());
                    $(api.column(2).footer()).html(salesCountTotal + ' / ' + salesAmountTotal
                        .toFixed());
                    $(api.column(3).footer()).html(collectionCountTotal + ' / ' + collectionAmountTotal
                        .toFixed());
                },
            });

        });

         $('#filter').on('change', function(e) {
            if ($(this).val() == 'customDate') {
                $('#customDateModal').modal('show');
                return;
            }

            var url = ' /admin/update-dashboard-settings';
            $.ajax({
                url: url,
                type: 'POST',
                data: {
                    dashboard_filter: $('#filter').val(),
                    _token: "{{ csrf_token() }}"
                },
                dataType: 'json',
                success: function(data) {
                    if (data.status == 'success') {
                        location.reload();
                    }
                },
                error: function(data) {}
            });
        });

        $('#customDateForm').on('submit', function(e) {
            e.preventDefault();

            var startDate = $('#custom_start_date').val();
            var endDate = $('#custom_end_date').val();

            if (!startDate || !endDate) {
                alert('Please select both start and end dates.');
                return;
            }
            var url = '/admin/update-dashboard-settings';
            $.ajax({
                url: url,
                type: 'POST',
                data: {
                    dashboard_filter: 'customDate',
                    custom_start_date: startDate,
                    custom_end_date: endDate,
                    _token: "{{ csrf_token() }}"
                },
                dataType: 'json',
                success: function(data) {
                    if (data.status == 'success') {
                        $('#customDateModal').modal('hide');
                        location.reload();
                    }
                },
                error: function(data) {}
            });
        });
        $('#customDateModal').on('hidden.bs.modal', function() {
            location.reload();
        });


        $('#branch').on('change', function(e) {
            let branchValue = $(this).val();
            if (branchValue == '') {
                window.location.href = window.location.origin + window.location.pathname;
                return;
            }
            let url = window.location.origin + window.location.pathname;
            let params = new URLSearchParams(window.location.search);
            params.set('branch_id', branchValue);
            window.location.href = url + '?' + params.toString();
        });
        $('#order_type').on('change', function(e) {
            let orderTypeValue = $(this).val();
            if (orderTypeValue == '') {
                window.location.href = window.location.origin + window.location.pathname;
                return;
            }
            let url = window.location.origin + window.location.pathname;
            let params = new URLSearchParams(window.location.search);
            params.set('order_type', orderTypeValue);
            window.location.href = url + '?' + params.toString();
        });
    </script>
@endsection