{{-- Form Modal --}}
<div id="ical-export-modal" class="modal fade" role="dialog">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-body">

                {{-- Title --}}
                <section class="px-3 row justify-content-center align-items-baseline border-bottom" style="border-bottom: 1.5px solid #acb6c1 !important;">
                    <div class="pt-1 pb-2 col-11">
                        <h5 class="mb-0 font-weight-bold harsi-color modal_title text-uppercase"></h5>
                    </div>

                    <div class="pt-1 pb-2 text-center col-1">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close" style="float: none">
                            <span>
                                <img src="{{ asset('icons/close_modal.svg') }}" aria-hidden="true"
                                    style="width: 2.2rem;">
                            </span>
                        </button>
                    </div>
                </section>

                {{-- Basic Data --}}
                <section class="px-3 py-2">

                    {{-- Instructions --}}
                    <p class="mt-2 text-justify text-muted">
                        {!! __('entity_forms')['room']['export_availability_description'] !!}
                    </p>

                    {{-- Table --}}
                    <div class="table-responsive" style="max-height: 44rem; overflow-y: auto;">
                        <table class="table table-striped table-bordered">

                          {{-- Head --}}
                            <thead class="text-center">
                                <tr>
                                    <th width="70%">{{ __('entities')['hotel']['room'] }}</th>
                                    <th>{{ __('entity_fields')['common']['actions'] }}</th>
                                </tr>
                            </thead>

                          {{-- Body --}}
                            <tbody class="text-center" id="ical-export-tbody"></tbody>

                        </table>
                    </div>

                <section>

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

{{-- Scripts --}}
<script>
    $(document).ready(function(){
      // For  Create
        $('#export_ical_availability').click(function(){
            // Title
            $('.modal_title').text("{{ __('entity_forms')['room']['export_availability'] }}");

            // Modal Structure
            $('#ical-export-modal').modal('show');
            $('#ical-export-tbody').empty();

            // Fill Table
            apiGet("{{ route('api.booking-engine.IcalListRooms') }}", function(data) {
              // Controls
                let html = '';

              // Define Structure
                if (data.length) {
                    data.forEach(room => {

                        html += `
                            <tr>
                                <td>
                                    <span class="text-muted">${room.ical_token}</span> -
                                    <span class="fw-semi-bold harsi-color">${room.name}</span>
                                </td>
                                <td>
                                    <div class="d-flex justify-content-center">

                                        {{-- Download --}}
                                        <a
                                            href='${room.ical_link}'
                                            class='mx-1 btn fixed-width btn-success'
                                            title='${translateAndReplace('common_actions.download')}'
                                        >
                                            <i class='fas fa-file-download'></i>
                                        </a>

                                        {{-- Copy Link --}}
                                        <button type="button"
                                            class="mx-1 btn fixed-width btn-secondary copy-ical-link"
                                            data-link="${room.ical_link}"
                                            title="${translateAndReplace('common_actions.copy_link')}"
                                        >
                                            <i class="fas fa-copy"></i>
                                        </button>

                                    </div>
                                </td>
                            </tr>
                        `;
                    });
                } else {
                    html = `
                        <tr><td colspan="2">
                            ${translateAndReplace('data_tables.sEmptyTable')}
                        </td></tr>
                    `;
                }

              // Render Results
                $('#ical-export-tbody').html(html);
            });
        });

      // On Close Modal
        $('#ical-export-modal').on('hide.bs.modal', function () {
            document.activeElement.blur();
        });

      // Copy ICal Link
        $(document).on('click', '.copy-ical-link', function () {
            const link = $(this).data('link');

            navigator.clipboard.writeText(link).then(function () {
                launchSwalToast(
                    "info",
                    "{{ __('common_responses_and_messages')['copied_link'] }}",
                );
            }).catch(function (err) {
                launchSwalToast(
                    "error",
                    "{{ __('common_responses_and_messages')['data_not_loaded'] }}",
                );
            });
        });
    });
</script>