@extends('layout.admin')

@section('head')
    @extends('layout.header')
    @section('header_title', 'Dashboard')
@endsection

@section('content')
    <!-- Content Wrapper. Contains page content -->
    <div class="content-wrapper">
        <!-- Content Header (Page header) -->
        <div class="content-header">
            <div class="container-fluid">
                <div class="row mb-2">
                    <div class="col-sm-6">
                        <h1 class="m-0">Dashboard</h1>
                    </div><!-- /.col -->
                    <div class="col-sm-6">
                        <ol class="breadcrumb float-sm-right">
                            <li class="breadcrumb-item"><a href="#">Home</a></li>
                        </ol>
                    </div><!-- /.col -->
                </div><!-- /.row -->
            </div><!-- /.container-fluid -->
        </div>
        <!-- /.content-header -->

        <section class="content">
            <div class="container-fluid">
                <!-- Small boxes (Stat box) -->
                <div class="d-flex mb-4 mx-2 justify-content-between">
                    <div class="w-25">
                        <input id="date" type="date" class="form-control">
                    </div>
                </div> 
                <div class="row">
                    <div class="col-lg-3 col-6">
                        <!-- small box -->
                        <div class="small-box bg-info">
                            <div class="inner">
                                <h3 id="appointment-count">{{ $appointmentCount }}</h3>

                                <p>Today Appointments</p>
                            </div>
                            <div class="icon">
                                <i class="ion ion-stats-bars"></i>
                            </div>
                            <a href="{{ route('more-info.index_today_appointment') }}" class="small-box-footer today-appointments">More info <i
                                    class="fas fa-arrow-circle-right"></i></a>
                        </div>
                    </div>
                    <div class="col-lg-3 col-6">
                        <!-- small box -->
                        <div class="small-box bg-success">
                            <div class="inner">
                            <h3 id="completed">{{ $completed }}</h3>
                                <p>Completed Appointments</p>
                            </div>
                            <div class="icon">
                                <i class="ion ion-bag"></i>
                            </div>
                            <a href="{{ route('more-info.index_today_complete_appointment') }}" class="small-box-footer completed-appointments">More info <i
                                    class="fas fa-arrow-circle-right"></i></a>
                        </div>
                    </div>

                    <div class="col-lg-3 col-6">
                        <!-- small box -->
                        <div class="small-box bg-primary">
                            <div class="inner">
                                <h3 id="pending">{{ $pending }}</h3>

                                <p>Pending Appointments</p>
                            </div>
                            <div class="icon">
                                <i class="ion ion-pie-graph"></i>
                            </div>
                            <a href="{{ route('more-info.index_today_pending_appointment') }}" class="small-box-footer pending-info">More info <i
                                    class="fas fa-arrow-circle-right"></i></a>
                        </div>
                    </div>
                    <div class="col-lg-3 col-6">
                        <!-- small box -->
                        <div class="small-box bg-danger">
                            <div class="inner">
                                <h3 id="cancel">{{ $cancel }}</h3>

                                <p>Cancel Appointments</p>
                            </div>
                            <div class="icon">
                                <i class="ion ion-pie-graph"></i>
                            </div>
                            <a href="{{ route('more-info.index_today_cancel_appointment') }}" class="small-box-footer cancel-info">More info <i
                                    class="fas fa-arrow-circle-right"></i></a>
                        </div>
                    </div>
                    <div class="col-lg-3 col-6">
                        <!-- small box -->
                        <div class="small-box bg-warning">
                            <div class="inner">
                                <h3 id="sales">Rs. {{ number_format($sales, 2) }}</h3>

                                <p>Today Sales</p>
                            </div>
                            <div class="icon">
                                <i class="ion ion-person-add"></i>
                            </div>
                            <a href="{{ route('more-info.index_today_sales_appointment') }}" class="small-box-footer sales-info">More info <i
                                    class="fas fa-arrow-circle-right"></i></a>
                        </div>
                    </div>
                    <div class="col-lg-3 col-6">
                        <!-- small box -->
                        <div class="small-box bg-warning">
                            <div id="sales-breakdown" class="inner">
                                <div style="display:flex;justify-content: space-between"><span>Cash Sales</span><span>Rs.
                                        {{ number_format($cash, 2) }}</span></div>
                                <div style="display:flex; justify-content: space-between"><span>Card Sales</span><span>Rs.
                                        {{ number_format($card, 2) }}</span></div>
                                <div style="display:flex;justify-content: space-between"><span>Online Sales</span><span>Rs.
                                        {{ number_format($online, 2) }}</span></div>
                                <div style="display:flex;justify-content: space-between"><span>Credit Sales</span><span>Rs.
                                        {{ number_format($credit, 2) }}</span></div>
                            </div>
                            <div class="icon">
                                <i class="ion ion-person-add"></i>
                            </div>
                            <a href="{{ route('more-info.index_today_salestype_view_appointment') }}" class="small-box-footer salesType-info">More info <i
                                    class="fas fa-arrow-circle-right"></i></a>
                        </div>
                    </div>
                    <div class="col-lg-3 col-6">
                        <!-- small box -->
                        <div class="small-box bg-dark">
                            <div class="inner">
                                <h3 id="expenses">Rs. {{ number_format($expenses, 2) }}</h3>

                                <p>Today Expenses</p>
                            </div>
                            <div class="icon">
                                <i class="ion ion-pie-graph"></i>
                            </div>
                            <a href="{{ route('more-info.index_today_expences') }}" class="small-box-footer sales-expences">More info <i
                                    class="fas fa-arrow-circle-right"></i></a>
                        </div>
                    </div>

                    <div class="col-lg-3 col-6">
                        <!-- small box -->
                        <div class="small-box bg-secondary">
                            <div class="inner">
                                <h3 id="balance">Rs. {{ number_format($balance, 2) }}</h3>

                                <p>Balance</p>
                            </div>
                            <div class="icon">
                                <i class="ion ion-pie-graph"></i>
                            </div>
                            <a href="#" class="small-box-footer">Today Balance <i
                                    class="fas fa-arrow-circle-right"></i></a>
                        </div>
                    </div>


                </div>
                <!-- /.row -->
            </div>
        </section>
    </div>
    <!-- /.content-wrapper -->
