<?php

$pageTitle =
    'Giờ phục vụ - PET SPA';

$pageStyles = [
    'owner.css'
];

$activeOwnerPage =
    'schedule';


$successMessage =
    $_SESSION['flash_success']
    ?? null;

$errorMessage =
    $_SESSION['flash_error']
    ?? null;


unset(
    $_SESSION['flash_success'],
    $_SESSION['flash_error']
);


$names = [
    0 => 'Chủ nhật',
    1 => 'Thứ hai',
    2 => 'Thứ ba',
    3 => 'Thứ tư',
    4 => 'Thứ năm',
    5 => 'Thứ sáu',
    6 => 'Thứ bảy'
];


require BASE_PATH
    . '/app/views/layouts/header.php';

require BASE_PATH
    . '/app/views/layouts/navbar.php';

?>


<main class="owner-area">

<div class="container-fluid">

<div class="row g-4">


<div class="col-xl-2 col-lg-3">

<?php
require BASE_PATH
    . '/app/views/layouts/owner-sidebar.php';
?>

</div>



<section class="col-xl-10 col-lg-9">


    <!-- HEADER -->

    <div class="owner-page-header">

        <div>

            <h1>
                Giờ phục vụ
            </h1>

            <p>
                Thiết lập thời gian Spa nhận lịch
                và các khoảng thời gian tạm ngưng nhận khách.
            </p>

        </div>

    </div>



    <!-- =========================================================
         SUCCESS
    ========================================================== -->

    <?php if ($successMessage): ?>

        <div
            class="alert alert-success alert-dismissible fade show"
            role="alert"
        >

            <i class="bi bi-check-circle-fill me-2"></i>

            <?= htmlspecialchars(
                $successMessage
            ) ?>

            <button
                type="button"
                class="btn-close"
                data-bs-dismiss="alert"
                aria-label="Đóng"
            ></button>

        </div>

    <?php endif; ?>



    <!-- ERROR -->

    <?php if ($errorMessage): ?>

        <div
            class="alert alert-danger alert-dismissible fade show"
            role="alert"
        >

            <i class="bi bi-exclamation-circle-fill me-2"></i>

            <?= htmlspecialchars(
                $errorMessage
            ) ?>

            <button
                type="button"
                class="btn-close"
                data-bs-dismiss="alert"
                aria-label="Đóng"
            ></button>

        </div>

    <?php endif; ?>



    <!-- =========================================================
         GIỜ PHỤC VỤ
    ========================================================== -->

    <section class="owner-card mb-4">

        <div class="mb-4">

            <h2 class="h5 mb-1">
                Lịch phục vụ trong tuần
            </h2>

            <p class="text-muted mb-0">

                Bật “Mở cửa” ở những ngày Spa nhận lịch.
                Ngày đóng cửa sẽ không cho khách đặt lịch.

            </p>

        </div>


        <form
            method="POST"
            action="<?= BASE_URL ?>/?url=owner/business-hours/update"
            id="businessHoursForm"
        >

            <input
                type="hidden"
                name="_token"
                value="<?= htmlspecialchars(
                    $_SESSION['csrf_token']
                    ?? ''
                ) ?>"
            >


            <div class="table-responsive">

                <table
                    class="table align-middle"
                >

                    <thead>

                        <tr>

                            <th style="width: 20%;">
                                Ngày
                            </th>

                            <th style="width: 18%;">
                                Hoạt động
                            </th>

                            <th>
                                Giờ mở cửa
                            </th>

                            <th>
                                Giờ đóng cửa
                            </th>

                        </tr>

                    </thead>


                    <tbody>


                    <?php foreach ($hours as $item): ?>


                        <?php

                        $day =
                            (int) $item[
                                'day_of_week'
                            ];

                        $isOpen =
                            !empty(
                                $item['is_open']
                            );


                        $openTime =
                            !empty(
                                $item['open_time']
                            )
                                ? substr(
                                    (string) $item[
                                        'open_time'
                                    ],
                                    0,
                                    5
                                )
                                : '08:00';


                        $closeTime =
                            !empty(
                                $item['close_time']
                            )
                                ? substr(
                                    (string) $item[
                                        'close_time'
                                    ],
                                    0,
                                    5
                                )
                                : '18:00';

                        ?>


                        <tr
                            class="business-hour-row"
                            data-day="<?= $day ?>"
                        >


                            <!-- NGÀY -->

                            <td>

                                <strong>

                                    <?= htmlspecialchars(
                                        $names[$day]
                                        ?? ''
                                    ) ?>

                                </strong>

                            </td>



                            <!-- MỞ CỬA -->

                            <td>

                                <div
                                    class="form-check form-switch"
                                >

                                    <input
                                        class="
                                            form-check-input
                                            business-open-toggle
                                        "
                                        type="checkbox"
                                        role="switch"
                                        id="openDay<?= $day ?>"
                                        name="hours[<?= $day ?>][is_open]"
                                        value="1"
                                        <?= $isOpen
                                            ? 'checked'
                                            : ''
                                        ?>
                                    >

                                    <label
                                        class="form-check-label"
                                        for="openDay<?= $day ?>"
                                    >

                                        <span
                                            class="business-open-label"
                                        >
                                            <?= $isOpen
                                                ? 'Mở cửa'
                                                : 'Đóng cửa'
                                            ?>
                                        </span>

                                    </label>

                                </div>

                            </td>



                            <!-- OPEN TIME -->

                            <td>

                                <input
                                    class="
                                        form-control
                                        business-time-input
                                    "
                                    type="time"
                                    name="hours[<?= $day ?>][open_time]"
                                    value="<?= htmlspecialchars(
                                        $openTime
                                    ) ?>"
                                    step="300"
                                    <?= !$isOpen
                                        ? 'disabled'
                                        : ''
                                    ?>
                                >

                            </td>



                            <!-- CLOSE TIME -->

                            <td>

                                <input
                                    class="
                                        form-control
                                        business-time-input
                                    "
                                    type="time"
                                    name="hours[<?= $day ?>][close_time]"
                                    value="<?= htmlspecialchars(
                                        $closeTime
                                    ) ?>"
                                    step="300"
                                    <?= !$isOpen
                                        ? 'disabled'
                                        : ''
                                    ?>
                                >

                            </td>


                        </tr>


                    <?php endforeach; ?>


                    </tbody>

                </table>

            </div>



            <div
                class="
                    d-flex
                    justify-content-end
                    mt-3
                "
            >

                <button
                    type="submit"
                    class="btn btn-primary px-4"
                >

                    <i class="bi bi-check-lg me-1"></i>

                    Lưu giờ phục vụ

                </button>

            </div>

        </form>

    </section>



    <!-- =========================================================
         KHÓA LỊCH
    ========================================================== -->

    <section class="owner-card mb-4">

        <h2 class="h5">
            Khóa lịch / Nghỉ tạm thời
        </h2>


        <p class="text-muted">

            Dùng khi Spa nghỉ cả ngày hoặc
            tạm ngưng nhận lịch trong một khung giờ.

        </p>


        <form
            method="POST"
            action="<?= BASE_URL ?>/?url=owner/blocked-slot/store"
            id="blockedSlotForm"
        >

            <input
                type="hidden"
                name="_token"
                value="<?= htmlspecialchars(
                    $_SESSION['csrf_token']
                    ?? ''
                ) ?>"
            >


            <div class="row g-3">


                <div class="col-md-3">

                    <label class="form-label">
                        Ngày *
                    </label>

                    <input
                        class="form-control"
                        type="date"
                        name="blocked_date"
                        min="<?= date('Y-m-d') ?>"
                        required
                    >

                </div>



                <div class="col-md-2">

                    <label class="form-label">
                        Từ giờ
                    </label>

                    <input
                        class="
                            form-control
                            blocked-time
                        "
                        type="time"
                        name="start_time"
                    >

                </div>



                <div class="col-md-2">

                    <label class="form-label">
                        Đến giờ
                    </label>

                    <input
                        class="
                            form-control
                            blocked-time
                        "
                        type="time"
                        name="end_time"
                    >

                </div>



                <div class="col-md-3">

                    <label class="form-label">
                        Lý do
                    </label>

                    <input
                        class="form-control"
                        type="text"
                        name="reason"
                        maxlength="500"
                        placeholder="Ví dụ: Nghỉ lễ"
                    >

                </div>



                <div class="col-md-2">

                    <label class="form-label d-block">
                        Phạm vi
                    </label>


                    <div
                        class="
                            form-check
                            form-switch
                            pt-1
                        "
                    >

                        <input
                            class="form-check-input"
                            type="checkbox"
                            role="switch"
                            name="is_all_day"
                            id="blockAllDay"
                            value="1"
                        >

                        <label
                            class="form-check-label"
                            for="blockAllDay"
                        >
                            Cả ngày
                        </label>

                    </div>

                </div>


            </div>



            <button
                type="submit"
                class="btn btn-outline-danger mt-3"
            >

                <i class="bi bi-calendar-x me-1"></i>

                Khóa lịch

            </button>

        </form>

    </section>



    <!-- =========================================================
         DANH SÁCH KHÓA
    ========================================================== -->

    <section class="owner-card">

        <h2 class="h5">
            Lịch đã khóa
        </h2>


        <div class="table-responsive">

            <table
                class="table align-middle mb-0"
            >

                <thead>

                    <tr>

                        <th>
                            Ngày
                        </th>

                        <th>
                            Khung giờ
                        </th>

                        <th>
                            Lý do
                        </th>

                        <th class="text-end">
                            Thao tác
                        </th>

                    </tr>

                </thead>


                <tbody>


                <?php if (!empty($blocks)): ?>


                    <?php foreach ($blocks as $item): ?>


                        <tr>

                            <td>

                                <?= htmlspecialchars(
                                    date(
                                        'd/m/Y',
                                        strtotime(
                                            $item[
                                                'blocked_date'
                                            ]
                                        )
                                    )
                                ) ?>

                            </td>


                            <td>

                                <?php if (
                                    empty(
                                        $item[
                                            'start_time'
                                        ]
                                    )
                                ): ?>

                                    <span
                                        class="
                                            badge
                                            text-bg-danger
                                        "
                                    >
                                        Cả ngày
                                    </span>

                                <?php else: ?>

                                    <?= htmlspecialchars(
                                        substr(
                                            $item[
                                                'start_time'
                                            ],
                                            0,
                                            5
                                        )
                                    ) ?>

                                    –

                                    <?= htmlspecialchars(
                                        substr(
                                            $item[
                                                'end_time'
                                            ],
                                            0,
                                            5
                                        )
                                    ) ?>

                                <?php endif; ?>

                            </td>


                            <td>

                                <?= htmlspecialchars(
                                    $item['reason']
                                    ?: '—'
                                ) ?>

                            </td>


                            <td class="text-end">

                                <form
                                    method="POST"
                                    action="<?= BASE_URL ?>/?url=owner/blocked-slot/delete"
                                    class="d-inline"
                                    onsubmit="return confirm('Gỡ khóa lịch này?');"
                                >

                                    <input
                                        type="hidden"
                                        name="_token"
                                        value="<?= htmlspecialchars(
                                            $_SESSION[
                                                'csrf_token'
                                            ]
                                            ?? ''
                                        ) ?>"
                                    >

                                    <input
                                        type="hidden"
                                        name="blocked_slot_id"
                                        value="<?= (int) $item[
                                            'id'
                                        ] ?>"
                                    >


                                    <button
                                        type="submit"
                                        class="
                                            btn
                                            btn-sm
                                            btn-outline-danger
                                        "
                                    >
                                        Gỡ
                                    </button>

                                </form>

                            </td>

                        </tr>


                    <?php endforeach; ?>


                <?php else: ?>


                    <tr>

                        <td
                            colspan="4"
                            class="
                                text-center
                                text-muted
                                py-4
                            "
                        >
                            Chưa có lịch nào bị khóa.
                        </td>

                    </tr>


                <?php endif; ?>


                </tbody>

            </table>

        </div>

    </section>


