@extends('layouts.app')

@section('head')
    <script src="https://cdn.tiny.cloud/1/opnb5tiaxvfkkojbej4xw1cr9h524cvb9aaw2srmg8t13cf9/tinymce/7/tinymce.min.js"
        referrerpolicy="origin"></script>
@endsection

@section('styles')
@endsection

@section('content')
    {{--
        @include('components.alert')
    --}}
    @include('components.notification')

    <main class="min-h-screen p-6">
        <div class="overflow-hidden rounded-lg bg-white shadow-sm">
            <div class="p-2">
                <div class="min-h-screen p-4">
                    {{-- HEADER --}}
                    <div class="mb-6 h-10 flex items-center justify-between">
                        <h1 class="text-heading font-heading text-foreground">Takvim</h1>
                        <div id="selected-count"
                            class="hidden items-center rounded-md bg-stone-100 p-2 pl-4 text-sm font-bold text-stone-600 border border-stone-200">
                        </div>
                        <div class="flex items-center gap-4">
                            <span class="isolate inline-flex rounded-md shadow-xs">
                                <button type="button"
                                    class="relative inline-flex items-center rounded-l-md bg-white px-2 py-2 text-gray-400 ring-1 ring-gray-300 ring-inset hover:bg-gray-50 focus:z-10">
                                    <span class="sr-only">Previous</span>
                                    <svg class="size-5" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"
                                        data-slot="icon">
                                        <path fill-rule="evenodd"
                                            d="M11.78 5.22a.75.75 0 0 1 0 1.06L8.06 10l3.72 3.72a.75.75 0 1 1-1.06 1.06l-4.25-4.25a.75.75 0 0 1 0-1.06l4.25-4.25a.75.75 0 0 1 1.06 0Z"
                                            clip-rule="evenodd" />
                                    </svg>
                                </button>
                                <button type="button"
                                    class="relative -ml-px inline-flex items-center bg-white px-3 py-2 text-sm font-semibold text-gray-900 ring-1 ring-gray-300 ring-inset hover:bg-gray-50 focus:z-10">{{ \Carbon\Carbon::now()->locale('tr')->translatedFormat('F') }}</button>
                                <button type="button"
                                    class="relative -ml-px inline-flex items-center rounded-r-md bg-white px-2 py-2 text-gray-400 ring-1 ring-gray-300 ring-inset hover:bg-gray-50 focus:z-10">
                                    <span class="sr-only">Next</span>
                                    <svg class="size-5" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"
                                        data-slot="icon">
                                        <path fill-rule="evenodd"
                                            d="M8.22 5.22a.75.75 0 0 1 1.06 0l4.25 4.25a.75.75 0 0 1 0 1.06l-4.25 4.25a.75.75 0 0 1-1.06-1.06L11.94 10 8.22 6.28a.75.75 0 0 1 0-1.06Z"
                                            clip-rule="evenodd" />
                                    </svg>
                                </button>
                            </span>
                        </div>
                    </div>
                    {{-- CALENDAR --}}
                    <div class="overflow-x-auto rounded-lg border border-border bg-card">
                        <table class="w-full min-w-[1200px] border-collapse table-fixed">
                            <thead>
                                @php
                                    $datesAndDays = [];
                                    for ($i = -5; $i <= 30; $i++) {
                                        $day = date('d', strtotime("+$i days"));
                                        $dayShortName = date('D', strtotime("+$i days"));
                                        $date = date('Y-m-d', strtotime("+$i days"));
                                        $datesAndDays[] = [
                                            'day' => $day,
                                            'dayShortName' => $dayShortName,
                                            'date' => $date,
                                        ];
                                    }
                                @endphp
                                <tr class="border-b border-border bg-secondary">
                                    <th
                                        class="sticky left-0 z-10 w-48 bg-secondary px-3 text-left text-sm font-semibold text-foreground">
                                    </th>
                                    @foreach ($datesAndDays as $entry)
                                        <th
                                            class="text-left text-stone-500 hover:bg-stone-50 transition-all pl-1 py-1 text-xs
                                    {{ $entry['dayShortName'] == 'Sun' || $entry['dayShortName'] == 'Sat' ? 'bg-stone-100 font-semibold' : 'font-normal' }}
                                    ">{{ $entry['day'] }}<br>{{ $entry['dayShortName'] }}
                                        </th>
                                    @endforeach
                                </tr>
                            </thead>
                            <tbody>
                                @foreach ($products as $product)
                                    <tr class="divide-y divide-gray-100 hover:bg-stone-50 transition-all">
                                        <td class="sticky left-0 z-10 bg-stone-100 px-3">
                                            <div class="flex items-center">
                                                <p class="text-xs text-stone-600">{{ $product->name }} {{ $product->brand }} {{ $product->model }}</p>
                                            </div>
                                        </td>
                                        @foreach ($datesAndDays as $entry)
                                            <td id="selectable"
                                                class="border-r border-gray-100 cursor-pointer h-10
                                            {{ $entry['dayShortName'] == 'Sun' || $entry['dayShortName'] == 'Sat' ? 'bg-stone-50' : '' }}"
                                                data-date="{{ $entry['date'] }}" data-product-id="{{ $product->id }}">
                                                @foreach ($hirings as $hiring)
                                                    @if ($hiring->product_id == $product->id && $hiring->check_in == $entry['date'] && $hiring->status == 'checked-in')
                                                        <div
                                                            class=" p-1.5 h-10 border border-emerald-200 bg-emerald-100 hover:bg-emerald-200 rounded-tl-xl rounded-br-xl text-stone-800 truncate text-xs text-accent-foreground">
                                                            {{ $hiring->name }}</div>
                                                    @elseif($hiring->product_id == $product->id && $hiring->check_in == $entry['date'] && $hiring->status == 'booked')
                                                        <div
                                                            class=" p-1.5 h-10 border border-sky-200 bg-sky-100 hover:bg-sky-200 rounded-tl-xl rounded-br-xl text-stone-800 truncate text-xs text-accent-foreground">
                                                            {{ $hiring->name }}</div>
                                                    @elseif($hiring->product_id == $product->id && $hiring->check_in == $entry['date'] && $hiring->status == 'checked-out')
                                                        <div
                                                            class=" p-1.5 h-10 border border-orange-200 bg-orange-100 hover:bg-orange-200 rounded-tl-xl rounded-br-xl text-stone-800 truncate text-xs text-accent-foreground">
                                                            {{ $hiring->name }}</div>
                                                    @else
                                                        <div></div>
                                                    @endif
                                                @endforeach
                                            </td>
                                        @endforeach
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                    {{-- INFO --}}
                    <div class="mt-4 flex items-center text-xs font-normal text-stone-500 gap-4">
                        <div class="flex items-center gap-2">
                            <div class="w-4 h-4 rounded bg-emerald-100"></div>
                            <span class="">Check-In</span>
                        </div>
                        <div class="flex items-center gap-2">
                            <div class="w-4 h-4 rounded bg-stone-100"></div>
                            <span class="">Blokaj</span>
                        </div>
                        <div class="flex items-center gap-2">
                            <div class="w-4 h-4 rounded bg-orange-100"></div>
                            <span class="">Check-Out</span>
                        </div>
                        <div class="flex items-center gap-2">
                            <div class="w-4 h-4 rounded bg-sky-100"></div>
                            <span class="">Rezervasyon</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </main>
