@extends('layout.admin')
@section('head')
    @extends('layout.header')
    @section('header_title', 'Appointments')
@endsection
@section('content')
<style>
    #customer + .select2-container .select2-selection__rendered .customer-select2-blocked {
        color: #991b1b;
        font-weight: 600;
    }
    .select2-customer-blocked-dropdown .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;
    }
    .select2-customer-blocked-dropdown .select2-results__option[aria-disabled="true"] .customer-select2-blocked {
        color: #7f1d1d;
    }
    .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;
    }
</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>

    <section class="content">
        <div class="container-fluid">
            <div class="row">
                <!-- left column -->
                <div class="col-md-7">
                    <!-- jquery validation -->
                    <div class="card">
                        <div class="card-header">
                            <h3 class="card-title">Appointment Details</h3>
                            <div class="text-right">
                                <input type="button" class="btn btn-primary" value="Add Customer" data-toggle="modal"
                                    data-target="#customer_add">
                            </div>
                        </div>
                        <div class="card-body">
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="date">Date</label>
                                        <input type="datetime-local" class="form-control" id="date">
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="exampleInputEmail1">Customer</label>
                                        <select id="customer" class="form-group clear" style="width: 100%;">
                                            <option value=""></option>
                                            @foreach($customers as $customer)
                                            <option 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 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="{{ $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="date">Duration</label>
                                        <input type="number" class="form-control" id="duration">
                                    </div>
                                </div>
                                <div class="col-md-5">
                                    <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 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="{{ $service->Price }}" data-name="{{ $service->Name }}">
                                                {{ $service->Name }}
                                            </option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- /.card -->
                    <div class="card">
                        <div class="card-header">
                            <h3 class="card-title">Services</h3>
                        </div>
                        <div class="card-body">
                            <div class="row" style="height: 310px; overflow-y: auto">
                                <table id="services_table" class="table table-bordered">
                                    <thead>
                                        <tr>
                                            <th>#</th>
                                            <th>Service Name</th>
                                            <th>Employee</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-5">
                    <!-- jquery validation -->
                    <div class="card">
                        <div class="card-header">
                            <h3 class="card-title">Schedule</h3>
                        </div>
                        <div class="card-body">
                            <div class="row" style="height: 686px; overflow-y: auto">
                                <table class="table table-bordered">
                                    <thead>
                                        <tr>
                                            <th scope="col">Time</th>
                                            <th scope="col">Customer - Duration (Employee)</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td>10:00</td>
                                            <td></td>
                                        </tr>
                                        <tr>
                                            <td>10:30</td>
                                            <td></td>
                                        </tr>
                                        <tr>
                                            <td>11:00</td>
                                            <td></td>
                                        </tr>
                                        <tr>
                                            <td>11:30</td>
                                            <td></td>
                                        </tr>
                                        <tr>
                                            <td>12:00</td>
                                            <td></td>
                                        </tr>
                                        <tr>
                                            <td>12:30</td>
                                            <td></td>
                                        </tr>
                                        <tr>
                                            <td>13:00</td>
                                            <td></td>
                                        </tr>
                                        <tr>
                                            <td>13:30</td>
                                            <td></td>
                                        </tr>
                                        <tr>
                                            <td>14:00</td>
                                            <td></td>
                                        </tr>
                                        <tr>
                                            <td>14:30</td>
                                            <td></td>
                                        </tr>
                                        <tr>
                                            <td>15:00</td>
                                            <td></td>
                                        </tr>
                                        <tr>
                                            <td>15:30</td>
                                            <td></td>
                                        </tr>
                                        <tr>
                                            <td>16:00</td>
                                            <td></td>
                                        </tr>
                                        <tr>
                                            <td>16:30</td>
                                            <td></td>
                                        </tr>
                                        <tr>
                                            <td>17:00</td>
                                            <td></td>
                                        </tr>
                                        <tr>
                                            <td>17:30</td>
                                            <td></td>
                                        </tr>
                                        <tr>
                                            <td>18:00</td>
                                            <td></td>
                                        </tr>
                                        <tr>
                                            <td>18:30</td>
                                            <td></td>
                                        </tr>
                                        <tr>
                                            <td>19:00</td>
                                            <td></td>
                                        </tr>
                                        <tr>
                                            <td>19:30</td>
                                            <td></td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                    <!-- /.card -->
                </div>
            </div>
            <!-- /.row -->
        </div>
    </section>

    <section class="content">
        <div class="container-fluid">
            <div class="row">
                <!-- left column -->
                <div class="col-md-12">
                    <!-- jquery validation -->
                    <div class="card card-primary">
                        <div class="card-body">
                            <div class="row">
                                <div class="col-md-6 border pt-3 pl-3 pr-3">
                                    <div class="mb-3 row">
                                        <label for="inputPassword" class="col-sm-3 col-form-label">Total
                                            Amount</label>
                                        <div class="col-sm-9">
                                            <label class="col-sm-3 col-form-label" id="tot_amount_label">0.00</label>
                                        </div>
                                    </div>
                                    <div class="mb-3 row">
                                        <label for="inputPassword" class="col-sm-3 col-form-label">Discount</label>
                                        <div class="col-sm-9">
                                            <input type="text" class="form-control" id="tot_discount">
                                        </div>
                                    </div>
                                    <div class="mb-3 row">
                                        <label for="inputPassword" class="col-sm-3 col-form-label">Net Amount</label>
                                        <div class="col-sm-9">
                                            <label class="col-sm-3 col-form-label" id="net_amount">0.00</label>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-6 border pt-3 pl-3 pr-3">
                                    <div class="mb-3 row">
                                        <label for="paid_amount" class="col-sm-3 col-form-label">Paid Amount</label>
                                        <div class="col-sm-9">
                                            <input type="text" class="form-control" id="paid_amount">
                                        </div>
                                    </div>
                                    <div class="mb-3 row">
                                        <label for="balance" class="col-sm-3 col-form-label">Balance</label>
                                        <div class="col-sm-9">
                                            <label class="col-sm-3 col-form-label" id="balance">0.00</label>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="amount-box right-align float-right mt-3">
                                <button class="btn btn-primary" id="save">Save Appointment</button>
                            </div>
                        </div>
                    </div>
                    <!-- /.card -->
                </div>
            </div>
            <!-- /.row -->
        </div>
    </section>

    <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 Contact Number 01">
                                            </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-6">
                                        <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-12">
                                        <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>