</section>

</div>

</div>

</main>



<script>

document.addEventListener(
    'DOMContentLoaded',
    function () {


        /*
        |--------------------------------------------------------------------------
        | BẬT / TẮT NGÀY LÀM VIỆC
        |--------------------------------------------------------------------------
        */

        document
            .querySelectorAll(
                '.business-hour-row'
            )
            .forEach(
                function (row) {

                    const toggle =
                        row.querySelector(
                            '.business-open-toggle'
                        );


                    const inputs =
                        row.querySelectorAll(
                            '.business-time-input'
                        );


                    const label =
                        row.querySelector(
                            '.business-open-label'
                        );


                    if (!toggle) {
                        return;
                    }


                    function updateRow()
                    {
                        const open =
                            toggle.checked;


                        inputs.forEach(
                            function (input) {

                                input.disabled =
                                    !open;

                            }
                        );


                        if (label) {

                            label.textContent =
                                open
                                    ? 'Mở cửa'
                                    : 'Đóng cửa';

                        }


                        row.classList.toggle(
                            'opacity-50',
                            !open
                        );
                    }


                    toggle.addEventListener(
                        'change',
                        updateRow
                    );


                    updateRow();
                }
            );



        /*
        |--------------------------------------------------------------------------
        | KHÓA CẢ NGÀY
        |--------------------------------------------------------------------------
        */

        const allDay =
            document.getElementById(
                'blockAllDay'
            );


        const blockedTimes =
            document.querySelectorAll(
                '.blocked-time'
            );


        function updateBlockedTimes()
        {
            if (!allDay) {
                return;
            }


            blockedTimes.forEach(
                function (input) {

                    input.disabled =
                        allDay.checked;

                    if (allDay.checked) {
                        input.value = '';
                    }

                }
            );
        }


        allDay?.addEventListener(
            'change',
            updateBlockedTimes
        );


        updateBlockedTimes();

    }
);

</script>


<?php

require BASE_PATH
    . '/app/views/layouts/footer.php';

?>