@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>

        <!-- 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">
                                <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>
        $(function() {
            $('.select2bs4').select2({
                theme: 'bootstrap4'
            })

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

   
        })

    </script>
@endsection