<!-- /.content-wrapper -->
@endsection

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


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

<!-- AdminLTE for demo purposes -->
<script src="../dist/js/demo.js"></script>
<script src="../JS/validate.js"></script>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script>
    $(function () {
        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',
        })
        $('.clear').not('#customer').select2({
            theme: 'bootstrap4',
            placeholder: 'Select...',
            allowClear: true
        })
        $('#customer').select2({
            theme: 'bootstrap4',
            placeholder: 'Select...',
            allowClear: true,
            width: '100%',
            dropdownCssClass: 'select2-customer-blocked-dropdown',
            templateResult: formatCustomerCustomerSelect2,
            templateSelection: formatCustomerCustomerSelect2
        })

        let servicesIdArray = [];

        const currentDatetime = new Date();
        const offset = currentDatetime.getTimezoneOffset();
        const offsetMilliseconds = offset * 60 * 1000;
        const localDatetime = new Date(currentDatetime.getTime() - offsetMilliseconds);
        const formattedDatetime = localDatetime.toISOString().slice(0, 16);
        $('#date').val(formattedDatetime);


        $('#date').on('change', function () {
            getSchedule($('#date').val());
            employeeChcek();
        })

        $('#duration').on('keyup', function () {
            employeeChcek();
        })

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

        const employeeChcek = () => {
            const dateTimeString = $('#date').val();
            const duration = parseInt($('#duration').val());
            const dateTimeObject = new Date(dateTimeString);
            const date = dateTimeObject.toISOString().split('T')[0];
            const endTimeMilliseconds = dateTimeObject.getTime() + duration * 60 * 1000;
            const endTimeObject = new Date(endTimeMilliseconds);
            const options = { hour: 'numeric', minute: 'numeric', hour12: false };
            const time = dateTimeObject.toLocaleTimeString([], options);
            const endTime = endTimeObject.toLocaleTimeString([], options);

            if (dateTimeString != '' && duration) {
                $.ajax({
                    type: "GET",
                    url: "/check/employee/" + date + "/" + time + "/" + endTime,
                    headers: {
                        "X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr("content"),
                    },
                    success: function (data) {
                        const employeeIds = data.employeeIds;

                        const updatedOptions = [];

                        if (data.status === 1) {
                            // Iterate through the existing options
                            $('#employee option').each(function () {
                                const employeeId = $(this).val();

                                // Check if the employeeId is not in the disabled list
                                if (!employeeIds.includes(parseInt(employeeId))) {
                                    // Add the option to the updatedOptions array
                                    updatedOptions.push($(this)[0].outerHTML);
                                }
                            });
                        } else {
                            // If data.status is not 1, display all options
                            $('#employee option').each(function () {
                                updatedOptions.push($(this)[0].outerHTML);
                            });
                        }

                        // Replace the existing options with the updatedOptions
                        $('#employee').html(updatedOptions.join(''));
                    }
                });

                // servicesTableUpdate();
            }
        }

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

            let total = 0;

            if (selectedServicesIds.length < servicesIdArray.length) {
                selectedServicesIds.forEach(serviceId => {
                    const selectedOption = $(`#services option[value='${serviceId}']`);
                    const price = parseFloat(selectedOption.data('price')) || 0;
                    total += price;
                })
            } else {
                total = parseFloat($('#package').find('option:selected').data('price')) || 0;

                selectedServicesIds.forEach(serviceId => {
                    if (!servicesIdArray.includes(parseInt(serviceId))) {
                        const selectedOption = $(`#services option[value='${serviceId}']`);
                        const price = parseFloat(selectedOption.data('price')) || 0;
                        total += price;
                    }
                })
            }

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

            const discount = parseFloat($('#tot_discount').val()) || 0;
            const netAmount = total * (100 - discount) / 100;

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

        })

        $('#tot_discount').on('keyup', function () {
            const total = parseFloat($('#tot_amount_label').text().replace(/,/g, ''));

            const discount = parseFloat($(this).val()) || 0;
            const netAmount = total * (100 - discount) / 100;

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

            const paidAmount = parseFloat($('#paid_amount').val()) || 0;
            const balance = netAmount - paidAmount;

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

        $('#paid_amount').on('keyup', function () {
            const netAmount = parseFloat($('#net_amount').text().replace(/,/g, ''));
            const paidAmount = parseFloat($(this).val()) || 0;

            const balance = netAmount - paidAmount;

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

        $('#save').on('click', function () {
            const dateTimeString = $('#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 packageId = $('#package').val() || 0;
            const duration = $('#duration').val();
            const total = parseFloat($('#tot_amount_label').text().replace(/,/g, ''));
            const discount = parseFloat($('#tot_discount').val()) || 0;
            const netAmount = parseFloat($('#net_amount').text().replace(/,/g, ''));
            const paidAmount = parseFloat($('#paid_amount').val()) || 0;
            const balance = parseFloat($('#balance').text().replace(/,/g, ''));

            const endTimeMilliseconds = dateTimeObject.getTime() + duration * 60 * 1000;
            const endTimeObject = new Date(endTimeMilliseconds);
            const endTime = endTimeObject.toLocaleTimeString([], options);

            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 (selectedServices.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,
                                total: total,
                                discount: discount,
                                netAmount: netAmount,
                                paidAmount: paidAmount,
                                balance: balance,
                                services: selectedServices
                            },
                            success: function (data) {
                                if (data.available === false) {
                                    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');
                                    return;
                                }
                                Swal.fire({
                                    position: 'center',
                                    icon: 'success',
                                    title: 'Successfully saved appointment !',
                                }).then(function () {
                                    window.location.reload();
                                });
                            }
                        });
                    }
                })
            }
        })

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

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

            $('#services_table tbody').empty();

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

                // Remove the textarea input field for description

                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 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 {
                $('#services').val(null).trigger('change');
            }
        }

        const getSchedule = (date) => {
            const formatDate = date.split("T")[0];

            if (formatDate) {
                $.ajax({
                    type: "GET",
                    url: '/appointments/schedule/' + formatDate + '/',
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    },
                    success: function (data) {
                        if (data.status === 1) {
                            populateTable(data.appointments);
                        } else {
                            clearSecondColumn();
                        }
                    }
                });
            }
        }

        function populateTable(appointments) {
            const timeSlotColors = {};

            $('table tbody tr').each(function () {
                const timeSlot = $(this).find('td:first').text();
                const appointmentArray = getAppointmentsForTimeSlot(appointments, timeSlot);

                const secondColumn = $(this).find('td:last').empty();

                if (appointmentArray.length > 0) {
                    appointmentArray.forEach(appointment => {
                        let colorClass = timeSlotColors[appointment.idAppointment];
                        if (!colorClass) {
                            colorClass = getRandomColorClass(appointment);
                            timeSlotColors[appointment.idAppointment] = colorClass;
                        }

                        const duration = parseInt(appointment.Duration);
                        const endTime = addMinutes(timeSlot, duration);

                        secondColumn.append(`<div class="bg-${colorClass}">${getAppointmentDetails(appointment)}<br></div>`);
                    });
                }
            });
        }


        function getAppointmentsForTimeSlot(appointments, timeSlot) {
            return appointments.filter(appointment => {
                const appointmentStartTime = appointment.Time;
                const appointmentEndTime = addMinutes(appointmentStartTime, parseInt(appointment.Duration));
                return isTimeInRange(timeSlot, appointmentStartTime, appointmentEndTime);
            });
        }

        function isTimeInRange(time, startTime, endTime) {
            return time >= startTime && time < endTime;
        }

        function addMinutes(time, minutes) {
            const [hours, originalMinutes] = time.split(':').map(Number);
            const newMinutes = (originalMinutes + minutes) % 60;
            const newHours = hours + Math.floor((originalMinutes + minutes) / 60);
            return `${newHours.toString().padStart(2, '0')}:${newMinutes.toString().padStart(2, '0')}`;
        }

        function getAppointmentDetails(appointment) {
            return `${appointment.Customer_Name} - ${appointment.Duration} minutes (${appointment.Employee_Name})`;
        }

        function getRandomColorClass(appointment) {
            const currentTime = new Date().toLocaleTimeString('en-US', { hour12: false });

            // Compare appointment time with current time
            const isPast = compareTimes(appointment.Time, currentTime) < 0;
            const appointmentEndTime = addMinutes(appointment.Time, parseInt(appointment.Duration));
            const isOngoing = compareTimes(appointment.Time, currentTime) <= 0 && compareTimes(currentTime, appointmentEndTime) <= 0;

            // Assign color based on whether the appointment is in the past, ongoing, or future
            let colorClass = 'success';
            if (isPast) {
                colorClass = 'danger';
            } else if (isOngoing) {
                colorClass = 'primary';
            }

            return colorClass;
        }

        function compareTimes(time1, time2) {
            const [hours1, minutes1] = time1.split(':').map(Number);
            const [hours2, minutes2] = time2.split(':').map(Number);

            if (hours1 !== hours2) {
                return hours1 - hours2;
            }

            return minutes1 - minutes2;
        }

        function clearSecondColumn() {
            $('table tbody tr').each(function () {
                $(this).find('td:last').empty();
            });
        }

        getSchedule($('#date').val());
    })


    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 () {
                                window.location.reload();
                            });
                        }
                    },
                });
            }
        });
    };

</script>

@endsection