@extends('layout.admin')

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

@section('content')
    <style>
        /* Style the icon */
        .print-icon {
            margin-right: 5px; /* Add some space between the icon and the button text */
        }
    </style>
    <style>
        .display-none {
            display: none !important;
        }

        #appointment_add .select2-customer-blocked-dropdown .select2-results__option[aria-disabled="true"] {
            background: linear-gradient(90deg, #fecaca, #fee2e2) !important;
            color: #7f1d1d !important;
            font-weight: 600;
            border-left: 4px solid #dc2626;
        }

        #appointment_add .customer-select2-badge {
            display: inline-block;
            font-size: 0.65rem;
            font-weight: 700;
            letter-spacing: 0.04em;
            text-transform: uppercase;
            padding: 0.15rem 0.45rem;
            margin-right: 0.4rem;
            border-radius: 4px;
            background: #b91c1c;
            color: #fff;
            vertical-align: middle;
        }

        #appointment_add .select2-selection__rendered .customer-select2-blocked {
            color: #991b1b;
            font-weight: 600;
        }

        .employee-table,
        .time {
            margin: 0 !important
        }

        .employee-table th,
        .time th {
            height: 50px !important;
            padding: 10px !important;
        }

        .employee-table td,
        .time td {
            height: 30px !important;
            padding: 0 !important;
        }

        .time td {
            padding-left: 15px !important;
            padding-right: 15px !important;
        }

        .detail-item {
            font-weight: 600;
        }

        .new-background {
            background-color: #fff;
        }

        .new-background-two {
            background-color: #fff;
            flex-grow: 1;
        }

        .error-number-message {
            display: none;
        }

        .error-visible {
            display: block !important;
        }

        #print-receipt .modal-body {
            padding: 20px;
            color: black !important;
            /* width: 120mm; */
        }

        #print-receipt td,
        #print-receipt th,
        #print-receipt p {
            font-size: 18px;
            font-family: nunito, sans-serif;
        }

        #print-receipt .modal-body .info h6 {
            margin: 10px 0;
            font-weight: 400;
            font-size: 20px;
            font-family: nunito, sans-serif;
            color: black !important;
        }

        #print-receipt .modal-body .info p {
            font-size: 18px;
            font-family: nunito, sans-serif;
        }

        #print-receipt .modal-body .tax-invoice h6 {
            margin: 10px 0;
            font-weight: 600;
            position: relative;
            font-size: 20px;
            font-family: nunito, sans-serif;
        }

        #print-receipt .modal-body .tax-invoice h6:after,
        #print-receipt .modal-body .tax-invoice h6:before {
            transform: translateY(-50%);
            -webkit-transform: translateY(-50%);
            -ms-transform: translateY(-50%);
            content: "";
            border-top: 1px dashed black !important;
            width: 35%;
            position: absolute;
            top: 50%;
        }

        #print-receipt .modal-body .tax-invoice h6:before {
            left: 0;
        }

        #print-receipt .modal-body .tax-invoice h6:after {
            right: 0;
        }

        #print-receipt .modal-body .tax-invoice .invoice-user-name {
            margin-bottom: 10px;
        }

        #print-receipt .modal-body .tax-invoice span {
            font-size: 18px;
            font-family: nunito, sans-serif;
        }

        #print-receipt .modal-body table thead th {
            color: black !important;
            width: auto;
            min-width: auto;
            padding: 5px;
            border-top: 1px dashed black !important;
            border-bottom: 1px dashed black !important;
        }

        #print-receipt .modal-body .invoice-bar {
            border-top: 1px dashed black !important;
            padding: 20px 0 0;
        }

        #print-receipt .modal-body table tbody tr td {
            padding: 5px;
        }

        #print-receipt .modal-body table tbody tr table {
            border-top: 1px dashed black !important;
        }

        #print-receipt .modal-body table tbody tr td {
            padding: 5px;
        }

        .total-table {
            border-top: 1px dashed black !important;
        }

        @media print {
            body * {
                visibility: hidden;
                height: auto !important;
            }

            #print-receipt .modal-body,
            #print-receipt .modal-body * {
                visibility: visible;
            }

            #print-receipt {
                position: absolute;
                left: 0;
                top: 0;
            }

            #print-receipt .modal-body {
                padding-top: 0 !important;
            }

            #print-receipt .modal-body {
                width: 100mm
            }

            .card-body {
                padding-top: 0 !important;
            }
        }
    </style>
    <style>
        /* Custom styles for the modal header */
        .modal-header {
            background-color: #ffffff; /* Blue background color */
            color: white; /* White text color */
            border-bottom: 1px solid #dee2e6; /* Gray border at the bottom */
            padding: 15px; /* Add padding to the header */
        }

        /* Custom styles for the modal title */
        .modal-title {
            font-size: 24px; /* Larger font size */
            font-weight: bold; /* Bold font weight */
            margin-bottom: 0; /* Remove bottom margin */
        }

        /* Custom styles for the client name */
        .client-name {
            font-style: italic; /* Italic font style */
            margin-left: 10px; /* Add spacing from the modal title */
        }

        /* Custom styles for the close button */
        .close {
            color: white; /* White text color */
            font-size: 1.5rem; /* Larger font size */
        }

        .disabled {
            pointer-events: none; /* Disable pointer events */
            opacity: 0.5; /* Reduce opacity to visually indicate disabled state */
            /* Add any other styles you want to apply when disabled */
        }
        .employee-column {
            transition: all 0.3s ease;
        }

        /* Disabled employee style */
        .disabled-employee {
            background-color: #f0f0f0; /* Softer background color */
            color: #999; /* Dimming text color */
            opacity: 0.7; /* Lower opacity */
            text-decoration: line-through; /* Optional: Strikethrough for emphasis */
        }

        .disabled-employee td {
            pointer-events: none; /* No interaction on table cells */
        }

        /* Hover effect for active employees */
        .employee-column:hover:not(.disabled-employee) {
            background-color: #e0f7fa; /* Light hover background */
            cursor: pointer;
        }
    </style>

    <!-- 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">Appointments</h1>
                    </div><!-- /.col -->
                    <div class="col-sm-6 text-right">
                        <a href="{{ route('all.appointments') }}" class="btn btn-primary">All Appointments</a>
                    </div>
                </div><!-- /.row -->
            </div><!-- /.container-fluid -->
        </div>
        <!-- /.content-header -->
        <section class="content mb-4">
            <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>
            @if($dayend===1)
                <div class="container-fluid d-flex disabled" style="overflow-x: auto" id="page_content">
                    <div style="position: absolute; z-index: 1;">
                        <table class="table table-bordered time new-background" style="position: sticky;">
                            <thead>
                            <tr>
                                <th>#</th>
                            </tr>
                            </thead>
                            <tbody>
                            @for ($hour = 8; $hour <= 21; $hour++)
                                <tr>
                                    <td>{{ str_pad($hour, 2, '0', STR_PAD_LEFT) }}:00</td>
                                </tr>
                                @for ($i = 1; $i <= 3; $i++)
                                    <tr>
                                        <td></td>
                                    </tr>
                                @endfor
                            @endfor

                            </tbody>
                        </table>
                    </div>
                    @foreach ($employees as $employee)
                        <div id={{ $employee->idEmployee }} class="new-background-two" onclick="change_id('{{ $employee->idEmployee }}', '{{ $employee->Full_Name }}')"
                             style="position: relative;  {{$employee->idEmployee == 10 ? "left: 67px; max-width:25%; min-width:25%;" : "max-width:20%; min-width:20%;"}}">
                            <div style="position: absolute; width: 100%; height: 50px; background: transparent"></div>
                            <table data-employee="{{ $employee->idEmployee }}"  class="employee-table table table-bordered">
                                <thead>

                                <tr>
                                    <th>{{ $employee->Full_Name }}</th>
                                </tr>
                                </thead>
                                <tbody>
                                @for ($i = 1; $i <= 56; $i++)
                                    <tr>
                                        <td></td>
                                    </tr>
                                @endfor
                                </tbody>
                            </table>
                        </div>
                    @endforeach
                </div>


            @else
                <div class="container-fluid d-flex" style="overflow-x: auto" id="page_content">
                    <div style="position: absolute; z-index: 1;">
                        <table class="table table-bordered time new-background" style="position: sticky;">
                            <thead>
                            <tr>
                                <th>#</th>
                            </tr>
                            </thead>
                            <tbody>
                            @for ($hour = 8; $hour <= 21; $hour++)
                                <tr>
                                    <td>{{ str_pad($hour, 2, '0', STR_PAD_LEFT) }}:00</td>
                                </tr>
                                @for ($i = 1; $i <= 3; $i++)
                                    <tr>
                                        <td></td>
                                    </tr>
                                @endfor
                            @endfor
                            </tbody>
                        </table>
                    </div>

                    @foreach ($employees as $employee)
                        @php
                            $isOnLeave = in_array($employee->idEmployee, $checkleaves);
                        @endphp

                        <div id="{{ $employee->idEmployee }}"
                             class="new-background-two employee-column {{ $isOnLeave ? 'disabled-employee' : '' }}"
                             onclick="{{ !$isOnLeave ? "change_id('{$employee->idEmployee}', '{$employee->Full_Name}')" : '' }}"
                             style="position: relative; {{ $employee->idEmployee == 10 ? 'left: 67px; max-width:25%; min-width:25%;' : 'max-width:20%; min-width:20%;' }} {{ $isOnLeave ? 'pointer-events: none; opacity: 0.7;' : '' }}">

                            <div style="position: absolute; width: 100%; height: 50px; background: transparent"></div>
                            <table data-employee="{{ $employee->idEmployee }}" class="employee-table table table-bordered">
                                <thead>
                                <tr>
                                    <th>{{ $employee->Full_Name }}</th>
                                </tr>
                                </thead>
                                <tbody>
                                @for ($i = 1; $i <= 56; $i++)
                                    <tr>
                                        <td></td>
                                    </tr>
                                @endfor
                                </tbody>
                            </table>
                        </div>
                    @endforeach
                </div>


            @endif
        </section>
    </div>


    <div class="modal fade bd-example-modal-xl" id="appointment_add" tabindex="-1" role="dialog"
         aria-labelledby="myExtraLargeModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-xl">

            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel"  style="color: black">Add Appointment - <span class="client-name" id="slote_name" style="color: black"></span></h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="row">
                        <div class="col-md-5">
                            <div class="form-group">
                                <div class="mb-1">
                                    <label for="date">Date</label>
                                </div>
                                <input type="datetime-local" class="form-control" id="modal_date">
                            </div>
                        </div>
                        <div class="col-md-7">
                            <div class="form-group">
                                <div class="d-flex justify-content-between mb-1">
                                    <label for="exampleInputEmail1">Customer</label>
                                    <input type="button" class="btn btn-primary py-0" value="Add Customer"
                                           data-toggle="modal" data-target="#customer_add">
                                </div>
                                <select id="customer" class="form-group clear" style="width: 100%;">
                                    <option value=""></option>
                                    @foreach ($customers as $customer)
                                        <option data-points="{{ $customer->Loyalty_Points }}"
                                                value="{{ $customer->idCustomer }}"
                                                data-status="{{ (int) $customer->Status }}"
                                                @if((int) $customer->Status === 0) disabled @endif>
                                            {{ $customer->Full_Name }} - {{ $customer->Contact_No }}
                                        </option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-12">
                            <div class="form-group">
                                <label for="exampleInputEmail1">Services</label>
                                <select id="services" class="form-group clear" style="width: 100%;" multiple="multiple">
                                    @foreach ($services as $service)
                                        <option value="{{ $service->idServices }}"
                                                data-price="{{ str_replace(',', '', $service->Price) }}"
                                                data-name="{{ $service->Name }}" data-duration="{{ $service->Duration }}">
                                            {{ $service->Name }}
                                        </option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-5">
                            <div class="form-group">
                                <label for="exampleInputEmail1">Service Package</label>
                                <select id="package" class="form-group clear" style="width: 100%;">
                                    <option value=""></option>
                                    @foreach ($servicePackages as $package)
                                        <option data-price="{{ str_replace(',', '', $package->Discounted_Amount) }}"
                                                value="{{ $package->idService_Combo_Package }}">{{ $package->Name }}
                                        </option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                        <div class="col-md-2">
                            <div class="form-group">
                                <label for="duration">Duration</label>
                                <input type="number" class="form-control" id="duration">
                            </div>
                        </div>
                        <div class="col-md-5">
                            <div class="form-group">
                                <label for="duration">Advance Amount</label>
                                <input type="text" class="form-control" id="advance_amount" value="0.00">
                            </div>
                        </div>
                        <div class="col-md-5" hidden>
                            <div class="form-group">
                                <label for="exampleInputEmail1">Employee</label>
                                <select id="employee" class="form-group select2bs4" style="width: 100%;">
                                    @foreach ($employees as $employee)
                                        <option value="{{ $employee->idEmployee }}">{{ $employee->Full_Name }}
                                        </option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-12 mb-3">
                            <table id="services_table" class="table table-bordered">
                                <thead>
                                <tr>
                                    <th style="width: 10%">#</th>
                                    <th>Service</th>
                                    <th style="width: 25%">Price</th>
                                    <th>Duration</th>
                                    <th>Time</th>
                                    <th style="width: 30%">Employee</th>
                                </tr>
                                </thead>
                                <tbody>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
                <div class="modal-footer text-right">
                    <label class="m-0" for="">Total :</label>
                    <label class="m-0" id="tot_amount_label" for="">0.00</label>
                </div>
                <div id="loyalty_discount_section" class="modal-footer text-right" hidden>
                    <span>Loyalty Discount :</span>
                    <span id="loyalty_discount"></span>
                </div>
                <div class="modal-footer">
                    <button type="submit" class="btn btn-primary" onclick="appointmentSubmit()">Save
                        Appointment</button>
                </div>
            </div>
        </div>
    </div>


    <div class="modal fade bd-example-modal-lg" id="invoice" tabindex="-1" role="dialog"
         aria-labelledby="myLargeModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <ul class="nav nav-tabs" role="tablist">
                        <li class="nav-item">
                            <a class="nav-link active" id="tab1" data-toggle="tab" href="#tab_content1"
                               role="tab">
                                Invoice
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" id="update_appointment_btn" data-toggle="tab" href="#tab_content2" role="tab">
                                Update
                            </a>
                        </li>
                    </ul>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="tab-content">
                        <div class="tab-pane active" id="tab_content1" role="tabpanel">
                            <div class="card-body">
                                <div class="row">
                                    <input type="text" hidden id="invoice_services">
                                    <input type="text" hidden id="appointmentId">
                                    <div class="col-md-4">
                                        <div class="form-group">
                                            <label for="invoice_total">Total Amount</label>
                                            <input type="text" class="form-control" id="invoice_total">
                                        </div>
                                    </div>
                                    <div class="col-md-4">
                                        <div class="form-group">
                                            <label for="invoice_discount">Discount</label>
                                            <input type="number" class="form-control" id="invoice_discount" value="0">
                                        </div>
                                    </div>
                                    <div class="col-md-4">
                                        <div class="form-group">
                                            <label for="invoice_net">Net Amount</label>
                                            <input readonly type="text" class="form-control" id="invoice_net">
                                        </div>
                                    </div>
                                    <!-- Payment Details -->
                                    <div class="col-md-4">
                                        <div class="form-group">
                                            <label for="cash_paid">Advance Paid</label>
                                            <input type="number" class="form-control" id="advance_paid">
                                        </div>
                                    </div>
                                    <div class="col-md-4">
                                        <div class="form-group">
                                            <label for="cash_paid">Cash Paid</label>
                                            <input type="number" class="form-control" id="cash_paid">
                                        </div>
                                    </div>
                                    <div class="col-md-4">
                                        <div class="form-group">
                                            <label for="card_paid">Card Paid</label>
                                            <input type="number" class="form-control" id="card_paid">
                                        </div>
                                    </div>
                                    <div class="col-md-4">
                                        <div class="form-group">
                                            <label for="online_paid">Online</label>
                                            <input type="number" class="form-control" id="online_paid">
                                        </div>
                                    </div>
                                    <div class="col-md-4">
                                        <div class="form-group">
                                            <label for="online_reference">Online Reference</label>
                                            <input type="text" class="form-control" id="online_reference">
                                        </div>
                                    </div>
                                    <div class="col-md-4">
                                        <div class="form-group">
                                            <label for="balance">Credit Balance</label>
                                            <input readonly style="color: red" type="text" class="form-control"
                                                   id="balance">
                                        </div>
                                    </div>
                                    <!-- Services -->
                                    <div class="col-md-12">
                                        <label for="invoice_services">Services</label>
                                        <div class="table-responsive">
                                            <table id="invoice_services" class="table table-bordered">
                                                <thead>
                                                <tr>
                                                    <th>#</th>
                                                    <th>Service</th>
                                                    <th>Price</th>
                                                    <th>Employee</th>
                                                </tr>
                                                </thead>
                                                <tbody>
                                                </tbody>
                                            </table>
                                        </div>
                                    </div>
                                    <!-- Items -->
                                    <div class="col-md-12">
                                        <div class="form-group">
                                            <label for="items">Items</label>
                                            <select id="items" class="form-group" style="width: 100%;"
                                                    multiple="multiple">
                                                @foreach ($items as $item)
                                                    <option data-name="{{ $item->Description }}"
                                                            data-rate="{{ $item->Rate }}"
                                                            value="{{ $item->idItem_details }}">
                                                        {{ $item->Description }}
                                                    </option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-md-12">
                                        <div class="table-responsive">
                                            <table id="invoice_items" class="table table-bordered">
                                                <thead>
                                                <tr>
                                                    <th>#</th>
                                                    <th>Item Name</th>
                                                    <th>Rate</th>
                                                    <th>Quantity</th>
                                                    <th>Total</th>
                                                </tr>
                                                </thead>
                                                <tbody>
                                                </tbody>
                                            </table>
                                        </div>
                                    </div>
                                    <div class="col-md-12 text-left mt-4" hidden>
                                        <label>Loyalty Discount: </label>
                                        <span id="loyalty_invoice">0</span><span>%</span>
                                    </div>

                                    <div class="col-md-12 text-right mt-4">

                                        <button type="submit" class="btn btn-danger" onclick="appointmentNoShow()"
                                                id="noshow_button">No
                                            Show</button>
                                        <button id="confirm_button" type="submit" class="btn btn-warning"
                                                onclick="appointmentConfirm()">Confirm</button>
                                        <button id="arrived_button" type="submit" class="btn btn-info"
                                                onclick="customerArrived()">Arrived</button>
                                        <button type="submit" class="btn btn-danger" id="cancel_apploint"
                                                onclick="appointmentCancel()">Cancel
                                            Appointment</button>
                                        <button type="submit" class="btn btn-success" id="save_button" onclick="invoicetSubmit()">Save
                                            Invoice</button>
                                        <button class="btn btn-primary" onclick="print_page_invoice()" id="print_recepts">
                                            <i class="fas fa-print"></i> Print
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="tab-pane" id="tab_content2" role="tabpanel">
                            <div class="card-body">
                                <div class="row">
                                    <div class="col-md-8">
                                        <div class="form-group">
                                            <label for="modal_date_update">Date</label>
                                            <input type="datetime-local" class="form-control" id="modal_date_update">
                                        </div>
                                    </div>
                                    <div class="col-md-4">
                                        <div class="form-group">
                                            <label for="duration_update">Duration</label>
                                            <input type="number" class="form-control" id="duration_update">
                                        </div>
                                    </div>
                                    <div class="col-md-12">
                                        <div class="form-group">
                                            <label for="services_update">Services</label>
                                            <select id="services_update" class="form-group" style="width: 100%;"
                                                    multiple="multiple">
                                                @foreach ($services as $service)
                                                    <option value="{{ $service->idServices }}"
                                                            data-price="{{ str_replace(',', '', $service->Price) }}"
                                                            data-name="{{ $service->Name }}"
                                                            data-duration="{{ $service->Duration }}">
                                                        {{ $service->Name }}
                                                    </option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-md-12 mb-3">
                                        <div class="table-responsive">
                                            <table id="services_update_table" class="table table-bordered">
                                                <thead>
                                                <tr>
                                                    <th>#</th>
                                                    <th>Service</th>
                                                    <th>Price</th>
                                                    <th>Duration</th>
                                                    <th>Time</th>
                                                    <th>Employee</th>
                                                </tr>
                                                </thead>
                                                <tbody>
                                                </tbody>
                                            </table>
                                        </div>
                                    </div>
                                    <div class="col-md-12 text-right">
                                        <label for="update_total">Total :</label>
                                        <label id="update_total" for="">0.00</label>
                                    </div>
                                    <div class="col-md-12 text-right mt-3">
                                        <button type="submit" id="update_appointment_btn" class="btn btn-primary"
                                                onclick="appointmentUpdate()">Update
                                            Appointment</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>


    <div class="modal fade bd-example-modal-lg" id="customer_add" tabindex="-1" role="dialog"
         aria-labelledby="myLargeModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">Add Customer</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="card-body">
                    <div class="row">
                        <form id="save_customer_form">
                            {{ csrf_field() }}
                            <div class="card-body">
                                <div class="row">
                                    <div class="col-md-12">
                                        <div class="form-group">
                                            <div class="form-group">
                                                <label for="exampleInputEmail1">Full Name</label>
                                                <input type="text" name="Full_Name" class="form-control"
                                                       id="Full_Name" placeholder="Enter Full Name">
                                            </div>
                                        </div>

                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <div class="form-group">
                                                <label for="exampleInputEmail1">First Name</label>
                                                <input type="text" name="First_Name" class="form-control"
                                                       id="First_Name" placeholder="Enter First Name">
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <div class="form-group">
                                                <label for="exampleInputEmail1">Contact Number</label>
                                                <input type="text" name="Tp" class="form-control" id="Tp"
                                                       placeholder="Enter Contact Number">
                                                <small id="error-message"
                                                       class="form-text error-number-message text-danger">Enter a valid
                                                    number (10 digits required)</small>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-12">
                                        <div class="form-group">
                                            <div class="form-group">
                                                <label for="exampleInputEmail1">Address</label>
                                                <input type="text" name="Address" class="form-control" id="Address"
                                                       placeholder="Enter Address">
                                            </div>
                                        </div>

                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <div class="form-group">
                                                <div class="form-group">
                                                    <label for="exampleInputEmail1">Email Address</label>
                                                    <input type="email" name="Email" class="form-control"
                                                           id="Email" placeholder="Enter Email Address">
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <div class="form-group">
                                                <label for="exampleInputEmail1">Comment</label>
                                                <input type="text" name="Comment" class="form-control" id="Comment"
                                                       placeholder="Enter Comment">
                                            </div>
                                        </div>
                                    </div>

                                </div>

                            </div>
                            <div class="card-footer text-right">
                                <button type="submit" class="btn btn-primary"
                                        onclick="validateSubmitCustomer(event)">Save Customer</button>
                            </div>
                        </form>
                    </div>
                </div>

            </div>
        </div>
    </div>


    <div class="modal fade" id="print-receipt" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
         aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">Invoice</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                    <input type="submit" id="print_invoice" onclick="printReceipt()" class="btn btn-primary"
                           value="Print Receipt" />
                </div>
                <div class="modal-body">
                    <div class="card-body">
                        <div class="icon-head text-center">
                            <img src="logo.jpg" width="200" alt="Receipt Logo">
                        </div>
                        <div class="text-center info text-center">
                            <h6>Salon Nathalia</h6>
                            <p class="mb-0">Phone Number : +94 77 725 2313</p>
                            <p class="mb-0">Email : <span>info@salonnathalia.com</span>
                            </p>
                        </div>
                        <div class="tax-invoice">
                            <h6 class="text-center">Invoice</h6>
                            <div style="width: 100%">
                                <div style="width: 100%; display: flex; gap:20px" class="invoice-user-name">
                                    <div style="display: flex; width: 30%; justify-content: space-between">
                                        <span>Name</span><span>:</span>
                                    </div>
                                    <span id="receipt_customer_name"></span>
                                </div>
                                <div style="width: 100%; display: flex; gap:20px" class="invoice-user-name">
                                    <div style="display: flex; width: 30%; justify-content: space-between">
                                        <span>Invoice No</span><span>:</span>
                                    </div>
                                    <span id="receipt_invoice_id"></span>
                                </div>
                                <div style="width: 100%; display: flex; gap:20px" class="invoice-user-name" hidden>
                                    <div style="display: flex; width: 30%; justify-content: space-between">
                                        <span>Customer Id</span><span>:</span>
                                    </div>
                                    <span id="receipt_customer_id"></span>
                                </div>
                                <div style="width: 100%; display: flex; gap:20px" class="invoice-user-name">
                                    <div style="display: flex; width: 30%; justify-content: space-between">
                                        <span>Date</span><span>:</span>
                                    </div>
                                    <span id="receipt_date"></span>
                                </div>
                            </div>
                        </div>
                        <table class="table-borderless w-100 table-fit" id="receipt_services">
                            <thead>
                            <tr>
                                <th># Service</th>
                                <th class="text-right">Rate</th>
                            </tr>
                            </thead>
                            <tbody>
                            </tbody>
                        </table>
                        <table class="table-borderless w-100 table-fit" id="receipt_items">
                            <thead>
                            <tr>
                                <th># Item</th>
                                <th>Price</th>
                                <th>Qty</th>
                                <th class="text-right">Total</th>
                            </tr>
                            </thead>
                            <tbody>
                            </tbody>
                        </table>
                        <table style="margin-top: 20px" class="table-borderless w-100 table-fit total-table">
                            <tr>
                                <td>Discount :</td>
                                <td class="text-right" id="receipt_discount_2">0</td>
                            </tr>
                            <tr>
                                <td>Sub Total :</td>
                                <td class="text-right" id="receipt_total"></td>
                            </tr>
                            <tr>
                                <td style="font-size: 19px">Advance :</td>
                                <td style="font-size: 19px" class="text-right" id="advance_net"></td>
                            </tr>
                            <tr>
                                <td style="font-size: 19px">Total Bill :</td>
                                <td style="font-size: 19px" class="text-right" id="receipt_net"></td>
                            </tr>

                        </table>
                        <div class="text-center invoice-bar">
                            <p>Thank you !</p>
                        </div>
                        <table style="margin-top: 20px" class="table-borderless w-100 table-fit total-table">
                            <tr>
                                <td style="font-size: 19px" class="text-right"></td>
                            </tr>
                        </table>
                    </div>
                </div>
                {{--                <div class="modal-footer">--}}
                {{--                    <input type="submit" id="print_invoice" onclick="printReceipt()" class="btn btn-primary"--}}
                {{--                        value="Print Receipt" />--}}
                {{--                </div>--}}
            </div>
        </div>
    </div>
    <!-- /.content-wrapper -->
