{% extends 'doctor/base.html' %}
{% load static %}

{% block header.add_script %}
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
{% endblock %}

{% block sidebar.dashboard %} {% endblock %}
{% block sidebar.patients %} {% endblock %}
{% block sidebar.challenge %} {% endblock %}
{% block sidebar.appointments %} class="active" {% endblock %}


{% block content %}
<div class="content">
    <h1 class="titles">زمان های آزاد خود را وارد کنید</h1>
        <hr>
        <div class="m-5"></div>

        <!-- Days -->
        <div class="days-container">
          <button class="day-btn" data-day="0">شنبه</button>
          <button class="day-btn" data-day="1">یکشنبه</button>
          <button class="day-btn" data-day="2">دوشنبه</button>
          <button class="day-btn" data-day="3">سه شنبه</button>
          <button class="day-btn" data-day="4">چهارشنبه</button>
          <button class="day-btn" data-day="5">پنجشنبه</button>
          <button class="day-btn" data-day="6">جمعه</button>
        </div>

        <!-- Time Slots -->
        <div id="time-slots-container">
          <!-- Time slots will be injected here based on the day selected -->
        </div>
        <div class="m-5"></div>
        <div class="align-items-center">
            <button id="submit-button" class="submit-btn">Submit</button>
        </div>

</div>
            <!-- Show free timetable -->

    <div class="content">
        <h4 class="titles align-items-center">زمان های آزاد</h4>
        <hr>
        <div class="row align-items-center">
            <div class="col-md-10">
                <div class="table-responsive">
                    <table class="table table-border table-striped custom-table datatable mb-0">
                        <thead>
                            <tr>
<!--                                <th>Category</th>-->
                                <th>روز هفته</th>
                                <th>ساعت شروع</th>
                                <th>مدت زمان جلسه</th>
                                <th>وضعیت</th>
                                <th>نام</th>
                                <th>حذف جلسه</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for free in free_times %}
                                <tr>
                                    {% if free.days_of_week == 0 %}
                                        <td>شنبه</td>
                                    {% elif free.days_of_week == 1 %}
                                        <td>یکشنبه</td>
                                    {% elif free.days_of_week == 2 %}
                                        <td>دوشنبه</td>
                                    {% elif free.days_of_week == 3 %}
                                        <td>سه شنبه</td>
                                    {% elif free.days_of_week == 4 %}
                                        <td>چهارشنبه</td>
                                    {% elif free.days_of_week == 5 %}
                                        <td>پنجشنبه</td>
                                    {% elif free.days_of_week == 6 %}
                                        <td>جمعه</td>
                                    {% else %}
                                        <td>مشخص نشده</td>
                                    {% endif %}
                                    <td>{{ free.start_time }}</td>
                                    <td>{{ free.duration }}</td>
                                    {% if free.is_available == 1 %}
                                        <td>خالی است</td>
                                        <td style="background-color: #E3E4E7"></td>
                                    {% elif free.is_available == 0 %}
                                        <td>پر شده است</td>
                                        <td>{{  free.patient  }}</td>
                                    {% elif free.is_available == 2 %}
                                        <td>کنسل شده است</td>
                                        <td style="background-color: #E3E4E7"></td>
                                    {% endif %}
                                    <td><a href="{% url 'panel-doctor-delete-appointment' free.id %}" class="fa fa-trash" style="font-size: 20px; color: red; margin-left: 25px"></a></td>
                                </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>


<style>
      .titles{
        text-align: right;
        font-size: 24px;
        margin-bottom: 10px;
        color: #009A6E;
      }
      body{
        background-color: #e3e4e7;
      }
        .text-center {
            text-align: center;
        }
        .align-items-center {
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .form-time-input {
            width: 100px;
            margin-right: 10px;
        }

        .submit-btn {
            background-color: #009A6E; /* Blue color, you can customize */
            border-color: #009A6E;
            color: #fff; /* Text color */
            border-radius: 10px; /* Rounded corners */
        }
        .submit-btn:hover {
            background-color: #009A6Eda; /* Darker shade of blue */
            color: #fff; /* Text color on hover */
        }

        .submit-btn:focus {
            background-color: #009A6Eda; /* Darker shade of blue */
            color: #fff; /* Text color on hover */
        }
</style>
<style>
    .days-container {
      display: flex;
      justify-content: center;
      margin-bottom: 20px;
    }

    .day-btn {
      margin: 0 10px;
      padding: 10px 20px;
      border: none;
      background-color: #009A6E20;
      color: #009A6E;
      cursor: pointer;
      border-radius: 10px;
      transition: background-color 0.3s ease;
      font-size: 15px;
    }

    .day-btn:active {
      background-color: #009A6E;
      color: white;
      border: none;
    }

    .day-btn.active {
      background-color: #009A6E;
      color: white;
      border: none;
    }

    .day-btn:focus {
      background-color: #009A6E;
      color: white;
      border: none;
    }
    .day-btn:hover {
      background-color: #009A6E;
      color: white;
      border: none;
    }

    .time-slot {
    display: flex;
    align-items: center;
    margin: 5px;
    padding: 10px;
    background-color: #FF990060;
    border-radius: 5px;
    font-size: 15px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }

    #time-slots-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); /* Adjust column width as needed */
    gap: 10px;
    max-width: 900px;
    margin: auto;
    padding: 20px;
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    }

    .submit-time-slots {
      display: flex;
      justify-content: center;
      margin-top: 20px;
    }

    .submit-time-slots button {
      padding: 10px 20px;
      border: none;
      background-color: #009A6E;
      color: white;
      cursor: pointer;
      border-radius: 10px;
      transition: background-color 0.3s ease;
        font-size: 15px;
    }

    .submit-time-slots button:hover {
      background-color: #3737a0;
    }

    .time-slot input[type="checkbox"] {
    margin-right: 10px;
    }

    .time-slot label {
      /* Adjust the font size and padding of the labels */
      font-size: 14px !important;
      padding-left: 5px !important;
    }