@endsection

@section('script')
    <!-- jQuery -->
    <script src="../plugins/jquery/jquery.min.js"></script>


    <script src="../plugins/datatables/jquery.dataTables.min.js"></script>
    <script src="../plugins/datatables-bs4/js/dataTables.bootstrap4.min.js"></script>
    <script src="../plugins/datatables-responsive/js/dataTables.responsive.min.js"></script>
    <script src="../plugins/datatables-responsive/js/responsive.bootstrap4.min.js"></script>
    <script src="../plugins/datatables-buttons/js/dataTables.buttons.min.js"></script>
    <script src="../plugins/datatables-buttons/js/buttons.bootstrap4.min.js"></script>
    <script src="../plugins/jszip/jszip.min.js"></script>
    <script src="../plugins/pdfmake/pdfmake.min.js"></script>
    <script src="../plugins/pdfmake/vfs_fonts.js"></script>
    <script src="../plugins/datatables-buttons/js/buttons.html5.min.js"></script>
    <script src="../plugins/datatables-buttons/js/buttons.print.min.js"></script>
    <script src="../plugins/datatables-buttons/js/buttons.colVis.min.js"></script>
    <!-- Bootstrap 4 -->
    <script src="../plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
    <script src="../plugins/select2/js/select2.full.min.js"></script>
    <!-- jquery-validation -->
    <script src="../plugins/jquery-validation/jquery.validate.min.js"></script>
    <script src="../plugins/jquery-validation/additional-methods.min.js"></script>
    <!-- AdminLTE App -->
    <script src="../dist/js/adminlte.min.js"></script>

    <!-- AdminLTE for demo purposes -->
    <script src="../dist/js/demo.js"></script>
    <script src="../JS/validate.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

    <script>
        $(document).ready(function () {
            const today = new Date().toISOString().split('T')[0];
            $('#date').val(today);
            $('#date').on('change', function () {
                const selectedDate = $(this).val();

                if (selectedDate) {
                    updateLinks();
                    $.ajax({
                        type: 'GET',
                        url: '/dashboard-date',
                        data: { date: selectedDate },
                        success: function (response) {
                            console.log("AJAX response:", response);
                            updateDashboard(response);
                        },
                        error: function (xhr, status, error) {
                            console.error("AJAX error:", error);
                        }
                    });
                }
            });

            function updateDashboard(data) {
                $('#appointment-count').text(data.appointmentCount);
                $('#completed').text(data.completed);
                $('#pending').text(data.pending);
                $('#cancel').text(data.cancel);
                $('#sales').text(`Rs. ${new Intl.NumberFormat().format(data.sales)}`);
                $('#expenses').text(`Rs. ${new Intl.NumberFormat().format(data.expenses)}`);
                $('#balance').text(`Rs. ${new Intl.NumberFormat().format(data.balance)}`);

                $('#sales-breakdown').html(`
                    <div style="display:flex;justify-content: space-between"><span>Cash Sales</span><span>Rs.
                        ${new Intl.NumberFormat().format(data.cash)}</span></div>
                    <div style="display:flex; justify-content: space-between"><span>Card Sales</span><span>Rs.
                        ${new Intl.NumberFormat().format(data.card)}</span></div>
                    <div style="display:flex;justify-content: space-between"><span>Online Sales</span><span>Rs.
                        ${new Intl.NumberFormat().format(data.online)}</span></div>
                    <div style="display:flex;justify-content: space-between"><span>Credit Sales</span><span>Rs.
                        ${new Intl.NumberFormat().format(data.credit)}</span></div>
                `);
            }
        });

        function updateLinks() {
            const selectedDate = document.getElementById('date').value;
            if (!selectedDate) {
                alert("Please select a date first.");
                return;
            }

            document.querySelector('.today-appointments').href = `/more-info/today-appointment?date=${selectedDate}`;
            document.querySelector('.completed-appointments').href = `/more-info/today-complete-appointment?date=${selectedDate}`;
            document.querySelector('.pending-info').href = `/more-info/today-pending-appointment?date=${selectedDate}`;
            document.querySelector('.cancel-info').href = `/more-info/today-cancel-appointment?date=${selectedDate}`;
            document.querySelector('.sales-info').href = `/more-info/today-sales-appointment?date=${selectedDate}`;
            document.querySelector('.salesType-info').href = `/more-info/today-sales-type-appointment?date=${selectedDate}`;
            document.querySelector('.sales-expences').href = `/more-info/today-expences?date=${selectedDate}`;
        }

        document.getElementById('date').addEventListener('change', updateLinks);
    </script>
@endsection