@endsection

@section('script')
    <!-- jQuery -->
    <script src="../plugins/jquery/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/js/bootstrap-datepicker.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>
        let selectedItems = [];
        let selectedServices = [];
        let invoiceServices = [];
        let appointmentServicesUpdate = [];
        let appointment_id="0";

        let main_emp_id="0"
        let main_employeeName=""
        function change_id(emp_id,emp_name){
            console.log(emp_id,emp_name);
            main_emp_id=emp_id;
            main_employeeName=emp_name;
        }

        const printReceipt = () => {
            $('#page_content').addClass('display-none');
            window.print();
            $('#page_content').removeClass('display-none');
        }

        $(function() {
            $("#print_recepts").hide();
            const disabledDates = @json($dates);
            let datesArray = [];
            disabledDates.map((data) => {
                datesArray.push(data.Date);
            })


            function formatCustomerCustomerSelect2(state) {
                if (!state.id) {
                    return state.text;
                }
                var $option = $(state.element);
                var st = $option.attr('data-status');
                var blocked = st === '0' || parseInt(st, 10) === 0;
                var $line = $('<span class="customer-select2-line"></span>');
                $line.text(state.text);
                if (blocked) {
                    $line.addClass('customer-select2-blocked');
                    $line.prepend($('<span class="customer-select2-badge">Blocked</span>'));
                }
                return $line;
            }

            $('.select2bs4').select2({
                theme: 'bootstrap4',
                dropdownParent: $("#appointment_add")
            })
            $('.clear').not('#customer').select2({
                theme: 'bootstrap4',
                placeholder: 'Select...',
                dropdownParent: $("#appointment_add"),
                allowClear: true
            })
            $('#customer').select2({
                theme: 'bootstrap4',
                placeholder: 'Select...',
                dropdownParent: $("#appointment_add"),
                allowClear: true,
                width: '100%',
                dropdownCssClass: 'select2-customer-blocked-dropdown',
                templateResult: formatCustomerCustomerSelect2,
                templateSelection: formatCustomerCustomerSelect2
            })
            $('#services_update').select2({
                theme: 'bootstrap4',
                placeholder: 'Select...',
                dropdownParent: $("#invoice"),
                allowClear: true
            })
            $('#items').select2({
                theme: 'bootstrap4',
                placeholder: 'Select...',
                dropdownParent: $("#invoice"),
                allowClear: true
            })

            $('#item').select2({
                theme: 'bootstrap4',
            })

            $('#print-receipt').on('hidden.bs.modal', function() {
                location.reload();
            });

            let servicesIdArray = [];

            $('#package').on('change', function() {
                changePackage($(this).val());
            })

            const servicesTableUpdate = () => {
                selectedServices = [];
                const employeeId = $('#employee').val();


                $('#services option:selected').each(function () {
                    let serviceId = $(this).val();
                    let serviceName = $(this).data('name');
                    let servicePrice = $(this).data('price');
                    let duration = $(this).data('duration');
                    selectedServices.push({
                        serviceId: serviceId,
                        serviceName: serviceName,
                        servicePrice: servicePrice,
                        duration: duration,
                        employeeId: employeeId
                    });
                });

                $('#services_table tbody').empty();
                const dateTimeString = $('#modal_date').val();
                let time = dateTimeString.split('T')[1];
                const datePart = dateTimeString.split('T')[0];

                selectedServices.forEach(function (service, index) {
                    let row = $('<tr data-id="' + service.serviceId + '">');
                    row.append($('<td>').text(index + 1));
                    row.append($('<td>').text(service.serviceName));

                    if (service.servicePrice === '0.00') {
                        let priceInput = $('<input type="text" class="form-control" style="width: 100%;">')
                            .val('')
                            .on('keyup', function () {
                                const newPrice = parseFloat($(this).val()) || 0.00;
                                const serviceId = row.attr('data-id');

                                selectedServices = selectedServices.map((service) => {
                                    if (service.serviceId === serviceId) {
                                        return {
                                            ...service,
                                            servicePrice: newPrice
                                        };
                                    }
                                    return service;
                                });
                                appointmentTotalUpdate();
                            });
                        row.append($('<td>').append(priceInput));
                    } else {
                        row.append($('<td>').text(service.servicePrice));
                    }

                    const durationString = service.duration; // assuming service.duration is "60 MINS"
                    const durationTime = parseInt(durationString.split(' ')[0]);

                    // Create a new Date object for each service based on the current time
                    const dateTime = new Date(datePart + 'T' + time);

                    // Add the duration to the Date object
                    dateTime.setMinutes(dateTime.getMinutes() + durationTime);

                    // Extract the new time part
                    const updatedHours = String(dateTime.getHours()).padStart(2, '0');
                    const updatedMinutes = String(dateTime.getMinutes()).padStart(2, '0');
                    const updatedTime = updatedHours + ':' + updatedMinutes;

                    row.append($('<td>').text(service.duration));
                    row.append($('<td>').text(time + " - " + updatedTime));

                    selectedServices = selectedServices.map((service) => {
                        const serviceId = row.attr('data-id');
                        if (service.serviceId === serviceId) {
                            return {
                                ...service,
                                time: time + " - " + updatedTime,
                            };
                        }
                        return service;
                    });

                    // Update the time for the next service
                    time = updatedTime;

                    let selectEmployee = $('<select class="form-control select2bs4" style="width: 100%;">');
                    let employeeOption = '';

                    @foreach ($employees as $employee)
                        employeeOption = $('<option value="{{ $employee->idEmployee }}">{{ $employee->Full_Name }}</option>');
                    if ("{{ $employee->idEmployee }}" === employeeId) {
                        employeeOption.attr('selected', 'selected');
                    }
                    selectEmployee.append(employeeOption);
                    @endforeach

                    selectEmployee.on('change', function () {
                        const newEmployeeId = $(this).val();
                        const serviceId = row.attr('data-id');

                        selectedServices = selectedServices.map((service) => {
                            if (service.serviceId === serviceId) {
                                return {
                                    ...service,
                                    employeeId: newEmployeeId,
                                };
                            }
                            return service;
                        });
                    });

                    row.append($('<td>').append(selectEmployee));

                    $('#services_table tbody').append(row);
                });
            };



            const appointmentTotalUpdate = () => {
                const selectedServicesIds = $('#services').val();
                const loyaltyPoints = 0;

                let total = 0;
                let duration = 0;

                selectedServices.forEach(service => {
                    const price = parseFloat(service.servicePrice) || 0;
                    total += price;
                })

                selectedServicesIds.forEach(serviceId => {
                    const selectedOption = $(`#services option[value='${serviceId}']`);
                    const time = parseInt(selectedOption.data('duration')) || 0;
                    duration += time;
                })

                if (loyaltyPoints >= 100 && loyaltyPoints < 500) {
                    total = total * (95 / 100);
                } else if (loyaltyPoints >= 500 && loyaltyPoints < 1000) {
                    total = total * (92.5 / 100);
                } else if (loyaltyPoints >= 1000) {
                    total = total * (90 / 100);
                }

                $('#duration').val(duration);

                $('#tot_amount_label').text(parseFloat(total).toFixed(2).replace(/\d(?=(\d{3})+\.)/g,
                    '$&,'));
            }

            $('#loyalty_discount_section').hide();
            $('#customer').on('change', function() {
                appointmentTotalUpdate();
                const loyaltyPoints = 0;
                let loyaltyDiscount = '';
                if (loyaltyPoints >= 100) {
                    if (loyaltyPoints < 500) {
                        loyaltyDiscount = '5%';
                    } else if (loyaltyPoints < 1000) {
                        loyaltyDiscount = '7.5%';
                    } else {
                        loyaltyDiscount = '10%';
                    }
                    $('#loyalty_discount_section').show();
                    $('#loyalty_discount').text(loyaltyDiscount);
                } else {
                    $('#loyalty_discount_section').hide();
                }
            })

            $('#services').on('change', function() {
                servicesTableUpdate();
                appointmentTotalUpdate();
            })

            $('#services_update').on('change', function() {
                const selectedServicesIds = ($(this).val())

                let duration = 0;

                selectedServicesIds.forEach(serviceId => {
                    const selectedOption = $(`#services option[value='${serviceId}']`);
                    const time = parseInt(selectedOption.data('duration')) || 0;
                    duration += time;
                })

                $('#duration_update').val(duration);

                appointmentServicesUpdate = []
                $('#services_update option:selected').each(function() {
                    const serviceId = $(this).val();
                    const serviceName = $(this).data('name');
                    const servicePrice = $(this).data('price');
                    const duration = $(this).data('duration');
                    const empId = invoiceServices.find((service) => service.Services_idServices ===
                        parseInt($(this).val()))?.Employee_idEmployee

                    const amount = invoiceServices.find((service) => service.Services_idServices ===
                        parseInt($(this).val()))?.Amount


                    appointmentServicesUpdate.push({
                        Services_idServices: serviceId,
                        Amount: amount ?? servicePrice,
                        Service_Description: serviceName,
                        duration: duration,
                        Employee_idEmployee: empId ?? @json($employees)[0]
                            .idEmployee
                    });
                });

                updateServicesUpdateTable()
                updateServiceAmountOnUpdate()
            })

            $('#items').on('change', function() {
                itemsTableUpdate();
            });

            const itemsTableUpdate = () => {
                selectedItems = [];
                $('#items option:selected').each(function() {
                    let itemId = $(this).val();
                    let itemName = $(this).data('name');
                    let rate = $(this).data('rate');
                    selectedItems.push({
                        itemId: itemId,
                        itemName: itemName,
                        qty: 1,
                        rate: rate,
                        total: rate
                    });
                });

                console.log(selectedItems);

                $('#invoice_items tbody').empty();
                selectedItems.forEach(function(item, index) {
                    let row = $('<tr data-id="' + item.itemId + '">');
                    row.append($('<td>').text(index + 1));
                    row.append($('<td>').text(item.itemName));
                    row.append($('<td>').text(item.rate));

                    let qtyInput = $('<input class="form-control" value="1" />');
                    qtyInput.on('keyup', function() {
                        item.qty = parseInt($(this).val()) || 0;
                        item.total = item.qty * item.rate;
                        row.find('.item-row-total').text(parseFloat(item.total).toFixed(2)
                            .replace(/\d(?=(\d{3})+\.)/g,
                                '$&,'));
                        updateInvoiceTotal();
                    });

                    row.append($('<td>').html(qtyInput));
                    row.append($('<td class="pl-2 pt-1 item-row-total">').text(parseFloat(item.total)
                        .toFixed(2).replace(/\d(?=(\d{3})+\.)/g,
                            '$&,')));

                    $('#invoice_items tbody').append(row);
                });

                updateInvoiceTotal();
            };

            const updateInvoiceTotal = () => {
                let invoiceTotal = 0.00;

// Add the amounts from the invoice_services table
                $('#invoice_services tbody tr').each(function() {
                    // Get the text from the 3rd column (index 2)
                    let amountText = $(this).find('td:eq(2)').text().trim();

                    // Convert the text to a float and ensure it's a valid number
                    let amount = parseFloat(amountText);

                    if (!isNaN(amount)) {
                        invoiceTotal += amount;
                    } else {
                        console.log('Invalid amount for this row:', amountText);
                    }
                    // live-env
                    // let amount = parseFloat($(this).find('td:eq(2)').text() || 0); // Assuming the amount is in the 3rd column (0-indexed)
                    // invoiceTotal += amount;
                    // console.log(amount);

                });

                console.log('Total invoice amount:', invoiceTotal);


                // Add the amounts from the invoice_items table
                $('#invoice_items tbody tr').each(function() {
                    let amount = parseFloat($(this).find('td:eq(2)').text() || 0); // Assuming the amount is in the 5th column (0-indexed)
                    invoiceTotal += amount;
                });

                // Parse the loyalty discount percentage
                let loyaltyDiscountPercentage = parseFloat($('#loyalty_invoice').text() || 0);

                // Calculate the discount amount
                let loyaltyDiscountAmount = (invoiceTotal * loyaltyDiscountPercentage) / 100;

                // Subtract the loyalty discount amount from the invoice total
                invoiceTotal -= loyaltyDiscountAmount;




                // Format the total and set it to the invoice_total input field
                $('#invoice_total').val(invoiceTotal.toFixed(2).replace(/\d(?=(\d{3})+\.)/g, '$&,'));





                updateTotal();
                updateBalance();
            }


            const changePackage = (packageId) => {
                if (packageId) {
                    $.ajax({
                        type: "GET",
                        url: '/package/services/' + packageId + '/',
                        headers: {
                            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                        },
                        success: function(data) {
                            if (data.status === 1) {
                                servicesIdArray = data.services;

                                $('#duration').val(data.duration)

                                $('#services').val(null).trigger('change');
                                servicesIdArray.forEach(serviceId => {
                                    $('#services option[value="' + serviceId + '"]').prop(
                                        'selected', true);
                                });
                                $('#services').trigger('change');
                            }
                        }
                    });
                } else {
                    servicesIdArray = [];
                    $('#services').val(null).trigger('change');
                }
            }

            $('body').on('mouseenter', '.appointment-div', function() {
                const contentWidth = $(this).children().outerWidth();
                const contentHeight = $(this).children().outerHeight();

                const containerWidth = $(this).width();
                const containerHeight = $(this).height();



                if (contentWidth > containerWidth || contentHeight > containerHeight) {
                    $(this).css('height', 'fit-content');
                }
            });

            $('body').on('mouseleave', '.appointment-div', function() {
                $(this).css('height', '');
            });

            const formatDate = (date) => {
                const currentDatetime = new Date(date);
                const offset = currentDatetime.getTimezoneOffset();
                const offsetMilliseconds = offset * 60 * 1000;
                const localDatetime = new Date(currentDatetime.getTime() - offsetMilliseconds);
                const formattedDate = localDatetime.toISOString().slice(0, 10);

                return formattedDate;
            }

            $('#date').on('change', function() {
                getAppointments(formatDate($(this).val()))
            })

            function roundToNearestEven(number) {
                return Math.round(number / 2) * 2;
            }

            $('.employee-table').on('click', function(event) {
                let check_date = $('#date').val();

                // Get today's date
                let today = new Date();
                today.setHours(0, 0, 0, 0); // Set hours, minutes, seconds, and milliseconds to 0

                // Convert check_date string to Date object
                let checkDateObj = new Date(check_date);
                checkDateObj.setHours(0, 0, 0, 0); // Set hours, minutes, seconds, and milliseconds to 0

                // Compare check_date with today's date
                if (checkDateObj < today) {
                    // If check_date is before today, do not show the modal
                    return;
                }

                $("#appointment_add").modal('show');

                const theadHeight = 50;
                const yPositionRelativeToTable = roundToNearestEven(event.clientY + window.scrollY - $(this).offset().top - theadHeight);
                const employeeId = $(this).data('employee')
                const minutePerPixel = 0.5;
                const totalMinutes = minutePerPixel * yPositionRelativeToTable;
                const hours = 8 + Math.floor(totalMinutes / 60);
                const minutes = totalMinutes % 60;
                const formattedhours = (hours < 10) ? `0${hours}` : hours;
                const formattedMinutes = (minutes < 10) ? `0${minutes}` : minutes;
                const date = formatDate($('#date').val());
                const dateTime = `${date}T${formattedhours}:${formattedMinutes}`

                $('#employee').val(employeeId);
                $('#employee').trigger('change');

                // Get the selected option's text from the dropdown with id 'employee'
                let emp_name = $('#employee option:selected').text();

                // Set the text to the 'slote_name' span
                $('#slote_name').text(emp_name + "'s Time Slot");

                $('#modal_date').val(dateTime);
            });


            const updateServicesUpdateTable = () => {

                $('#services_update_table tbody').empty();
                const dateTimeString = $('#modal_date_update').val();
                let time = dateTimeString.split('T')[1];
                const datePart = dateTimeString.split('T')[0];



                appointmentServicesUpdate.forEach(function(service, index) {
                    let row = $('<tr data-id="' + service.Services_idServices + '">');
                    row.append($('<td>').text(index + 1));
                    row.append($('<td>').text(service.Service_Description));

                    let priceInput = $(
                        '<input type="text" class="form-control" style="width: 100%;">')
                        .val(service.Amount)
                        .on('keyup', function() {
                            const newPrice = parseFloat($(this).val()) || 0.00;
                            const serviceId = parseInt(row.attr('data-id'));

                            appointmentServicesUpdate = appointmentServicesUpdate.map((
                                service) => {
                                if (parseInt(service.Services_idServices) ===
                                    serviceId) {
                                    return {
                                        ...service,
                                        Amount: newPrice
                                    };
                                }
                                return service;
                            });
                            updateServiceAmountOnUpdate()
                        });
                    row.append($('<td>').append(priceInput));

                    let selectEmployee = $(
                        '<select class="form-control select2bs4" style="width: 100%;">');
                    let employeeOption = '';

                    @foreach ($employees as $employee)
                        employeeOption = $(
                        '<option value="{{ $employee->idEmployee }}">{{ $employee->Full_Name }}</option>'
                    );
                    if ({{ $employee->idEmployee }} == service.Employee_idEmployee) {
                        employeeOption.attr('selected', 'selected');
                    }
                    selectEmployee.append(employeeOption);
                    @endforeach

                    selectEmployee.on('change', function() {
                        const newEmployeeId = $(this).val();
                        const serviceId = row.attr('data-id');

                        appointmentServicesUpdate = appointmentServicesUpdate.map((service) => {
                            if (service.Services_idServices === serviceId) {
                                return {
                                    ...service,
                                    Employee_idEmployee: newEmployeeId
                                };
                            }
                            return service;
                        });
                    });




                    const durationString = service.duration; // assuming service.duration is "60 MINS"
                    const durationTime = parseInt(durationString.split(' ')[0]);

                    // Create a new Date object for each service based on the current time
                    const dateTime = new Date(datePart + 'T' + time);

                    // Add the duration to the Date object
                    dateTime.setMinutes(dateTime.getMinutes() + durationTime);

                    // Extract the new time part
                    const updatedHours = String(dateTime.getHours()).padStart(2, '0');
                    const updatedMinutes = String(dateTime.getMinutes()).padStart(2, '0');
                    const updatedTime = updatedHours + ':' + updatedMinutes;

                    appointmentServicesUpdate = appointmentServicesUpdate.map((service) => {
                        const serviceId = row.attr('data-id');
                        if (service.Services_idServices === serviceId) {
                            return {
                                ...service,
                                time: time + " - " + updatedTime,
                            };
                        }
                        return service;
                    });



                    row.append($('<td>').append(durationTime+" MINS"));
                    row.append($('<td>').text(time + " - " + updatedTime));
                    row.append($('<td>').append(selectEmployee));

                    time = updatedTime;


                    $('#services_update_table tbody').append(row);
                });
            }

            function updateServiceAmountOnUpdate(serviceId, newAmount) {
                let total = 0;
                appointmentServicesUpdate.forEach(service => {
                    total = (total + (parseFloat(service.Amount) || 0))
                })

                const formattedTotal = total.toLocaleString('en-US', {
                    minimumFractionDigits: 2,
                    maximumFractionDigits: 2
                });

                $('#update_total').text(formattedTotal);
            }

            $('body').on('click', '.appointment-div', function() {
                const status = $(this).data('status');
                const appointmentId = $(this).data('id');
                appointment_id=appointmentId;



                $.ajax({
                    type: "GET",
                    url: "/appointment/check/" + appointment_id,
                    headers: {
                        "X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr("content"),
                    },
                    success: function (data) {
                        var tbody = $('#invoice_items tbody');
                        tbody.empty(); // Clear existing rows
                        var loyalty = data.customer;
                        let loyaltyPoints=0;

                        let loyaltyDiscount='0';
                        if (loyaltyPoints >= 100) {
                            if (loyaltyPoints < 500) {
                                loyaltyDiscount = '5';
                            } else if (loyaltyPoints < 1000) {
                                loyaltyDiscount = '7.5';
                            } else {
                                loyaltyDiscount = '10';
                            }
                            console.log(loyaltyDiscount);
                            $('#loyalty_invoice').text(loyaltyDiscount);
                        } else {
                            $('#loyalty_invoice').text('0');

                        }
                        // Check if data and items are available
                        if (data && data.item && data.item.length > 0) {
                            var invoice = data.item[0];

                            // Parsing the values to float and then formatting to two decimal places
                            var cardPaid = parseFloat(invoice.Card_Paid || "0").toFixed(2);
                            var cashPaid = parseFloat(invoice.Cash_Paid || "0").toFixed(2);
                            var onlinePaid = parseFloat(invoice.Online_Paid || "0").toFixed(2);
                            var onlineReference = invoice.Online_Reference || "-";

                            // Setting the values to input fields with two decimal places
                            $('#invoice_total').val(parseFloat(invoice.Total_Amount).toFixed(2));
                            $('#card_paid').val(cardPaid);
                            $('#cash_paid').val(cashPaid);
                            $('#online_paid').val(onlinePaid);
                            $('#invoice_discount').val(invoice.Bill_Discount);
                            $('#online_reference').val(onlineReference);

                            // Populate the table
                            var itemDetails = data.item_details;

                            itemDetails.forEach(function(item, index) {
                                var itemName = item.Description; // Replace with actual item name logic
                                var row = `<tr>
                    <td>${index + 1}</td>
                    <td>${itemName}</td>
                    <td>${item.Rate}</td>
                    <td>${item.Qty}</td>
                    <td>${item.Total_Amount}</td>
                </tr>`;
                                tbody.append(row);
                            });

                            $('#advance_paid').val(data.advance_payment);
                            updateInvoiceTotal();

                        } else {
                            $('#advance_paid').val(data.advance_payment);
                            updateInvoiceTotal();
                            tbody.empty(); // Ensure table is cleared if no data
                            $('#card_paid').val('');
                            $('#cash_paid').val('');
                            $('#online_paid').val('');
                            $('#invoice_discount').val('0');
                            $('#online_reference').val('');
                        }
                    },
                    error: function (jqXHR, textStatus, errorThrown) {
                        var tbody = $('#invoice_items tbody');
                        $('#advance_paid').val('0.00');
                        tbody.empty();
                        $('#card_paid').val('');
                        $('#cash_paid').val('');
                        $('#online_paid').val('');
                        $('#invoice_discount').val('0');
                        $('#online_reference').val('');
                    }
                });





                if (status === 'complete') {} else if (status === 'confirm') {
                    $('#button_section').show()
                    $('#confirm_button').hide()
                    $('#arrived_button').show()
                } else if (status === 'arrived') {
                    $('#button_section').show()
                    $('#arrived_button').hide()
                    $('#confirm_button').hide()
                } else {
                    $('#button_section').show()
                    $('#confirm_button').show()
                    $('#arrived_button').show()
                }
                $("#balance").val("0.00")
                $('#card_paid').val("");
                $('#cash_paid').val("");
                $('#online_paid').val("");
                $('#online_reference').val("");
                $('#invoice_discount').val("0");
                $("#save_button").text("Save Invoice");
                if (status === "complete") {
                    //janith sameera
                    $("#invoice").modal('show');
                    $("#print_recepts").show();
                    $("#confirm_button").hide();
                    $("#arrived_button").hide();
                    $("#cancel_apploint").hide();
                    $("#noshow_button").hide();
                    $("#save_button").text("Update Invoice");
                    // $("#update_appointment_btn").hide();



                    $.ajax({
                        type: "GET",
                        url: "/appointment/check/" + appointment_id,
                        headers: {
                            "X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr("content"),
                        },
                        success: function (data) {
                            // Assuming data contains the structure as provided
                            if (data && data.item && data.item.length > 0) {
                                var invoice = data.item[0];

                                // Parsing the values to float and then formatting to two decimal places
                                var cardPaid = parseFloat(invoice.Card_Paid || "0").toFixed(2);
                                var cashPaid = parseFloat(invoice.Cash_Paid || "0").toFixed(2);
                                var onlinePaid = parseFloat(invoice.Online_Paid || "0").toFixed(2);
                                var onlineReference = invoice.Online_Reference || "-";

                                // Setting the values to input fields with two decimal places
                                $('#card_paid').val(cardPaid);
                                $('#cash_paid').val(cashPaid);
                                $('#online_paid').val(onlinePaid);
                                $('#invoice_discount').val(invoice.Bill_Discount);
                                $('#online_reference').val(onlineReference);
                            } else {
                                console.error('Invalid data structure:', data);
                            }
                        },
                        error: function (jqXHR, textStatus, errorThrown) {
                            console.error('Error fetching data:', textStatus, errorThrown);
                        }
                    });

                } else {
                    $("#confirm_button").show();
                    $("#arrived_button").show();
                    $("#cancel_apploint").show();
                    $("#noshow_button").show();
                    $("#save_button").show();
                    $("#print_recepts").hide();
                    $("#update_appointment_btn").show();
                    $("#invoice").modal('show');
                }
                // const employeeId = $(this).data('employee');
                // alert(employeeId);
                const dateTime = $(this).data('datetime');
                const duration = $(this).data('duration');
                let total = $(this).data('total');
                invoiceServices = $(this).data('services');
                appointmentServicesUpdate = $(this).data('services');
                let formattedTotal = total.toLocaleString('en-US', {
                    minimumFractionDigits: 2,
                    maximumFractionDigits: 2
                });
                let balance = (-1 * total).toLocaleString('en-US', {
                    minimumFractionDigits: 2,
                    maximumFractionDigits: 2
                });

                $('#invoice_services tbody').empty();
                invoiceServices.forEach(function(service, index) {
                    let row = $('<tr data-id="' + service.Services_idServices + '">');
                    row.append($('<td>').text(index + 1));
                    row.append($('<td>').text(service.Service_Description));

                    if (service.Amount === "0.00") {
                        // Create an input field for the "Amount" cell
                        let amountInput = $('<input class="form-control" type="text" value="' +
                            service
                                .Amount + '">');
                        // Add an event listener to update the service amount in the array when the user changes it
                        amountInput.on('keyup', function() {
                            updateServiceAmount(service.Services_idServices, $(this).val());
                        });

                        row.append($('<td>').append(amountInput));
                    } else {
                        row.append($('<td>').text(service.Amount));
                    }

                    let selectEmployee = $(
                        '<select class="form-control select2bs4" style="width: 100%;">');
                    let employeeOption = '';

                    @foreach ($employees as $employee)
                        employeeOption = $(
                        '<option value="{{ $employee->idEmployee }}">{{ $employee->Full_Name }}</option>'
                    );
                    if ({{ $employee->idEmployee }} == service.Employee_idEmployee) {
                        employeeOption.attr('selected', 'selected');
                    }
                    selectEmployee.append(employeeOption);
                    @endforeach

                    selectEmployee.on('change', function() {
                        const newEmployeeId = $(this).val();
                        const serviceId = parseInt(row.attr('data-id'));

                        invoiceServices = invoiceServices.map((service) => {
                            if (parseInt(service.Services_idServices) ===
                                serviceId) {
                                return {
                                    ...service,
                                    Employee_idEmployee: newEmployeeId
                                };
                            }
                            return service;
                        });
                    });

                    row.append($('<td>').append(selectEmployee));

                    $('#invoice_services tbody').append(row);
                });


                // Function to update the service amount in the array
                function updateServiceAmount(serviceId, newAmount) {
                    // Find the corresponding service in the array and update the amount
                    let serviceToUpdate = invoiceServices.find(service => service.Services_idServices ===
                        serviceId);
                    if (serviceToUpdate) {
                        serviceToUpdate.Amount = newAmount;
                    }

                    total = 0;
                    invoiceServices.forEach(service => {
                        total = (total + (parseFloat(service.Amount) || 0))
                        formattedTotal = total.toLocaleString('en-US', {
                            minimumFractionDigits: 2,
                            maximumFractionDigits: 2
                        });
                        balance = (-1 * total).toLocaleString('en-US', {
                            minimumFractionDigits: 2,
                            maximumFractionDigits: 2
                        });
                    })

                    // $('#invoice_total').val(formattedTotal);
                    $('#invoice_net').val(formattedTotal);
                    $('#balance').val(balance);
                }

                // $('#invoice_total').val(formattedTotal);
                updateInvoiceTotal();
                let invoice_total= $('#invoice_total').val();
                $('#invoice_net').val(invoice_total);
                // $('#balance').val(balance);
                $('#appointmentId').val(appointmentId);
                $('#modal_date_update').val(dateTime);
                $('#duration_update').val(duration);

                $('#services_update').val(null).trigger('change');
                invoiceServices.forEach(service => {
                    $('#services_update option[value="' + service.Services_idServices + '"]').prop(
                        'selected', true);
                });
                $('#services_update').trigger('change');
            });

            $('#invoice_total').on('keyup', function() {
                updateTotal();
                updateBalance();
            });

            const updateTotal = () => {
                const totalFormatted = $('#invoice_total').val().replace(/,/g, '');
                const total = parseFloat(totalFormatted);

                let discount = parseInt($('#invoice_discount').val());

                if (isNaN(discount) || discount > 100) {
                    discount = 0;
                }

                if (!isNaN(total) && !isNaN(discount)) {
                    const net = total * (100 - discount) / 100;
                    const formattedNet = net.toLocaleString('en-US', {
                        minimumFractionDigits: 2,
                        maximumFractionDigits: 2
                    });
                    $('#invoice_net').val(formattedNet);
                } else {
                    $('#invoice_net').val('');
                }
            }

            $('#invoice_discount').on('keyup', function() {
                let discount = parseInt($(this).val());

                if (isNaN(discount) || discount > 100) {
                    discount = 0;
                    $(this).val('')
                }

                const totalFormatted = $('#invoice_total').val().replace(/,/g, '');
                const total = parseFloat(totalFormatted);

                if (!isNaN(total) && !isNaN(discount)) {
                    const net = total * (100 - discount) / 100;
                    const formattedNet = net.toLocaleString('en-US', {
                        minimumFractionDigits: 2,
                        maximumFractionDigits: 2
                    });
                    $('#invoice_net').val(formattedNet);
                } else {
                    $('#invoice_net').val('');
                }
            });

            function updateBalance() {
                const totalFormatted = $('#invoice_total').val().replace(/,/g, '');
                const total = parseFloat(totalFormatted);

                let discount = parseInt($('#invoice_discount').val());
                if (isNaN(discount) || discount > 100) {
                    discount = 0;
                }

                let cashPaid = parseFloat($('#cash_paid').val()) || 0;
                let cardPaid = parseFloat($('#card_paid').val()) || 0;
                let onlinePaid = parseFloat($('#online_paid').val()) || 0;
                let advance = parseFloat($('#advance_paid').val()) || 0;

// Calculate net amount after discount
                const net = total * (100 - discount) / 100;

// Calculate balance
                let balance = net - cashPaid - cardPaid - onlinePaid - advance;

// Format balance to 2 decimal places
                const formattedBalance = (balance === -0 ? 0 : balance).toLocaleString('en-US', {
                    minimumFractionDigits: 2,
                    maximumFractionDigits: 2
                });

                $('#balance').val(formattedBalance);

            }

            $('#invoice_discount, #cash_paid, #card_paid, #online_paid').on('keyup', function() {
                updateBalance()
            });


            // const formatTime = (timeString) => {
            //     const timeArray = timeString.split(':');
            //     const hours = parseInt(timeArray[0]);
            //     const minutes = parseInt(timeArray[1]);
            //
            //     const ampm = hours >= 12 ? 'PM' : 'AM';
            //     const formattedHours = hours % 12 || 12; // Handle midnight
            //     const formattedMinutes = minutes < 10 ? '0' + minutes : minutes;
            //
            //     return formattedHours + ':' + formattedMinutes + ' ' + ampm;
            // }

//             const getAppointments = (date) => {
//                 $.ajax({
//                     type: "GET",
//                     url: "/appointments/byDate/" + date,
//                     headers: {
//                         "X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr("content"),
//                     },
//                     success: function(data) {
//
//
//
//                         $(".appointment-div").remove();
//                         data.employees.forEach((employee) => {
//                             employee.appointments.forEach(appointment => {
//
//                                 appointment.services.forEach(service => {
//
//                                     const startTimeArray = service.Start_time.split(':');
//                                     const endTimeArray = service.End_time.split(':');
//
//                                     const startMinute = (parseInt(startTimeArray[0]) -
//                                         8) * 60 + parseInt(startTimeArray[1]);
//                                     const endMinute = (parseInt(endTimeArray[0]) - 8) *
//                                         60 +
//                                         parseInt(endTimeArray[1]);
//
//                                     const perMinutepixel = (30 / 15)
//                                     const topValue = perMinutepixel * startMinute + 50;
//                                     const bottomValue = (30 * 56) - (perMinutepixel *
//                                         endMinute);
//
//                                     const serviceNames = [];
//
//
//
//                                     const serviceName = service
//                                         .Service_Description;
//                                     serviceNames.push(serviceName);
//
//
//                                     const serviceNamesString = serviceNames.join(', ');
//
//
//
//                                     const Start_time = appointment.Time;
//                                     const End_time = appointment.EndTime;
//                                     const appointmentDate = appointment.Date; // This is the date from your appointment data
//
// // Get the current date
//                                     const currentDate = new Date();
//                                     const formattedCurrentDate = currentDate.toISOString().split('T')[0]; // Format to 'YYYY-MM-DD'
//
//                                     if (appointmentDate !== formattedCurrentDate) {
//                                         // Get the current time
//                                         const currentTime = new Date();
//                                         currentTime.setHours(10, 10, 0, 0); // Sets the time to 10:00 AM
//
//                                         // Parse the Start_time string into a Date object
//                                         const [startHour, startMinutes] = Start_time.split(':').map(Number);
//                                         const startTime = new Date();
//                                         startTime.setHours(startHour, startMinutes, 0, 0); // Setting hours, minutes, seconds, and milliseconds
//
//                                         // Parse the End_time string into a Date object
//                                         const [endHour, endMinutes] = End_time.split(':').map(Number);
//                                         const endTime = new Date();
//                                         endTime.setHours(endHour, endMinutes, 0, 0); // Setting hours, minutes, seconds, and milliseconds
//
//                                         // Compare the current time with the End_time
//                                         if (appointment.Appointment_Status === "pending") {
//                                             if (currentTime > endTime) {
//                                                 console.log("hai");
//                                                 appointment.Appointment_Status = "late";
//                                             } else if (currentTime <= endTime && currentTime >= startTime) {
//                                                 console.log("now");
//                                                 appointment.Appointment_Status = "now";
//                                             }
//                                             console.log(appointment.Appointment_Status);
//                                         }
//                                     }
//
//
//
//                                     const background = appointment
//                                         .Appointment_Status === "complete" ?
//                                         "#28a745" :
//                                         appointment.Appointment_Status === "pending" ?
//                                             "#007bff" :
//                                             appointment.Appointment_Status === "cancel" ?
//                                                 "#dc3545" :
//                                                 appointment.Appointment_Status === "now" ?
//                                                     "#b1bd38" :
//                                                     appointment.Appointment_Status === "late" ?
//                                                         "#f67878" :
//                                                 appointment.Appointment_Status === "confirm" ?
//                                                     "#ffc107" : "#17a2b8";
//
//                                     const appointmentDiv = $('<div>').attr({
//                                         'data-id': appointment.idAppointment,
//                                         'data-datetime': appointment.Date +
//                                             "T" + appointment.Time,
//                                         'data-status': appointment
//                                             .Appointment_Status,
//                                         'data-total': appointment
//                                             .Package_Amount,
//                                         'data-duration': appointment
//                                             .Duration,
//                                         'data-services': JSON.stringify(
//                                             appointment.services),
//                                         'class': 'flex-grow-1 position-absolute appointment-div',
//                                         'style': `background: ${background}; color: white; left: 15px; right: 15px; top: ${topValue}px; bottom: ${bottomValue}px; padding: 15px; border-radius : 5px; overflow: hidden; cursor: pointer;`
//                                     }).html('' +
//                                         `<div class="detail-item">${appointment.customers.Full_Name} (${appointment.customers.Contact_No})</div>
//                                     <div class="detail-item">${formatTime(appointment.Time)} - ${formatTime(appointment.EndTime)}</div>
//                                      <div class="detail-item">${serviceNamesString}</div>`
//                                     );
//
//                                     if (!(appointment.Appointment_Status === "cancel" ||
//                                         appointment.Appointment_Status === "no show"
//                                     )) {
//                                         $('#' + service.Employee_idEmployee).append(
//                                             appointmentDiv);
//                                     }
//                                 })
//
//                             })
//                         })
//                     }
//                 });
//             }

            const getAppointments = (date) => {
                $.ajax({
                    type: "GET",
                    url: "/appointments/byDate/" + date,
                    headers: {
                        "X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr("content"),
                    },
                    success: function(data) {
                        $(".appointment-div").remove(); // Clear previous appointments first

                        data.employees.forEach((employee) => {
                            employee.appointments.forEach(appointment => {
                                appointment.services.forEach(service => {
                                    // Ensure correct time calculation
                                    const startTimeArray = service.Start_time.split(':');
                                    const endTimeArray = service.End_time.split(':');

                                    console.log(service.Start_time);
                                    console.log(service.End_time);

                                    const startMinute = (parseInt(startTimeArray[0]) - 8) * 60 + parseInt(startTimeArray[1]);
                                    const endMinute = (parseInt(endTimeArray[0]) - 8) * 60 + parseInt(endTimeArray[1]);

                                    const perMinutepixel = (30 / 15); // Pixels per minute
                                    const topValue = perMinutepixel * startMinute + 50; // Top position in pixels
                                    const bottomValue = (30 * 56) - (perMinutepixel * endMinute); // Bottom position in pixels

                                    // Update status only for today's date
                                    const currentDate = new Date();
                                    const formattedCurrentDate = currentDate.toISOString().split('T')[0];

                                    if (appointment.Date === formattedCurrentDate) {
                                        const currentTime = new Date();

                                        const [startHour, startMinutes] = appointment.Time.split(':').map(Number);
                                        const startTime = new Date();
                                        startTime.setHours(startHour, startMinutes, 0, 0);

                                        const [endHour, endMinutes] = appointment.EndTime.split(':').map(Number);
                                        const endTime = new Date();
                                        endTime.setHours(endHour, endMinutes, 0, 0);

                                        if (appointment.Appointment_Status === "pending") {
                                            if (currentTime > endTime) {
                                                appointment.Appointment_Status = "late";
                                            } else if (currentTime <= endTime && currentTime >= startTime) {
                                                appointment.Appointment_Status = "now";
                                            }
                                        }
                                    }

                                    // Set background color based on status
                                    const background = appointment.Appointment_Status === "complete" ? "#28a745" :
                                        appointment.Appointment_Status === "pending" ? "#007bff" :
                                            appointment.Appointment_Status === "cancel" ? "#dc3545" :
                                                appointment.Appointment_Status === "now" ? "#b1bd38" :
                                                    appointment.Appointment_Status === "late" ? "#f67878" :
                                                        appointment.Appointment_Status === "confirm" ? "#ffc107" : "#17a2b8";

                                    // Create the appointment div dynamically
                                    const appointmentDiv = $('<div>').attr({
                                        'data-id': appointment.idAppointment,
                                        'data-datetime': appointment.Date + "T" + appointment.Time,
                                        'data-status': appointment.Appointment_Status,
                                        'data-total': appointment.Package_Amount,
                                        'data-duration': appointment.Duration,
                                        'data-services': JSON.stringify(appointment.services),
                                        'class': 'flex-grow-1 position-absolute appointment-div',
                                        'style': `background: ${background}; color: white; left: 15px; right: 15px; top: ${topValue}px; bottom: ${bottomValue}px; padding: 15px; border-radius: 5px; overflow: hidden; cursor: pointer;`
                                    }).html(`
                            <div class="detail-item">${appointment.customers.Full_Name} (${appointment.customers.Contact_No})</div>
                            <div class="detail-item">${formatTime(appointment.Time)} - ${formatTime(appointment.EndTime)}</div>
                            <div class="detail-item">${service.Service_Description}</div>
                        `);

                                    // Append the updated appointment div, only if not canceled or no-show
                                    if (!(appointment.Appointment_Status === "cancel" || appointment.Appointment_Status === "no show")) {
                                        $('#' + service.Employee_idEmployee).append(appointmentDiv);
                                    }
                                });
                            });
                        });
                    }
                });
            };

// Helper function to format time
            const formatTime = (time) => {
                const [hour, minute] = time.split(':');
                return `${hour}:${minute}`;
            }



            const getTodayDate = () => {
                const currentDatetime = new Date();
                const offset = currentDatetime.getTimezoneOffset();
                const offsetMilliseconds = offset * 60 * 1000;
                const localDatetime = new Date(currentDatetime.getTime() - offsetMilliseconds);
                const formattedDate = localDatetime.toISOString().slice(0, 10);

                return formattedDate;
            }


            $('#date').val(getTodayDate());

            getAppointments(getTodayDate());
        })



        function change_time() {
            // Get the date and time from the modal input
            const dateTimeString = $('#modal_date_update').val();
            let time = dateTimeString.split('T')[1];  // Extract time part (HH:mm)
            const datePart = dateTimeString.split('T')[0];  // Extract date part

            // Initialize the starting `dateTime` with the selected date and time
            let dateTime = new Date(datePart + 'T' + time);

            // Select all the rows inside the tbody of the table
            $('#services_update_table tbody tr').each(function() {
                // Current row
                var row = $(this);

                // Find the 5th column (Time) for updating the time range
                var durationCell = row.find('td:nth-child(5)');

                // Get the service duration from the 4th column (e.g., "45 MINS")
                const durationString = row.find('td:nth-child(4)').text(); // Extract the duration text
                const durationTime = parseInt(durationString.split(' ')[0]);  // Extract the numeric duration (e.g., 45)

                // Extract the current start time from the `dateTime` object
                const startHours = String(dateTime.getHours()).padStart(2, '0');
                const startMinutes = String(dateTime.getMinutes()).padStart(2, '0');
                const startTime = startHours + ':' + startMinutes;

                // Add the service duration to the current start time to get the end time
                dateTime.setMinutes(dateTime.getMinutes() + durationTime);

                // Extract the updated end time from the `dateTime` object
                const updatedHours = String(dateTime.getHours()).padStart(2, '0');
                const updatedMinutes = String(dateTime.getMinutes()).padStart(2, '0');
                const updatedTime = updatedHours + ':' + updatedMinutes;

                // Update the 5th column (time range) with the new time range (start time - updated end time)
                durationCell.text(startTime + " - " + updatedTime);

                // Update the `appointmentServicesUpdate` array based on the service ID
                const serviceId = row.attr('data-id'); // Correctly extract the `data-id` from the current row
                appointmentServicesUpdate = appointmentServicesUpdate.map((service) => {
                    if (service.Services_idServices === serviceId) {
                        return {
                            ...service,
                            time: startTime + " - " + updatedTime,
                        };
                    }
                    return service;
                });
            });
        }





        const appointmentSubmit = () => {
            const dateTimeString = $('#modal_date').val();
            const dateTimeObject = new Date(dateTimeString);
            const date = dateTimeObject.toISOString().split('T')[0];
            const options = {
                hour: 'numeric',
                minute: 'numeric',
                hour12: false
            };
            const time = dateTimeObject.toLocaleTimeString([], options);
            const customerId = $('#customer').val();
            const employeeId = $('#employee').val();
            const employeeName = $('#employee option:selected').text();
            const packageId = $('#package').val() || 0;
            const duration = $('#duration').val();
            const advance_amount = $('#advance_amount').val();
            const services = selectedServices;
            const endTimeMilliseconds = dateTimeObject.getTime() + duration * 60 * 1000;
            const endTimeObject = new Date(endTimeMilliseconds);
            const endTime = endTimeObject.toLocaleTimeString([], options);
            const total = parseFloat($('#tot_amount_label').text().replace(/,/g, ''));
            const isEmployeeIdInArray = selectedServices.some(service => service.employeeId === employeeId);


            if (dateTimeString === "") {
                Swal.fire(
                    'Error!',
                    'Please select a date and  time !',
                    'error'
                );
            } else if (customerId === "") {
                Swal.fire(
                    'Error!',
                    'Please select a customer !',
                    'error'
                );
            } else if (employeeId === 0) {
                Swal.fire(
                    'Error!',
                    'Please select a employee !',
                    'error'
                );
            } else if (duration === '') {
                Swal.fire(
                    'Error!',
                    'Please add a duration !',
                    'error'
                );
            } else if (services.length === 0) {
                Swal.fire(
                    'Error!',
                    'Please add services !',
                    'error'
                );
            } else {
                Swal.fire({
                    title: 'Are you sure?',
                    text: "Do you want to save this Appointment ?",
                    icon: 'warning',
                    showCancelButton: true,
                    confirmButtonColor: '#3085d6',
                    cancelButtonColor: '#d33',
                    confirmButtonText: 'Yes, Save it!'
                }).then((result) => {
                    if (result.isConfirmed) {
                        $.ajax({
                            type: "POST",
                            url: '/appointments',
                            headers: {
                                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                            },
                            data: {
                                date: date,
                                time: time,
                                endTime: endTime,
                                customerId: customerId,
                                employeeId: employeeId,
                                packageId: packageId,
                                duration: duration,
                                services: services,
                                total: total,
                                discount: 0,
                                netAmount: total,
                                advance_amount: advance_amount,
                                paidAmount: 0,
                                balance: 0,
                            },
                            success: function(data) {
                                if(data.available===true){
                                    Swal.fire({
                                        position: 'center',
                                        icon: 'success',
                                        title: 'Successfully saved appointment !',
                                    }).then(function() {
                                        window.location.reload();
                                    });
                                }else{
                                    const msg = data.conflictMessage
                                        || (data.Employee_Name
                                            ? `${data.Employee_Name} is already in another appointment.`
                                            : 'Could not save this appointment.');
                                    Swal.fire('Error!', msg, 'error');
                                }
                            }
                        });
                    }
                })
            }

        }

        const invoicetSubmit = () => {
            const totalAmount = $('#invoice_total').val().replace(/,/g, '');
            const discount = $('#invoice_discount').val().replace(/,/g, '') || 0;
            const netAmount = $('#invoice_net').val().replace(/,/g, '');
            const cardPaid = $('#card_paid').val().replace(/,/g, '') || 0;
            const cashPaid = $('#cash_paid').val().replace(/,/g, '') || 0;
            const onlinePaid = $('#online_paid').val().replace(/,/g, '') || 0;
            const onlineReference = $('#oneline_reference').val();
            let advance_paid = $('#advance_paid').val();
            const loyalty_invoice = $('#invoice_discount').val();
            let balance = $('#balance').val().replace(/,/g, '');
            const services = invoiceServices;
            const appointmentId = JSON.parse($('#appointmentId').val());

            let total = 0;
            let count = 0;

// Loop through each row in the table
            $('#invoice_services tbody tr').each(function() {
                // Get the price from the 3rd column (index 2)
                let price = parseFloat($(this).find('td:eq(2)').text().trim());

                // Increment row count
                count++;

                // Check if the price is a valid number and add it to the total
                if (!isNaN(price)) {
                    total += price;
                }
            });

// Only proceed if there are rows in the table
            if (count > 0) {
                // If the total is 0, show an error using SweetAlert2
                if (total === 0) {
                    Swal.fire({
                        icon: 'error',
                        title: 'Oops...',
                        text: 'Please enter service amount!',
                    });
                    return false;
                }
            }

            console.log('Total amount:', total);

            balance = parseFloat(balance);
            const balance_2 = $('#balance').val();

            if(cardPaid===0 && cashPaid===0 && onlinePaid===0){
                Swal.fire({
                    icon: 'error',
                    title: 'Oops...',
                    text: 'Please enter paid amount !',
                })
            }else if (balance < 0) {
                Swal.fire({
                    icon: 'error',
                    title: 'Oops...',
                    text: 'Please check the credit balance !',
                })
            } else if (balance_2 === "") {
                Swal.fire({
                    icon: 'error',
                    title: 'Oops...',
                    text: 'Please enter paid amount !',
                })
            } else {
                Swal.fire({
                    title: 'Are you sure?',
                    text: "Do you want to save this Invoice ?",
                    icon: 'warning',
                    showCancelButton: true,
                    confirmButtonColor: '#3085d6',
                    cancelButtonColor: '#d33',
                    confirmButtonText: 'Yes, Save it!'
                }).then((result) => {
                    if (result.isConfirmed) {
                        $.ajax({
                            type: "POST",
                            url: '/appointments-invoice',
                            headers: {
                                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                            },
                            data: {
                                totalAmount: totalAmount,
                                discount: discount,
                                netAmount: netAmount,
                                cardPaid: cardPaid,
                                cashPaid: cashPaid,
                                onlinePaid: onlinePaid,
                                onlineReference: onlineReference,
                                balance: balance,
                                services: services,
                                appointmentId: appointmentId,
                                loyalty_invoice:loyalty_invoice,
                                selectedItems: selectedItems
                            },
                            success: function (data) {
                                Swal.fire({
                                    title: "Successfully saved Invoice !",
                                    icon: 'success',
                                    showDenyButton: true,
                                    showCancelButton: false,
                                    confirmButtonText: "Print",
                                    denyButtonText: `Don't Print`
                                }).then((result) => {
                                    if (result.isConfirmed) {
                                        $('#receipt_customer_name').text(data.customerName);
                                        $('#receipt_customer_id').text(data.customerId);
                                        $('#receipt_invoice_id').text(data.invoiceId);
                                        $('#advance_net').text(advance_paid);
                                        $('#receipt_discount_2').text(loyalty_invoice+"%");
                                        advance_paid=parseFloat(advance_paid);
                                        $('#receipt_date').text(new Date(data.date)
                                            .toLocaleDateString());
                                        $('#receipt_total').text(parseFloat(data.total)
                                            .toLocaleString('en-US', {
                                                style: 'currency',
                                                currency: 'USD'
                                            }).replace('$', ''));
                                        // $('#receipt_discount_2').text(parseFloat(data.discount)
                                        //     .toLocaleString('en-US', {
                                        //         style: 'currency',
                                        //         currency: 'USD'
                                        //     }).replace('$', ''));
                                        $('#receipt_net').text(parseFloat(data.net-advance_paid)
                                            .toLocaleString('en-US', {
                                                style: 'currency',
                                                currency: 'USD'
                                            }).replace('$', ''));

                                        $('#receipt_services tbody').empty();
                                        $('#receipt_items tbody').empty();

                                        if (data.services.length === 0) {
                                            $('#receipt_services').hide();
                                        }

                                        if (data.items.length === 0) {
                                            $('#receipt_items').hide();
                                        }

                                        data.services.forEach(function (service, index) {
                                            let row = $('<tr>');
                                            row.append($('<td>').text(index + 1 + ' ' +
                                                service.Service_Description));
                                            row.append($('<td class="text-right">')
                                                .text(parseFloat(service.Amount)
                                                    .toLocaleString('en-US', {
                                                        style: 'currency',
                                                        currency: 'USD'
                                                    }).replace('$', '')));

                                            $('#receipt_services tbody').append(row);
                                        });

                                        data.items.forEach(function (item, index) {
                                            let row = $('<tr>');
                                            row.append($('<td>').text(index + 1 + ' ' +
                                                item.itemName));
                                            row.append($('<td>').text(parseFloat(item
                                                .rate).toLocaleString(
                                                'en-US', {
                                                    style: 'currency',
                                                    currency: 'USD'
                                                }).replace('$', '')));
                                            row.append($('<td>').text(item.qty));
                                            row.append($('<td class="text-right">')
                                                .text(parseFloat(item.total).toLocaleString('en-US', {style: 'currency', currency: 'USD'}).replace('$', '')));

                                            $('#receipt_items tbody').append(row);
                                        });

                                        $('#print-receipt').modal('show');
                                    } else if (result.isDenied) {
                                        window.location.reload();
                                    }
                                });
                            }
                        });
                    }
                })
            }
        }

        const appointmentCancel = () => {
            const appointmentId = JSON.parse($('#appointmentId').val());

            Swal.fire({
                title: 'Are you sure?',
                text: "Do you want to cancel this Appointment ?",
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#3085d6',
                cancelButtonColor: '#d33',
                confirmButtonText: 'Yes, Cancel it!'
            }).then((result) => {
                if (result.isConfirmed) {
                    $.ajax({
                        type: "POST",
                        url: '/appointments-cancel',
                        headers: {
                            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                        },
                        data: {
                            appointmentId: appointmentId
                        },
                        success: function(data) {
                            Swal.fire({
                                position: 'center',
                                icon: 'success',
                                title: 'Successfully change status !',
                            }).then(function() {
                                window.location.reload();
                            });
                        }
                    });
                }
            })
        }

        const appointmentConfirm = () => {
            const appointmentId = JSON.parse($('#appointmentId').val());

            Swal.fire({
                title: 'Are you sure?',
                text: "Do you want to change the status to CONFIRM this Appointment ?",
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#3085d6',
                cancelButtonColor: '#d33',
                confirmButtonText: 'Yes, Change it!'
            }).then((result) => {
                if (result.isConfirmed) {
                    $.ajax({
                        type: "POST",
                        url: '/appointments-confirm',
                        headers: {
                            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                        },
                        data: {
                            appointmentId: appointmentId
                        },
                        success: function(data) {
                            Swal.fire({
                                position: 'center',
                                icon: 'success',
                                title: 'Successfully change status !',
                            }).then(function() {
                                window.location.reload();
                            });
                        }
                    });
                }
            })
        }

        const customerArrived = () => {
            const appointmentId = JSON.parse($('#appointmentId').val());

            Swal.fire({
                title: 'Are you sure?',
                text: "Do you want to change the status to ARRIVED this Appointment ?",
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#3085d6',
                cancelButtonColor: '#d33',
                confirmButtonText: 'Yes, Change it!'
            }).then((result) => {
                if (result.isConfirmed) {
                    $.ajax({
                        type: "POST",
                        url: '/appointments-customer-arrived',
                        headers: {
                            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                        },
                        data: {
                            appointmentId: appointmentId
                        },
                        success: function(data) {
                            Swal.fire({
                                position: 'center',
                                icon: 'success',
                                title: 'Successfully change status !',
                            }).then(function() {
                                window.location.reload();
                            });
                        }
                    });
                }
            })
        }

        const appointmentNoShow = () => {
            const appointmentId = JSON.parse($('#appointmentId').val());

            Swal.fire({
                title: 'Are you sure?',
                text: "Do you want to change the status to No Show this Appointment ?",
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#3085d6',
                cancelButtonColor: '#d33',
                confirmButtonText: 'Yes, Change it!'
            }).then((result) => {
                if (result.isConfirmed) {
                    $.ajax({
                        type: "POST",
                        url: '/appointments-no-show',
                        headers: {
                            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                        },
                        data: {
                            appointmentId: appointmentId
                        },
                        success: function(data) {
                            Swal.fire({
                                position: 'center',
                                icon: 'success',
                                title: 'Successfully change status !',
                            }).then(function() {
                                window.location.reload();
                            });
                        }
                    });
                }
            })
        }

        const validateSubmitCustomer = (event) => {
            event.preventDefault();

            let err = 0;

            let arr = [
                "Full_Name",
                "Tp",
            ];
            err = validatePhoneNumber(err);
            err = check_validate(arr, err);

            if (err == 0) {
                saveCustomer(event);
            } else {
                return false;
            }
        };

        function validatePhoneNumber(err) {
            let checkValue = $("#Tp").val();
            const errorMessage = document.getElementById('error-message');

            if (checkValue.length !== 10 && checkValue.length !== 0) {
                errorMessage.classList.add('error-visible');
                err++;
            } else {
                errorMessage.classList.remove('error-visible');
            }
            return err;
        }

        const saveCustomer = (e) => {
            e.preventDefault();

            const Full_Name = $("#Full_Name").val();
            const First_Name = $("#First_Name").val();
            const Tp = $("#Tp").val();
            const Address = $("#Address").val();
            const Email = $("#Email").val();
            const Password = $("#Password").val();
            const Comment = $("#Comment").val();

            Swal.fire({
                title: "Are you sure?",
                text: "Do you want to save this Customer ?",
                icon: "warning",
                showCancelButton: true,
                confirmButtonColor: "#3085d6",
                cancelButtonColor: "#d33",
                confirmButtonText: "Yes, Save it!",
            }).then((result) => {
                if (result.isConfirmed) {
                    $.ajax({
                        type: "POST",
                        url: "/customers",
                        headers: {
                            "X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr("content"),
                        },
                        data: {
                            Full_Name: Full_Name,
                            First_Name: First_Name,
                            Tp: Tp,
                            Address: Address,
                            Email: Email,
                            Password: Password,
                            Comment: Comment,
                        },
                        success: function(data) {
                            if (data === false) {
                                Swal.fire("Error!", "This Customer is already exist !", "error");
                            } else {
                                Swal.fire({
                                    position: "center",
                                    icon: "success",
                                    title: "Successfully saved !",
                                }).then(function() {
                                    $('#customer_add').modal('hide');
                                    updateCustomerSelect(data.customer);
                                });
                            }
                        },
                    });
                }
            });
        };

        function updateCustomerSelect(customer) {
            let customerSelect = $('#customer');
            var st = customer.Status !== undefined && customer.Status !== null ? parseInt(customer.Status, 10) : 1;
            var pts = customer.Loyalty_Points !== undefined ? customer.Loyalty_Points : (customer.loyalty_points !== undefined ? customer.loyalty_points : 0);
            var name = customer.Full_Name || customer.full_name || '';
            var contact = customer.Contact_No || customer.contact_no || '';
            var cid = customer.idCustomer !== undefined ? customer.idCustomer : customer.id_customer;
            var $opt = $('<option></option>')
                .val(cid)
                .attr('data-status', st)
                .attr('data-points', pts)
                .text(name + ' - ' + contact);
            if (st === 0) {
                $opt.prop('disabled', true);
            }
            customerSelect.append($opt);
            customerSelect.val(cid).trigger('change');
        }

        const appointmentUpdate = () => {

            change_time();
            const services = appointmentServicesUpdate;
            const duration = $('#duration_update').val();
            const appointmentId = JSON.parse($('#appointmentId').val());
            const dateTimeString = $('#modal_date_update').val();
            const dateTimeObject = new Date(dateTimeString);
            const date = dateTimeObject.toISOString().split('T')[0];
            const options = {
                hour: 'numeric',
                minute: 'numeric',
                hour12: false
            };
            const time = dateTimeObject.toLocaleTimeString([], options);
            const endTimeMilliseconds = dateTimeObject.getTime() + duration * 60 * 1000;
            const endTimeObject = new Date(endTimeMilliseconds);
            const endTime = endTimeObject.toLocaleTimeString([], options);
            const total = parseFloat($('#update_total').text().replace(/,/g, ''));

            // main_emp_id
            // services

            console.log(services);
            var isIncluded = false;

            // Iterate through the services array
            $.each(services, function(index, service) {
                console.log(main_emp_id);
                // Check if the service's Employee_idEmployee matches the main_emp_id
                if (service.Employee_idEmployee == main_emp_id) {
                    isIncluded = true;
                    return false; // Break out of the loop if the employee ID is found
                }
            });


            Swal.fire({
                title: 'Are you sure?',
                text: "Do you want to save this Invoice ?",
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#3085d6',
                cancelButtonColor: '#d33',
                confirmButtonText: 'Yes, Update it!'
            }).then((result) => {
                if (result.isConfirmed) {
                    $.ajax({
                        type: "PUT",
                        url: "/appointments/" + appointmentId,
                        headers: {
                            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                        },
                        data: {
                            services: services,
                            duration: duration,
                            date: date,
                            time: time,
                            endTime: endTime,
                            total: total
                        },
                        success: function(data) {
                            if (data.available === false) {
                                Swal.fire(
                                    'Error!',
                                    data.conflictMessage || 'Could not update this appointment.',
                                    'error'
                                );
                                return;
                            }
                            Swal.fire({
                                position: 'center',
                                icon: 'success',
                                title: 'Successfully updated Appointment !',
                            }).then(function() {
                                window.location.reload();
                            });
                        }
                    });
                }
            })

        }



        function print_page_invoice(){
            $("#invoice").modal('hide');
            let advance_paid = $('#advance_paid').val();
            const loyalty_invoice = $('#invoice_discount').val();
            $.ajax({
                type: "GET",
                url: '/invoice/data/' + appointment_id,
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                success: function(data) {

                    $('#receipt_customer_name').text(data.customerName);
                    $('#receipt_customer_id').text(data.customerId);
                    $('#receipt_invoice_id').text(data.invoiceId);
                    $('#advance_net').text(advance_paid);
                    $('#receipt_discount_2').text(loyalty_invoice+"%");
                    advance_paid=parseFloat(advance_paid);
                    $('#receipt_date').text(new Date(data.date)
                        .toLocaleDateString());
                    $('#receipt_total').text(parseFloat(data.total)
                        .toLocaleString('en-US', {
                            style: 'currency',
                            currency: 'USD'
                        }).replace('$', ''));
                    // $('#receipt_discount_2').text(parseFloat(data
                    //     .discount)
                    //     .toLocaleString('en-US', {
                    //         style: 'currency',
                    //         currency: 'USD'
                    //     }).replace('$', ''));
                    $('#receipt_net').text(parseFloat(data.net-advance_paid)
                        .toLocaleString('en-US', {
                            style: 'currency',
                            currency: 'USD'
                        }).replace('$', ''));

                    $('#receipt_services tbody').empty();
                    $('#receipt_items tbody').empty();

                    if (data.services.length === 0) {
                        $('#receipt_services').hide();
                    }

                    if (data.items.length === 0) {
                        $('#receipt_items').hide();
                    }

                    data.services.forEach(function(service, index) {
                        let row = $('<tr>');
                        row.append($('<td>').text(index + 1 +
                            ' ' +
                            service.Service_Description
                        ));
                        row.append($('<td class="text-right">')
                            .text(parseFloat(service.Amount)
                                .toLocaleString('en-US', {
                                    style: 'currency',
                                    currency: 'USD'
                                }).replace('$', '')));

                        $('#receipt_services tbody').append(
                            row);
                    });
                    console.log(data.items);
                    data.items.forEach(function(item, index) {
                        let row = $('<tr>');
                        row.append($('<td>').text(index + 1 +
                            ' ' +
                            item.itemName));
                        row.append($('<td>').text(parseFloat(
                            item.Rate).toLocaleString(
                            'en-US', {
                                style: 'currency',
                                currency: 'USD'
                            }).replace('$', '')));
                        row.append($('<td>').text(item.Qty));
                        row.append($('<td class="text-right">')
                            .text(parseFloat(item.Total_Amount)
                                .toLocaleString('en-US', {
                                    style: 'currency',
                                    currency: 'USD'
                                }).replace('$', '')));

                        $('#receipt_items tbody').append(row);
                    });

                    $('#print-receipt').modal('show');
                    // Swal.fire({
                    //     title: "This Appointment is completed !",
                    //     icon: 'success',
                    //     showDenyButton: true,
                    //     showCancelButton: false,
                    //     confirmButtonText: "Print",
                    //     denyButtonText: `Don't Print`
                    // }).then((result) => {
                    //     if (result.isConfirmed) {
                    //
                    //     } else if (result.isDenied) {}
                    // });
                }
            });
        }
    </script>
@endsection