@extends('tenant.rentals.rentals-tabs')
@php
    $activeTab = 'rentals-events';
@endphp
@section('breadcrumb')
    @include('tenant.layouts.breadcrumb', [
        'items' => [
            __('breadcrumb.rentals') => '/rentals',
            __('breadcrumb.events') => '#',
        ],
    ])
@endsection

@section('style')
    <link rel="stylesheet" href="{{ asset('css/rentals/events.css') }}">
    <link rel="stylesheet" href="{{ asset('css/layouts/custom-tabs.css') }}">
@endsection

@section('sidebar')
    @include('tenant.layouts.sidebar', ['activeItem' => 'rentals.events'])
@endsection

@section('content-field')

    <div>
        <h2 class="mb-4 mt-1 text-center fw-bold" style="color: #1b8bd7;">
            @lang('rentals/events/index.events') <i class="far fa-calendar-alt"></i>
        </h2>

        <div id='calendar'></div>

        <div class="col-12 col-lg-10 col-xl-9 mx-auto my-4">
            <div class="d-flex justify-content-between align-items-center mb-2">
                <h3> @lang('rentals/events/index.events')</h3>

                <div class="d-flex filter-section">
                    <div>
                        <label for="from_date"> @lang('rentals/events/index.from_date') </label>
                        <input type="datetime-local" name="from_date" class="form-control mx-2" style="width: 175px;">
                    </div>

                    <div>
                        <label for="to_date">  @lang('rentals/events/index.to_date')</label>
                        <input type="datetime-local" name="to_date" class="form-control mx-2" style="width: 175px;">
                    </div>
                </div>

                <button class="btn orange-btn" id="addTodayEventBtn"> @lang('rentals/events/index.add_new_event')</button>
            </div>

            <table class="table table-bordered table-striped without-herotable" id="events-table" dir="rtl">
                <thead class="thead-light">
                    <tr>
                        <th scope="col">#</th>
                        <th scope="col">@lang('rentals/events/index.from_date')</th>
                        <th scope="col">@lang('rentals/events/index.to_date')</th>
                        <th scope="col">@lang('rentals/events/index.building')</th>
                        <th scope="col">@lang('rentals/events/index.floor')</th>
                        <th scope="col">@lang('rentals/events/index.shop')</th>
                        <th scope="col">@lang('rentals/events/index.address')</th>
                        <th scope="col">@lang('rentals/events/index.details')</th>
                    </tr>
                </thead>

                <tbody></tbody>
            </table>
        </div>
    </div>
@endsection

@push('script')
    <script>
        let rental_events = @json($rental_events);
        let buildings = @json($buildings);
    </script>

    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    <script src="{{ asset('js/libraries/fullcalendar/index.global.min.js') }}"></script>
    <script src="{{ asset('js/rentals/events.js') }}"></script>
@endpush