@extends('layouts.app')

@section('styles')
    <link rel="stylesheet" href="{{ asset('assets/css/products/booking.css') }}">

    <style>
        .seperator {
            font-size: 12px;
        }

        @media (max-width: 556px) { 
            .seperator { 
                font-size: 7px;
            }
        }
    </style>
@endsection

@section('title', unserialize($product->meta_title)['meta_title_'.app()->getLocale()])
@section('description', unserialize($product->meta_description)['meta_description_'.app()->getLocale()])
@section('keywords', unserialize($product->meta_keyword)['meta_keyword_'.app()->getLocale()])

@section('content')
<section class="content-section" style="background: #242526;">
    <div class="container">
        <div class="tabs d-flex justify-content-center aling-items-center mb-5">
            <div class="tab active" data-tab="1">
                {{ __('global.date') }}
            </div>

            <div class="tab" data-tab="2">
                {{ __('global.accessories') }}
            </div>

            {{-- <div class="tab" data-tab="3">
                დადასტურება
            </div> --}}
        </div>

        <div class="row">
            <div class="col-lg-8 col-12 content active" data-content="1">
                <div class="booking pb-4">
                    <div class="d-flex align-items-center mx-2 mx-md-5">
                        <div class="date-go-back border">
                            <i class="fa fa-angle-left"></i>
                        </div>
    
                        <div class="booking-title-date text-center py-4 w-100 pr-5 text-white">
                            {{ __('global.choose_date')  }}
                        </div>

                        <div class="booking-title-time text-center py-4 w-100 pr-5 text-white" style="display: none;">
                            {{ __('global.choose_time')  }}
                        </div>
                    </div>
        
                    <div class="booking-calendar mx-md-5 mx-2 py-2 py-md-4">
                        <div class="booking-current-month d-flex justify-content-between mx-3 mx-md-4" data-current-month="{{ now()->month }}" data-current-year="{{ now()->year }}">
                            <div class="pickers-button-icon border prev-month">
                                <i class="fa fa-angle-left"></i>
                            </div>

                            <h5 class="mb-0 mt-2">{{ __('global.' . now()->format('F'))  }}, 2024</h5>

                            <div class="pickers-button-icon border next-month">
                                <i class="fa fa-angle-right"></i>
                            </div>
                        </div>    
        
                        <div class="booking-weekdays d-flex justify-content-around py-3 py-md-4 mx-2 mx-md-1">
                            <h5>{{ __('global.mon') }}</h5>
                            <h5>{{ __('global.tue') }}</h5>
                            <h5>{{ __('global.wed') }}</h5>
                            <h5>{{ __('global.thu') }}</h5>
                            <h5>{{ __('global.fri') }}</h5>
                            <h5>{{ __('global.sat') }}</h5>
                            <h5>{{ __('global.sun') }}</h5>
                        </div>
        
                        <div class="booking-days mx-2 mx-md-1">
                            @foreach($allDays as $dayKey => $day)
                                <div style="display:none;" class="day {{ $day['date'] }} {{ $currentDate }} {{ $day['date'] < $currentDate ? 'disabled' : '' }}"
                                    data-day-month="{{ $day['month_digit'] }}" data-day-index="{{ $day['index'] }}" 
                                    data-day="{{ $day['day_digit'] }}" data-day-name="{{ strtolower($day['day_of_week']) }}">
                                    <div class="day-digit">{{ $day['day_digit'] }}</div>
                                </div>
                            @endforeach
                        </div>
                    </div>

                    <div class="booking-hours text-center mx-2 mx-md-5 py-4" style="display: none;">
                        @foreach($weekArray as $weekKey => $weekDay)
                            @if($product->activeHours)
                                @if($product->activeHours->{ $weekDay.'_start' } == 'full')
                                    @php
                                        $current = \Carbon\Carbon::now();
                                        $roundedMinutes = ceil($current->minute / 30) * 30;

                                        if ($roundedMinutes == 60) {
                                            $current->addHour();
                                            $roundedMinutes = 0;
                                        }

                                        $startTimeToday = $current->setTime($current->hour, $roundedMinutes, 0)->copy()->addHours(3);
                                        $endTimeToday = $startTimeToday->copy()->addHours(17)->addMinutes(30);
                                        $startTime = \Carbon\Carbon::createFromTime(7, 0, 0);
                                        $endTime = $startTime->copy()->addHours(17);
                                        $rang = 1;
                                    @endphp
                                    
                                    <div class="booking-hour" data-end-time="{{ $endTime }}">
                                        @while ($startTime->lessThan($endTime) == 1)
                                            <div class="hour has-next hour-day-class {{ $weekDay }}" data-day-number="" style="display: none;"
                                                data-hour-index="{{ $weekDay }}"
                                                data-time="{{ $startTime->format('H:i') }}"
                                                data-rang="{{ $rang }}">

                                                <div class="hour-digit">
                                                    <p>{{ $startTime->format('H:i') }}</p>
                                                </div>
                                            </div>

                                            @php
                                                $startTime->addMinutes(30);
                                                $rang++;
                                            @endphp
                                        @endwhile

                                        <div class="hour has-next next-hours-set hour-day-class {{ $weekDay }}"
                                                data-day-number="" data-hour-index="{{ $weekDay }}" data-time="{{ $startTime->format('H:i') }}" data-last-rang="{{ $rang }}" style="display: none;"

                                                @if($weekKey + 1 != 7)
                                                    data-next-day-full="{{ $product->activeHours->{ $weekArray[$weekKey + 1].'_start' } == 'full' ? 1 : 0 }}"
                                                @else
                                                    data-next-day-full="{{ $product->activeHours->{ $weekArray[0].'_start' } == 'full' ? 1 : 0 }}"
                                                @endif
                                            >
                                            <div class="hour-digit">
                                                <p><i class="fa fa-fast-forward"></i></p>
                                            </div>
                                        </div>
                                    </div>
                                    
                                    
                                    <div class="booking-hour today" data-end-time="{{ $endTimeToday }}" style="display: none;">
                                        @while ($startTimeToday->lessThan($endTimeToday) == 1)
                                            <div class="hour has-next {{ $weekDay }}" data-day-number="{{ $startTimeToday->format('d') }}" style="display: none;"
                                                data-hour-index="{{ $weekDay }}"
                                                data-time="{{ $startTimeToday->format('H:i') }}"
                                                data-rang="{{ $rang }}">

                                                <div class="hour-digit">
                                                    <p>{{ $startTimeToday->format('H:i') }}</p>

                                                    @if($startTimeToday->format('H:i') == '00:00' || $startTimeToday->format('H:i') == '23:30')
                                                        <p class="seperator">{{ $startTimeToday->format('d-m') }}</p>
                                                    @endif
                                                </div>
                                            </div>

                                            @php
                                                $startTimeToday->addMinutes(30);
                                                $rang++;
                                            @endphp
                                        @endwhile

                                        {{-- <div class="hour has-next next-hours-set" data-hour-index="{{ $weekDay }}" data-time="{{ $startTimeToday->format('H:i') }}" data-last-rang="{{ $rang }}" style="display: none;">
                                            <div class="hour-digit">
                                                <p><i class="fa fa-fast-forward"></i></p>
                                            </div>
                                        </div> --}}
                                    </div>
                                @elseif($product->activeHours->{ $weekDay.'_start' } == null)
                                    <div class="hour text-center" data-hour-index="{{ $weekDay }}" style="display: none; color: #e4e6eb;">
                                        Not Available
                                    </div>
                                @else
                                    <div class="booking-hour" data-end-time="" style="display: none;">
                                        @php
                                            $rang = 1;
                                            $endTimeForActive = '';
                                        @endphp
                                        
                                        @foreach($product->activeHours->activeHoursBlocks as $hourBlock)
                                            @if($weekDay == $hourBlock->day)
                                                <div class="hour {{ $weekDay }}" data-day-number="" data-hour-index="{{ $weekDay }}" data-time="{{ \Carbon\Carbon::parse(substr($hourBlock->block, 0, 5))->format('H:i') }}" data-rang="{{ $rang }}" style="display: none;">
                                                    <div class="hour-digit">
                                                        <p>{{ substr($hourBlock->block, 0, 5) }}</p>
                                                    </div>
                                                </div>

                                                @php
                                                    $rang++;

                                                    $endTimeForActive = \Carbon\Carbon::parse(substr($hourBlock->block, 0, 5))->format('H:i');
                                                @endphp
                                            @endif
                                        @endforeach
                                    </div>

                                    @php
                                        $current = \Carbon\Carbon::now();
                                        $roundedMinutes = ceil($current->minute / 30) * 30;

                                        if ($roundedMinutes == 60) {
                                            $current->addHour();
                                            $roundedMinutes = 0;
                                        }

                                        $startTimeToday = $current->setTime($current->hour, $roundedMinutes, 0)->copy()->addHours(3);
                                        $endTimeToday = \Carbon\Carbon::parse($endTimeForActive)->addMinutes(30);
                                    @endphp

                                    <div class="booking-hour today" data-end-time="" style="display: none;">
                                        @while ($startTimeToday->lessThan($endTimeToday) == 1)
                                            <div class="text-white d-none">
                                                {{ $startTimeToday }}
                                            </div>

                                            <div class="hour has-next" data-day-number="{{ $startTimeToday->format('d') }}" style="display: none;"
                                                data-hour-index="{{ $weekDay }}"
                                                data-time="{{ $startTimeToday->format('H:i') }}"
                                                data-rang="{{ $rang }}">

                                                <div class="hour-digit">
                                                    <p>{{ $startTimeToday->format('H:i') }}</p>
                                                </div>
                                            </div>

                                            @php
                                                $startTimeToday->addMinutes(30);
                                                $rang++;
                                            @endphp
                                        @endwhile
                                    </div>
                                @endif
                            @else
                                <div class="hour text-center" data-hour-index="{{ $weekDay }}" style="display: none; color: #e4e6eb;">
                                    Not Available
                                </div>
                            @endif
                        @endforeach
                    </div>
                </div>
            </div>

            <div class="col-lg-8 col-12 content" data-content="2">
                <div class="card-body h-100">
                    @if(count($product->productAdditional) > 0)
                        <div class="table-responsive">
                            <table class="table table-bordered table-vcenter text-nowrap">
                                <thead>
                                    <tr class="border-top">
                                        <th>{{ __('global.product') }}</th>
                                        <th>{{ __('global.name') }}</th>
                                        <th>{{ __('global.price') }}</th>
                                        <th>{{ __('global.type') }}</th>
                                        <th class="w-150p">{{ __('global.quantity') }}</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach($product->productAdditional as $productAdditional)
                                        <tr>
                                            <td>
                                                <div class="accessory-images">
                                                    @if($productAdditional->additional->image && file_exists(public_path('assets/images/additionals/'.$productAdditional->additional->image)))
                                                        <img src="{{ asset('assets/images/additionals/'.$productAdditional->additional->image) }}" alt="" class="cart-img text-center">
                                                    @else 
                                                        <img src="{{asset('build/assets/images/products/9.jpg')}}" alt="" class="cart-img text-center">
                                                    @endif
                                                </div>
                                            </td>
                                            <td>
                                                {{ unserialize($productAdditional->additional->title)['title_'.app()->getLocale()] }}
                                            </td>
                                            <td class="fw-bold">{{ intval($productAdditional->additional->price) }}₾</td>
                                            <td>
                                                @if($productAdditional->additional->is_hourly)
                                                    <span class="badge bg-primary-transparent">{{ __('global.hourly') }}</span>
                                                @else
                                                    <span class="badge bg-success-transparent">{{ __('global.fixed') }}</span>
                                                @endif
                                            </td>
                                            <td>
                                                <div class="accessories book_area-player_counter active" data-type="{{ $productAdditional->additional->is_hourly }}" data-min="0" data-max="{{ $productAdditional->additional->max }}" data-price="{{ intval($productAdditional->additional->price) }}">
                                                    <input type="number" min="0" step="1" value="0" class="stepper-input-hidden d-none" name="player_count">
                                                    <div class="accessories-visible">
                                                        <button type="button" class="accessories-button accessories-button-minus disabled">
                                                            <i class="fa fa-minus" style="font-size: 14px;"></i>
                                                        </button>
                                                        <div class="accessories-counter-button active" data-additional-id="{{ $productAdditional->additional->id }}">0</div>
                                                        <button type="button" class="accessories-button accessories-button-plus">
                                                            <i class="fa fa-plus" style="font-size: 14px;"></i>
                                                        </button>
                                                    </div>
                                                </div>
                                            </td>
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    @else
                        <div class="d-flex justify-content-center align-items-center h-100">
                            <h1 class="text-white">{{ __('global.no_accessories') }}</h1>
                        </div>
                    @endif
                </div>
            </div>

            <div class="col-lg-4 col-12 my-4 my-lg-0">
                <div class="booking-checkout px-4 py-4">
                    <div class="d-flex justify-content-between align-items-center mb-5">
                        <h5>{{ __('global.date') }}:</h5>
    
                        <p class="mb-0 booking-checkout-date">--/--/----</p>
                    </div>

                    <div class="d-flex justify-content-between align-items-center mb-5">
                        <h5>{{ __('global.time') }}:</h5>
    
                        <p class="mb-0">
                            <span class="booking-checkout-start-time">--:--</span> - <span class="booking-checkout-end-time">--:--</span>
                        </p>
                    </div>

                    <div class="d-flex justify-content-between align-items-center mb-5">
                        <h5>{{ __('global.players') }}:</h5>
    
                        <div class="stepper book_area-player_counter active" data-min="1">
                            <input type="number" min="0" step="1" value="0" class="stepper-input-hidden d-none" name="player_count">
                            <div class="stepper-input-visible">
                                <button type="button" class="stepper-button stepper-button-minus">
                                    <i class="fa fa-minus" style="font-size: 14px;"></i>
                                </button>
                                <div class="stepper-counter-button active">1</div>
                                <button type="button" class="stepper-button stepper-button-plus">
                                    <i class="fa fa-plus" style="font-size: 14px;"></i>
                                </button>
                            </div>
                        </div>
                    </div>

                    <div class="d-flex justify-content-between align-items-center mb-5">
                        <h5>{{ __('global.accessories') }}:</h5>
    
                        <p class="mb-0 booking-checkout-accessories">---₾</p>
                    </div>

                    <div class="d-flex justify-content-between align-items-center mb-4">
                        <h5>{{ __('global.promo') }}:</h5>
    
                        <input type="text" name="" id="" class="form-control promo-input ml-5" disabled>
                    </div>

                    <div class="booking-checkout-end d-flex justify-content-between align-items-center mb-4">
                        <h6 class="mb-2">{{ __('global.price_per_person') }}:</h6>
    
                        <p class="mb-1 booking-checkout-each-player">---₾</p>
                    </div>

                    <div class="d-flex justify-content-between align-items-center">
                        <h2 class="mb-2">{{ __('global.sum') }}:</h2>
    
                        <h2 class="mb-1 booking-checkout-sum">---₾</h2>
                    </div>
                </div>

                <div class="d-flex justify-content-between align-items-center pt-4">
                    <button class="prev-step-button disabled" data-prev="0">{{ __('global.prev') }}</button>
                    <button class="next-step-button" data-next="2">{{ __('global.next') }}</button>
                    <button class="submitable" style="display:none;">{{ __('global.book') }}</button>
                </div>
            </div>

            <input type="hidden" id="hour_price" name="hour_price" value="{{ $product->price + $product->sprenty_price + $product->tax }}">
        </div>

        <form action="{{ route('products.get.venue.confirm') }}" method="post" id="order_form">
            @csrf
            <input type="hidden" name="form_product_id" value="{{ $product->id }}">
            <input type="hidden" name="form_date" id="form_date" value="">
            <input type="hidden" name="form_time_start" id="form_time_start" value="">
            <input type="hidden" name="form_time_end" id="form_time_end" value="">
            <input type="hidden" name="form_players" id="form_players" value="">
            <input type="hidden" name="form_accessories_ids" id="form_accessories_ids" value="">
            <input type="hidden" name="form_accessories_quantity" id="form_accessories_quantity" value="">
            <input type="hidden" name="form_sum_accessories" id="form_sum_accessories" value="">
            <input type="hidden" name="form_sum" id="form_sum" value="">
        </form>
    </div>
</section>

@endsection

@section('scripts')
    @include('pages.products.js.booking')
@endsection