@extends('layout.admin')

@section('head')
    @extends('layout.header')
    @section('header_title', 'Today Cancel Appointments')
@endsection

@section('content')
    <div class="content-wrapper">
        <!-- Content Header (Page header) -->
        <section class="content-header">
            <div class="container-fluid">
                <div class="row mb-2">
                    <div class="col-sm-6">
                        <h1>Today Sales Appointments</h1>
                    </div>
                    <div class="col-sm-6">
                        <ol class="breadcrumb float-sm-right">
                            <a class="btn btn-primary" href="{{ route('all.appointments') }}">All Appointments</a>
                        </ol>
                    </div>
                </div>
            </div><!-- /.container-fluid -->
        </section>

        <section class="content">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-md-12">
                        <div class="card">
                            <div class="card-body">
                                <div class="row">
                                    <div class="col-6">
                                        <div class="form-group">
                                            <label for="date">Payment Type</label>
                                            <select class="form-control" id="paymentType">
                                                <option value="all">All</option>
                                                <option value="cash">Cash</option>
                                                <option value="card">Card</option>
                                                <option value="online">Online</option>
                                            </select>
                                        </div>
                                        <button type="button" class="btn btn-danger" onclick="getPaymentType()">Search</button>

                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <!-- Main content -->
        <section class="content">
        <div class="container-fluid">
            <div class="row">
                <div class="col-12">
                    <div class="card">
                        <div class="card-header">
                            <h3 class="card-title">View Sales Appointments Details</h3>
                        </div>
                            <!-- /.card-header -->
                            <div class="card-body" id="paymentDetails">
                                <div class="tab-content" id="custom-tabs-two-tabContent">
                                    <div class="tab-pane fade show" id="custom-tabs-all" role="tabpanel"
                                        aria-labelledby="custom-tabs-all">
                                        
                                    </div>
                                    <div class="tab-pane fade show active" id="custom-tabs-complete" role="tabpanel"
                                        aria-labelledby="custom-tabs-complete">
                                        <table id="example2" class="table table-bordered table-hover">
                                            <thead>
                                                <tr>
                                                <th>#</th>
                                                <th>Customer Name</th>
                                                <th>Date</th>
                                                <th>Total Amount</th>
                                                <th>Bill Discount</th>
                                                <th>Net Amount</th>
                                                <th>Total Cash</th>
                                                <th>Total Card</th>
                                                <th>Total Online</th>
                                                <th>Total Paid</th>
                                                <th>Credit</th>
                                                <th>Employee</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                            @php
                                                $totalAmount = 0;
                                                $totalPaid = 0;
                                            @endphp
                                                @foreach ($appointments as $appointment)   
                                                @php
                                                    $totalAmount += $appointment->Total_Amount;
                                                    $totalPaid += $appointment->Total_Paid;
                                                @endphp
                                                        <tr>
                                                            <td>{{ $loop->iteration }}</td>
                                                            <td>
                                                            {{ $appointment->appointment->customers->Full_Name ?? 'Customer not found' }}
                                                            </td>
                                                            <td>{{ $appointment->Date_Time }}</td>
                                                            <td>{{ number_format($appointment->Total_Amount, 2, '.', '') }}
                                                            <td>{{ $appointment->Bill_Discount }}</td>
                                                            <td>{{ number_format($appointment->Net_Amount, 2, '.', '') }}
                                                            <td>{{ number_format($appointment->Cash_Paid, 2, '.', '') }}
                                                            <td>{{ number_format($appointment->Card_Paid, 2, '.', '') }}
                                                            <td>{{ number_format($appointment->Online_Paid, 2, '.', '') }}
                                                            <td>{{ number_format($appointment->Total_Paid, 2, '.', '') }}
                                                            <td>{{ number_format($appointment->Balance, 2, '.', '') }}
                                                            </td>
                                                            <td>{{ $appointment->appointment->employees->Full_Name ?? 'Employee not found' }}</td>
                                                        </tr>
                                                @endforeach
                                            </tbody>
                                            <tfoot>
                                                <tr>
                                                    <th colspan="3">Total Amount:</th>
                                                    <th>{{ number_format($totalAmount, 2, '.', '') }}</th>
                                                    <th colspan="8"></th>
                                                </tr>
                                                <tr>
                                                    <th colspan="9">Total Paid:</th>
                                                    <th>{{ number_format($totalPaid, 2, '.', '') }}</th>
                                                    <th colspan="8"></th>
                                                </tr>
                                            </tfoot>
                                        </table>
                                    </div>
                                   
                                </div>
                            </div>
                            <!-- /.card-body -->
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <!-- /.content -->
    </div>