@endsection
<script>
    document.addEventListener('DOMContentLoaded', function() {
        let isMouseDown = false;
        let startCell = null;
        let isSelectionLocked = false;

        function clearSelection() {
            document.querySelectorAll('td.selected').forEach(cell => {
                cell.classList.remove('selected');
            });
            updateSelectedCount();
            isSelectionLocked = false; // Allow new selection after clearing
        }

        function updateSelectedCount() {
            const selectedCount = document.querySelectorAll('td.selected').length;
            const selectedCountElement = document.getElementById('selected-count');
            if (selectedCount > 0) {
                selectedCountElement.textContent = `${selectedCount} GÜN`;
                selectedCountElement.style.display = 'block';

                // ADD hiring BUTTON
                if (!document.getElementById('hiring-button')) {
                    const hiringButton = document.createElement('button');
                    hiringButton.id = 'hiring-button';
                    hiringButton.textContent = 'Kirala';
                    hiringButton.classList.add('ml-4', 'px-2', 'py-1', 'bg-stone-200', 'text-stone-600',
                        'font-normal', 'rounded', 'hover:bg-stone-300', 'transition-all', 'text-sm');
                    hiringButton.addEventListener('click', function() {
                        const selectedCells = document.querySelectorAll('td.selected');
                        const hirings = [];

                        selectedCells.forEach(cell => {
                            const date = cell.getAttribute('data-date');
                            const productId = cell.getAttribute('data-product-id');
                            hirings.push({
                                date,
                                productId
                            });
                        });

                        const queryString = hirings.map(hiring =>
                            `date[]=${hiring.date}&product_id[]=${hiring.productId}`).join('&');
                        const url = `/hiring/create/?${queryString}`;
                        window.location.href = url;
                    });
                    selectedCountElement.appendChild(hiringButton);
                }
                // ADD BLOCK BUTTON
                if (!document.getElementById('block-modal')) {
                    const blockButton = document.createElement('button');
                    blockButton.id = 'block-modal';
                    blockButton.textContent = 'Blokaj';
                    blockButton.classList.add('ml-2', 'px-2', 'py-1', 'bg-stone-200', 'text-stone-600',
                        'font-normal', 'rounded', 'hover:bg-stone-300', 'transition-all', 'text-sm');
                    blockButton.addEventListener('click', function() {
                        // Open modal logic here
                        alert('Modal açıldı!');
                    });
                    selectedCountElement.appendChild(blockButton);
                }
                // ADD CLEAR SELECTION BUTTON
                if (!document.getElementById('clear-selection')) {
                    const clearButton = document.createElement('button');
                    clearButton.id = 'clear-selection';
                    clearButton.textContent = 'Vazgeç';
                    clearButton.classList.add('ml-2', 'px-2', 'py-1', 'bg-stone-200', 'text-stone-600',
                        'font-normal', 'rounded', 'hover:bg-stone-300', 'transition-all', 'text-sm');
                    clearButton.addEventListener('click', clearSelection);
                    selectedCountElement.appendChild(clearButton);
                }

            } else {
                selectedCountElement.style.display = 'none';
                const clearButton = document.getElementById('clear-selection');
                if (clearButton) {
                    clearButton.remove();
                }
            }
        }

        document.querySelectorAll('td#selectable').forEach(cell => {
            cell.addEventListener('mousedown', function(e) {
                if (isSelectionLocked) return;
                isMouseDown = true;
                startCell = e.target;
                if (e.target.classList.contains('selected')) {
                    e.target.classList.remove('selected');
                } else {
                    e.target.classList.add('selected');
                }
                updateSelectedCount();
                e.preventDefault();
            });

            cell.addEventListener('mouseover', function(e) {
                if (isMouseDown && !isSelectionLocked) {
                    let currentCell = e.target;
                    let startCellIndex = startCell.cellIndex;
                    let currentCellIndex = currentCell.cellIndex;

                    let startRow = startCell.parentElement;
                    let currentRow = currentCell.parentElement;

                    if (startRow === currentRow) {
                        let minIndex = Math.min(startCellIndex, currentCellIndex);
                        let maxIndex = Math.max(startCellIndex, currentCellIndex);

                        // Select cells within the new range
                        for (let i = minIndex; i <= maxIndex; i++) {
                            startRow.cells[i].classList.add('selected');
                        }
                        updateSelectedCount();
                    }
                }
            });

            cell.addEventListener('mouseup', function() {
                isMouseDown = false;
                isSelectionLocked = true;
                getSelectedCellsData();
            });
        });

        document.addEventListener('mouseup', function() {
            isMouseDown = false;
        });

        function getSelectedCellsData() {
            const selectedCells = document.querySelectorAll('td.selected');
            selectedCells.forEach(cell => {
                const date = cell.getAttribute('data-date');
                const productId = cell.getAttribute('data-product-id');
                console.log(`Date: ${date}, product ID: ${productId}`);
            });
        }
    });
</script>

@section('scripts')
    <style>
        .selected {
            background-color: #d6d3d1;
        }
    </style>
@endsection