</style>
{% endblock %}


{% block script %}
    <script>
        document.addEventListener('DOMContentLoaded', function() {
    const days = document.querySelectorAll('.day-btn');
    days.forEach(day => {
        day.addEventListener('click', function() {
            // Toggle the 'active' class on the clicked day button
            days.forEach(btn => btn.classList.remove('active'));
            this.classList.add('active');
            selectDay(this.getAttribute('data-day'));
        });
    });

    function selectDay(day) {
        const container = document.getElementById('time-slots-container');
        container.innerHTML = ''; // Clear existing time slots

        for (let i = 0; i < 52; i++) { // Adjusted loop for 15-minute intervals
            const hours = 8 + Math.floor(i / 4); // Increment hours every 4 iterations for 15 minutes
            const minutes = (i % 4) * 15; // Calculate minutes for 15-minute intervals

            let nextHours = hours;
            let nextMinutes = minutes + 15;

            if (nextMinutes >= 60) {
                nextHours += 1;
                nextMinutes -= 60;
            }

            const startTime = padTime(hours) + ':' + padTime(minutes);
            const endTime = padTime(nextHours) + ':' + padTime(nextMinutes); // End time is start time + 15 minutes

            const timeSlotLabel = document.createElement('label');
            timeSlotLabel.className = 'time-slot';
            const checkBox = document.createElement('input');
            checkBox.type = 'checkbox';
            checkBox.id = day + startTime.replace(':', '') + '-' + day + endTime.replace(':', '');
            checkBox.value = `${startTime}-${endTime}`;

            const labelText = document.createTextNode(`${startTime} - ${endTime}`);
            timeSlotLabel.appendChild(checkBox);
            timeSlotLabel.appendChild(labelText);
            container.appendChild(timeSlotLabel);
        }
    }

    function padTime(num) {
        return num.toString().padStart(2, '0');
    }

    document.getElementById('submit-button').addEventListener('click', function() {
        const selectedIds = Array.from(document.querySelectorAll('input[type="checkbox"]:checked')).map(checkbox => checkbox.id);
        const csrfToken = '{{ csrf_token }}'; // Assuming you have access to the CSRF token
        const patientId = '{{ patient.id }}'; // Assuming you have access to the patient ID

        const formData = new FormData();
        formData.append('csrfmiddlewaretoken', csrfToken);
        // formData.append('patient_id', patientId);
        formData.append('selectedIds', JSON.stringify(selectedIds));
        console.log(selectedIds);

        fetch('/panel/doctor/submit/free/time/', {
            method: 'POST',
            body: formData,
            headers: {
                // Omit 'Content-Type': 'multipart/form-data' to let the browser set it
                'X-Requested-With': 'XMLHttpRequest' // Optional header to identify AJAX requests
            },
            credentials: 'same-origin' // Include cookies in the request if the domain matches
        })
        .then(response => {
            if (!response.ok) {
                throw new Error('Network response was not ok');
            }
            return response.json();
        })
        .then(data => {
            // Handle success response
            console.log(data);
            $('#successModal').modal('show');
            setTimeout(function () {
                $('#successModal').modal('hide');
            }, 3000);
        })
        .catch(error => {
            // Handle error
            console.error('Error:', error);
        });
        // After submitting the data, delay the refresh by 2 seconds
        setTimeout(function() {
            window.location.reload();
        }, 1000); // 2000 milliseconds = 2 seconds
    });

    // Initially select Saturday's time slots
    selectDay('0');
});


    </script>


    <script src="{% static 'panel/doctor' %}/js/jquery-3.2.1.min.js"></script>
    <script src="{% static 'panel/doctor' %}/js/popper.min.js"></script>
    <script src="{% static 'panel/doctor' %}/js/bootstrap.min.js"></script>
    <script src="{% static 'panel/doctor' %}/js/jquery.slimscroll.js"></script>
    <script src="{% static 'panel/doctor' %}/js/select2.min.js"></script>
    <script src="{% static 'panel/doctor' %}/js/jquery.dataTables.min.js"></script>
    <script src="{% static 'panel/doctor' %}/js/dataTables.bootstrap4.min.js"></script>
    <script src="{% static 'panel/doctor' %}/js/moment.min.js"></script>
    <script src="{% static 'panel/doctor' %}/js/bootstrap-datetimepicker.min.js"></script>
    <script src="{% static 'panel/doctor' %}/js/app.js"></script>
{% endblock %}