@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 src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

    <script>
    $(function() {
        $('.select2bs4').select2({
            theme: 'bootstrap4'
        })

        $('#example2').DataTable({
            "paging": true,
            "lengthChange": false,
            "searching": false,
            "ordering": true,
            "info": true,
            "autoWidth": false,
            "responsive": true,
        });
    })

    function getQueryParam(param) {
        const urlParams = new URLSearchParams(window.location.search);
        return urlParams.get(param);
}
    function getPaymentType() {
        var paymentType = $('#paymentType').val();
        const date = getQueryParam('date');

        $.ajax({
            url: '{{ route("more-info.index_today_salestype_appointment") }}',
            type: 'POST',
            data: { paymentType: paymentType, date: date },
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
            success: function(response) {
                $('#paymentDetails').empty();

                // Append table header
                $('#paymentDetails').append(`
                    <table id="example2" class="table table-bordered table-hover">
                        <thead>
                            <tr>
                                <th>#</th>
                                <th>Customer Name</th>
                                <th>Date</th>
                                <th>Total Amount</th>
                                <th>Bill Discount</th>
                                <th>Net Amount</th>
                                <th>Total Cash</th>
                                <th>Total Card</th>
                                <th>Total Online</th>
                                <th>Total Paid</th>
                                <th>Credit</th>
                                <th>Employee</th>
                            </tr>
                        </thead>
                        <tbody id="appointmentRows"></tbody>
                        <tfoot>
                            <tr>
                                <th colspan="3">Total Amount:</th>
                                <th id="totalAmount"></th>
                                <th colspan="8"></th>
                            </tr>
                            <tr>
                                <th colspan="9">Total Paid:</th>
                                <th id="totalPaid"></th>
                                <th colspan="8"></th>
                            </tr>
                        </tfoot>
                    </table>
                `);

                let totalAmount = 0;
                let totalPaid = 0;
        response.appointments.forEach((appointment, index) => {
            const customerName = appointment.appointment && appointment.appointment.customers ? appointment.appointment.customers.Full_Name || 'Customer not found' : 'Customer not found';
            const employeeName = appointment.appointment && appointment.appointment.employees ? appointment.appointment.employees.Full_Name || 'Employee not found' : 'Employee not found';
        
        $('#appointmentRows').append(`
            <tr>
                <td>${index + 1}</td>
                <td>${customerName}</td>
                <td>${appointment.Date_Time}</td>
                <td>${parseFloat(appointment.Total_Amount).toFixed(2)}</td>
                <td>${appointment.Bill_Discount}</td>
                <td>${parseFloat(appointment.Net_Amount).toFixed(2)}</td>
                <td>${parseFloat(appointment.Cash_Paid).toFixed(2)}</td>
                <td>${parseFloat(appointment.Card_Paid).toFixed(2)}</td>
                <td>${parseFloat(appointment.Online_Paid).toFixed(2)}</td>
                <td>${parseFloat(appointment.Total_Paid).toFixed(2)}</td>
                <td>${parseFloat(appointment.Balance).toFixed(2)}</td>
                <td>${employeeName}</td>
            </tr>
        `);
        totalAmount += parseFloat(appointment.Total_Amount);
        totalPaid += parseFloat(appointment.Total_Paid);
    });

    $('#totalAmount').text(totalAmount.toFixed(2));
    $('#totalPaid').text(totalPaid.toFixed(2));
            },
            error: function(xhr, status, error) {
                console.error(xhr.responseText);
            }
        });
    }
</script>


@endsection