@extends('layouts.venue.app')

@section('styles')
    <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet">
    
    <!-- Full Calendar CSS -->
    <link rel="stylesheet" href="{{asset('build/assets/libs/fullcalendar/main.min.css')}}">

    <!-- FlatPickr CSS -->
    <link rel="stylesheet" href="{{asset('build/assets/libs/flatpickr/flatpickr.min.css')}}">

    <style>
        .flatpickr-day.today {
            background-color: #ffffff00 !important;
        }

        .flatpickr-calendar.hasTime {
            width: 150px;
        }
    </style>
@endsection

@section('content')
    <!-- PAGE-HEADER -->
    <div class="page-header d-flex align-items-center justify-content-between border-bottom mb-4">
        <h1 class="page-title">{{ __('global.details') }}</h1>
        <div>
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="{{ route('venue.get.products') }}">{{ __('global.products') }}</a></li>
                <li class="breadcrumb-item active" aria-current="page">{{ __('global.product') }}</li>
            </ol>
        </div> 
    </div>
    <!-- PAGE-HEADER END -->

    <!-- CONTAINER -->
    <div class="main-container container-fluid">
        <div class="row">
            <div class="col-md-12">
                <div class="card">
                    <div class="card-body">
                        <div class="row">
                            <div class="col-xl-12">
                                <div class="">
                                    <div class="row">
                                        <div class="col-12">
                                            <div class="tab-menu-heading">
                                                <div class="tabs-menu1">
                                                    <!-- Tabs -->
                                                    <ul class="nav panel-tabs">
                                                        <li>
                                                            <a href="#pricing" class="d-flex align-items-center active" data-bs-toggle="tab">
                                                                {{ __('global.pricing') }} 
                                                            </a>
                                                        </li>

                                                        <li>
                                                            <a href="#hidden_blocks" class="d-flex align-items-center" data-bs-toggle="tab">
                                                                {{ __('global.hidden_blocks') }} 
                                                            </a>
                                                        </li>

                                                        <li>
                                                            <a href="#calendar" id="calendar-tab-link" class="d-flex align-items-center" data-bs-toggle="tab">
                                                                {{ __('global.calendar') }}
                                                            </a>
                                                        </li>
                                                    </ul>
                                                </div>
                                            </div>

                                            <div class="panel-body tabs-menu-body px-0">
                                                <div class="tab-content">
                                                    <div class="tab-pane active" id="pricing">
                                                        <div class="card">
                                                            <div class="card-header">
                                                                <h3 class="card-title">{{ __('global.pricing') }} </h3>
                                                            </div> 

                                                            <div class="card-body">
                                                                <div class="panel panel-primary">
                                                                    <div class="tab-menu-heading">
                                                                        <div class="tabs-menu1">
                                                                            <!-- Tabs -->
                                                                            <ul class="nav panel-tabs">
                                                                                <li>
                                                                                    <a href="#hourly" class="d-flex align-items-center fs-14 py-2 @unless(session('ticket_active')) active @endunless" data-bs-toggle="tab">
                                                                                        {{ __('global.hourly') }}  
                                                                                    </a>
                                                                                </li>
                                                                                <li>
                                                                                    <a href="#ticket" class="d-flex align-items-center fs-14 py-2 @if(session('ticket_active')) active  @endif" data-bs-toggle="tab">
                                                                                        {{ __('global.ticket') }}  
                                                                                    </a>
                                                                                </li>
                                                                            </ul>
                                                                        </div>
                                                                    </div>

                                                                    <div class="panel-body tabs-menu-body px-0">
                                                                        <div class="tab-content">
                                                                            <div class="tab-pane @unless(session('ticket_active')) active show @endunless" id="hourly">
                                                                                <form action="{{ route('venue.update.hourly') }}" method="POST">
                                                                                    @csrf

                                                                                    <input type="hidden" name="product_id" value="{{ $product->id }}">
                                                                                    <div class="row">
                                                                                        <div class="col-xl-4 col-md-6 mb-4">
                                                                                            <label for="price" class="form-label">{{ __('global.price') }}  <span class="text-secondary">*</span></label>
                                                                                            <input type="text" class="form-control price-input @error('price') is-invalid is-text-invalid @enderror" id="price" name="price" value="{{ $product->price }}" placeholder="{{ __('global.enter_price') }}  (0.00)">

                                                                                            @error('price')
                                                                                                <span class="invalid-feedback d-block" role="alert">
                                                                                                    {{ $message }}
                                                                                                </span>
                                                                                            @enderror
                                                                                        </div>

                                                                                        <div class="col-xl-4 col-md-6 mb-4">
                                                                                            <label for="sprenty_price" class="form-label">{{ __('global.sprenty_cut') }}  <span class="text-secondary">*</span></label>
                                                                                            <input type="text" class="form-control price-input @error('sprenty_price') is-invalid is-text-invalid @enderror" id="sprenty_price" name="sprenty_price" value="{{ $product->sprenty_price }}" placeholder="{{ __('global.enter_sprenty_cut') }} (0.00)">

                                                                                            @error('sprenty_price')
                                                                                                <span class="invalid-feedback d-block" role="alert">
                                                                                                    {{ $message }}
                                                                                                </span>
                                                                                            @enderror
                                                                                        </div>

                                                                                        <div class="col-xl-4 col-md-6 mb-4">
                                                                                            <label for="tax" class="form-label">{{ __('global.tax') }}  (18%) <span class="text-secondary">*</span></label>
                                                                                            <input type="text" class="form-control price-input @error('tax') is-invalid is-text-invalid @enderror" id="tax" name="tax" value="{{ $product->tax }}" placeholder="{{ __('global.enter_tax') }} (0.00)">

                                                                                            @error('tax')
                                                                                                <span class="invalid-feedback d-block" role="alert">
                                                                                                    {{ $message }}
                                                                                                </span>
                                                                                            @enderror
                                                                                        </div>
                                                                                    </div>

                                                                                    <div class="d-flex justify-content-end m-2 mx-3">
                                                                                        <a href="{{ route('venue.get.products') }}" class="btn btn-default">{{ __('global.go_back') }}</a>
                                                                                        <a href="{{ route('venue.edit.products', $product->id) }}" class="btn btn-primary-light mx-2">{{ __('global.go_to_edit') }}</a>
                                                                                        <input type="submit" class="btn btn-primary" value="{{ __('global.update') }}">
                                                                                    </div>
                                                                                </form>
                                                                            </div>

                                                                            <div class="tab-pane @if(session('ticket_active')) active show @endif" id="ticket">
                                                                                <form action="{{ route('venue.add.tickets') }}" method="POST" enctype="multipart/form-data">
                                                                                    @csrf

                                                                                    <input type="hidden" name="product_id" value="{{ $product->id }}">

                                                                                    <div class="row">
                                                                                        <div class="col-xl-4 col-md-6 mb-4 ticket-col">
                                                                                            <label for="ticket_name_ge" class="form-label">
                                                                                                <img src="{{ asset('/build/assets/images/flags-svg/ge.svg') }}" alt="" style="width: 27px;" class="me-2 mb-1">

                                                                                                {{ __('global.ticket_name') }} <span class="text-secondary">*</span>
                                                                                            </label>
                                                                                            <input type="text" class="form-control @error('ticket_name_ge') is-invalid is-text-invalid @enderror" id="ticket_name_ge" name="ticket_name_ge" value="{{ old('ticket_name_ge') }}" placeholder="{{ __('global.enter_name') }}">

                                                                                            @error('ticket_name_ge')
                                                                                                <span class="invalid-feedback d-block" role="alert">
                                                                                                    {{ $message }}
                                                                                                </span>
                                                                                            @enderror
                                                                                        </div>

                                                                                        <div class="col-xl-4 col-md-6 mb-4 ticket-col">
                                                                                            <label for="ticket_name_en" class="form-label">
                                                                                                <img src="{{ asset('/build/assets/images/flags-svg/gb.svg') }}" alt="" style="width: 27px;" class="me-2 mb-1">

                                                                                                {{ __('global.ticket_name') }} <span class="text-secondary">*</span>
                                                                                            </label>
                                                                                            <input type="text" class="form-control @error('ticket_name_en') is-invalid is-text-invalid @enderror" id="ticket_name_en" name="ticket_name_en" value="{{ old('ticket_name_en') }}" placeholder="{{ __('global.enter_name') }}">

                                                                                            @error('ticket_name_en')
                                                                                                <span class="invalid-feedback d-block" role="alert">
                                                                                                    {{ $message }}
                                                                                                </span>
                                                                                            @enderror
                                                                                        </div>

                                                                                        <div class="col-xl-4 col-md-6 mb-4 ticket-col">
                                                                                            <label for="ticket_name_ru" class="form-label">
                                                                                                <img src="{{ asset('/build/assets/images/flags-svg/ru.svg') }}" alt="" style="width: 27px;" class="me-2 mb-1">

                                                                                                {{ __('global.ticket_name') }} <span class="text-secondary">*</span>
                                                                                            </label>
                                                                                            <input type="text" class="form-control @error('ticket_name_ru') is-invalid is-text-invalid @enderror" id="ticket_name_ru" name="ticket_name_ru" value="{{ old('ticket_name_ru') }}" placeholder="{{ __('global.enter_name') }}">

                                                                                            @error('ticket_name_ru')
                                                                                                <span class="invalid-feedback d-block" role="alert">
                                                                                                    {{ $message }}
                                                                                                </span>
                                                                                            @enderror
                                                                                        </div>

                                                                                        <div class="col-xl-4 col-md-6 mb-4 ticket-col">
                                                                                            <label for="ticket_price" class="form-label mb-2">{{ __('global.price') }} <span class="text-secondary">*</span></label>
                                                                                            <input type="text" class="form-control price-input @error('ticket_price') is-invalid is-text-invalid @enderror" id="ticket_price" name="ticket_price" value="{{ old('ticket_price') }}" placeholder="{{ __('global.enter_price') }} (0.00)">

                                                                                            @error('ticket_price')
                                                                                                <span class="invalid-feedback d-block" role="alert">
                                                                                                    {{ $message }}
                                                                                                </span>
                                                                                            @enderror
                                                                                        </div>

                                                                                        <div class="col-xl-4 col-md-6 mb-4 ticket-col">
                                                                                            <label for="ticket_sprenty_cut" class="form-label mb-2">{{ __('global.sprenty_cut') }} <span class="text-secondary">*</span></label>
                                                                                            <input type="text" class="form-control price-input @error('ticket_sprenty_price') is-invalid is-text-invalid @enderror" id="ticket_sprenty_cut" name="ticket_sprenty_price" value="{{ old('ticket_sprenty_price') }}" placeholder="{{ __('global.enter_sprenty_cut') }} (0.00)">

                                                                                            @error('ticket_sprenty_price')
                                                                                                <span class="invalid-feedback d-block" role="alert">
                                                                                                    {{ $message }}
                                                                                                </span>
                                                                                            @enderror
                                                                                        </div>

                                                                                        <div class="col-xl-4 col-md-6 mb-4 ticket-col">
                                                                                            <label for="ticket_tax" class="form-label mb-2">{{ __('global.tax') }} (18%) <span class="text-secondary">*</span></label>
                                                                                            <input type="text" class="form-control price-input @error('ticket_tax') is-invalid is-text-invalid @enderror" id="ticket_tax" name="ticket_tax" value="{{ old('ticket_tax') }}" placeholder="{{ __('global.enter_tax') }} (0.00)">

                                                                                            @error('ticket_tax')
                                                                                                <span class="invalid-feedback d-block" role="alert">
                                                                                                    {{ $message }}
                                                                                                </span>
                                                                                            @enderror
                                                                                        </div>

                                                                                        <div class="col-xl-4 mb-4">
                                                                                            <label for="input-datetime-local" class="form-label">{{ __('global.date_range') }} <span class="text-secondary">*</span> <span class="text-gray fs-7"> ({{ __('global.click_twice_single_day') }})</span></label>
                                                                                            <div class="input-group">
                                                                                                <div class="input-group-text">
                                                                                                    <i class="fa fa-clock-o tx-16 lh-0 op-6"></i>
                                                                                                </div>
                                                                                                <input type="text" class="form-control @error('ticket_date') is-invalid is-text-invalid @enderror" id="ticket_date" name="ticket_date" placeholder="{{ __('global.select_start_date') }}" value="{{ old('ticket_date') }}">
                                                                                            

                                                                                                @error('ticket_date')
                                                                                                    <span class="invalid-feedback d-block" role="alert">
                                                                                                        {{ $message }}
                                                                                                    </span>
                                                                                                @enderror
                                                                                            </div>
                                                                                        </div>

                                                                                        <div class="col-xl-4 col-md-6 mb-4">
                                                                                            <label for="input-datetime-local" class="form-label">{{ __('global.start_time') }} <span class="text-secondary">*</span></label>
                                                                                            <div class="input-group">
                                                                                                <div class="input-group-text">
                                                                                                    <i class="fa fa-clock-o tx-16 lh-0 op-6"></i>
                                                                                                </div>
                                                                                                <input type="text" class="form-control @error('ticket_start_time') is-invalid is-text-invalid @enderror" id="ticket_startTime" name="ticket_start_time" placeholder="{{ __('global.select_start_time') }}" value="{{ old('ticket_start_time') }}">

                                                                                                @error('ticket_start_time')
                                                                                                    <span class="invalid-feedback d-block" role="alert">
                                                                                                        {{ $message }}
                                                                                                    </span>
                                                                                                @enderror
                                                                                            </div>
                                                                                        </div>

                                                                                        <div class="col-xl-4 col-md-6 mb-5">
                                                                                            <label for="input-datetime-local" class="form-label">{{ __('global.end_time') }} <span class="text-secondary">*</span></label>
                                                                                            <div class="input-group">
                                                                                                <div class="input-group-text">
                                                                                                    <i class="fa fa-clock-o tx-16 lh-0 op-6"></i>
                                                                                                </div>
                                                                                                <input type="text" class="form-control @error('ticket_end_time') is-invalid is-text-invalid @enderror" id="ticket_endTime" name="ticket_end_time" placeholder="{{ __('global.select_end_time') }}" value="{{ old('ticket_end_time') }}">

                                                                                                @error('ticket_end_time')
                                                                                                    <span class="invalid-feedback d-block" role="alert">
                                                                                                        {{ $message }}
                                                                                                    </span>
                                                                                                @enderror
                                                                                            </div>
                                                                                        </div>
                                                                                    </div>

                                                                                    <div class="d-flex justify-content-end m-2 mx-3 mb-4">
                                                                                        <a href="{{ route('venue.get.products') }}" class="btn btn-default">{{ __('global.go_back') }}</a>
                                                                                        <a href="{{ route('venue.edit.products', $product->id) }}" class="btn btn-primary-light mx-2">{{ __('global.go_to_edit') }}</a>
                                                                                        <input type="submit" class="btn btn-primary" value="{{ __('global.create') }}">
                                                                                    </div>
                                                                                </form>

                                                                                @if(count($product->productTickets) > 0)
                                                                                    <div class="table-responsive">
                                                                                        <table class="table table-hover card-table mb-0">
                                                                                            <thead>
                                                                                                <tr>
                                                                                                    <th>{{ __('global.id') }}</th>
                                                                                                    <th>{{ __('global.name') }}</th>
                                                                                                    <th>{{ __('global.price') }}</th>
                                                                                                    <th>{{ __('global.sprenty_cut') }}</th>
                                                                                                    <th>{{ __('global.tax') }}</th>
                                                                                                    <th>{{ __('global.start') }}</th>
                                                                                                    <th>{{ __('global.end') }}</th>
                                                                                                    <th>{{ __('global.status') }}</th>
                                                                                                    <th>{{ __('global.actions') }}</th>
                                                                                                </tr>
                                                                                            </thead>
                                                                                            <tbody>
                                                                                                @foreach($product->productTickets as $ticket)
                                                                                                    <tr>
                                                                                                        <td>
                                                                                                            {{ $ticket->id }}
                                                                                                        </td>
                                                                                                        <td class="ps-3">
                                                                                                            <div class="d-flex align-items-center position-relative">
                                                                                                                <div class="flex-grow-1">
                                                                                                                    <p class="mb-0">
                                                                                                                        {{ unserialize($ticket->ticket_name)['ticket_name_'.app()->getLocale()] }}
                                                                                                                    </p>
                                                                                                                </div>
                                                                                                            </div>
                                                                                                        </td>
                                                                                                        <td class="text-nowrap">{{ $ticket->ticket_price }} ₾</td>
                                                                                                        <td class="text-nowrap">{{ $ticket->ticket_sprenty_price }} ₾</td>
                                                                                                        <td class="text-nowrap">{{ $ticket->ticket_tax.' ₾' }} </td>
                                                                                                        <td>
                                                                                                            {{ \Carbon\Carbon::parse(min(unserialize($ticket->start)))->format('Y-m-d H:i') }}
                                                                                                        </td>
                                                                                                        <td>
                                                                                                            {{ \Carbon\Carbon::parse(max(unserialize($ticket->end)))->format('Y-m-d H:i') }}
                                                                                                        </td>

                                                                                                        <td>
                                                                                                            @if($ticket->active)
                                                                                                                <span class="badge bg-primary-transparent">{{ __('global.active') }}</span>
                                                                                                            @else
                                                                                                                <span class="badge bg-danger-transparent">{{ __('global.disabled') }}</span>
                                                                                                            @endif
                                                                                                        </td>

                                                                                                        <td class="text-center">
                                                                                                            <div class="d-flex justify-content-center">
                                                                                                                @if($ticket->active)
                                                                                                                    <a href="{{ route('venue.status.tickets', $ticket->id) }}" class="btn btn-outline-info me-2"><span class="px-1">{{ __('global.disable') }}</span></a>
                                                                                                                @else
                                                                                                                    <a href="{{ route('venue.status.tickets', $ticket->id) }}" class="btn btn-outline-info me-2 px-3">{{ __('global.activate') }}</a>
                                                                                                                @endif

                                                                                                                <a href="{{ route('venue.delete.tickets', $ticket->id) }}" class="btn btn-outline-secondary">{{ __('global.delete') }}</a>
                                                                                                            </div>
                                                                                                        </td>
                                                                                                    </tr>
                                                                                                @endforeach
                                                                                            </tbody>
                                                                                        </table>
                                                                                    </div>
                                                                                @endif
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div> 

                                                    <div class="tab-pane" id="hidden_blocks">
                                                        <form action="{{ route('venue.details.update.products') }}" method="POST" enctype="multipart/form-data" id="details-form">
                                                            @csrf

                                                            <input type="hidden" name="product_id" value="{{ $product->id }}">

                                                            <div class="card">
                                                                <div class="card-header">
                                                                    <h3 class="card-title">{{ __('global.hidden_blocks') }}</h3>
                                                                </div> 
                                                                <div class="card-body">
                                                                    <div class="row">
                                                                        <div class="col-xl-4 mb-4">
                                                                            <label for="input-datetime-local" class="form-label">{{ __('global.date') }} <span class="text-secondary">*</span></label>
                                                                            <div class="input-group">
                                                                                <div class="input-group-text">
                                                                                    <i class="fa fa-clock-o tx-16 lh-0 op-6"></i>
                                                                                </div>
                                                                                <input type="text" class="form-control @error('date') is-invalid is-text-invalid @enderror" id="date" name="date" placeholder="Select Start Date" value="">

                                                                                @error('date')
                                                                                    <span class="invalid-feedback d-block" role="alert">
                                                                                        {{ $message }}
                                                                                    </span>
                                                                                @enderror
                                                                            </div>
                                                                        </div>

                                                                        <div class="col-xl-4 col-md-6 mb-4">
                                                                            <label for="input-datetime-local" class="form-label">{{ __('global.start') }} <span class="text-secondary">*</span></label>
                                                                            <div class="input-group">
                                                                                <div class="input-group-text">
                                                                                    <i class="fa fa-clock-o tx-16 lh-0 op-6"></i>
                                                                                </div>
                                                                                <input type="text" class="form-control @error('start_time') is-invalid is-text-invalid @enderror" id="startTime" name="start_time" placeholder="{{ __('global.select_start_time') }}" value="{{ old('start_time') }}">

                                                                                @error('start_time')
                                                                                    <span class="invalid-feedback d-block" role="alert">
                                                                                        {{ $message }}
                                                                                    </span>
                                                                                @enderror
                                                                            </div>
                                                                        </div>

                                                                        <div class="col-xl-4 col-md-6 mb-5">
                                                                            <label for="input-datetime-local" class="form-label">{{ __('global.end') }} <span class="text-secondary">*</span></label>
                                                                            <div class="input-group">
                                                                                <div class="input-group-text">
                                                                                    <i class="fa fa-clock-o tx-16 lh-0 op-6"></i>
                                                                                </div>
                                                                                <input type="text" class="form-control @error('end_time') is-invalid is-text-invalid @enderror" id="endTime" name="end_time" placeholder="{{ __('global.select_end_time') }}" value="{{ old('end_time') }}">

                                                                                @error('end_time')
                                                                                    <span class="invalid-feedback d-block" role="alert">
                                                                                        {{ $message }}
                                                                                    </span>
                                                                                @enderror
                                                                            </div>
                                                                        </div>
                                                                        
                                                                        @foreach($hiddenDataranges as $key => $hiddenDatarange)
                                                                            <div class="col-xl-6 col-md-6 col-sm-12 mb-4">
                                                                                <div class="d-flex justify-content-center align-items-center border py-2">
                                                                                    <div class="text-nowrap align-middle me-2">
                                                                                        {{ \Carbon\Carbon::createFromFormat("Y-m-d H:i:s", $hiddenDatarange->start)->format('Y-m-d H:i') }} - 
                                                                                        {{ \Carbon\Carbon::createFromFormat("Y-m-d H:i:s", $hiddenDatarange->end)->format('H:i') }}
                                                                                    </div>

                                                                                    <div class="align-middle">
                                                                                        <a href="{{ route('venue.details.delete.products', $hiddenDatarange->id) }}" class="btn btn-sm btn-icon btn-secondary-light rounded-circle delete-user"data-bs-toggle="tooltip" data-bs-custom-class="tooltip-secondary" data-bs-placement="top" data-bs-original-title="{{ __('global.delete') }}">
                                                                                            <i class="bi bi-trash"></i>
                                                                                        </a>
                                                                                    </div>
                                                                                </div>
                                                                            </div>
                                                                        @endforeach
                                                                    </div>

                                                                    <div class="d-flex justify-content-end m-2 mx-3 mb-4">
                                                                        <a href="{{ route('venue.get.products') }}" class="btn btn-default ">{{ __('global.go_back') }}</a>
                                                                        <a href="{{ route('venue.edit.products', $product->id) }}" class="btn btn-primary-light mx-2">{{ __('global.go_to_edit') }}</a>
                                                                        <input type="submit" class="btn btn-primary" value="{{ __('global.create') }}">
                                                                    </div>  
                                                                </div>
                                                            </div>
                                                        </form>
                                                    </div>

                                                    <div class="tab-pane" id="calendar">
                                                        <div class="card">
                                                            <div class="card-header">
                                                                <h3 class="card-title">{{ __('global.calendar') }}</h3>
                                                            </div> 
                                                            <div class="card-body">
                                                                <div class="row">
                                                                    <div class="col-xl-12">
                                                                        <div id='calendar2'></div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>  
                                            </div>  
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- ROW-2 END -->
    </div>
    <!-- CONTAINER CLOSED -->

@endsection

@section('scripts')
    <!-- Select2 Cdn -->
    <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
    <script src="{{asset('build/assets/libs/flatpickr/flatpickr.min.js')}}"></script>

    <!-- Fullcalendar JS -->
    <script src="{{asset('build/assets/libs/fullcalendar/main.min.js')}}"></script>

    <!-- Moment JS -->
    <script src="{{asset('build/assets/libs/moment/moment.js')}}"></script>

    <script>
        flatpickr("#date", {
            altInput: true,
            altFormat: "F j, Y",
            dateFormat: "Y-m-d",
            minDate: "today",
            "locale": {
                "firstDayOfWeek": 1
            },
            mode: "multiple"
        });

        flatpickr("#startTime", {
            enableTime: true,
            noCalendar: true,
            dateFormat: "H:i",
            minuteIncrement: 30,
            time_24hr: true
        });

        flatpickr("#endTime", {
            enableTime: true,
            noCalendar: true,
            dateFormat: "H:i",
            minuteIncrement: 30,
            time_24hr: true
        });

        flatpickr("#ticket_date", {
            altInput: true,
            altFormat: "F j, Y",
            dateFormat: "Y-m-d",
            minDate: "today",
            mode: "range",
            "locale": {
                "firstDayOfWeek": 1
            },
        });

        flatpickr("#ticket_startTime", {
            enableTime: true,
            noCalendar: true,
            dateFormat: "H:i",
            minuteIncrement: 30,
            time_24hr: true
        });

        flatpickr("#ticket_endTime", {
            enableTime: true,
            noCalendar: true,
            dateFormat: "H:i",
            minuteIncrement: 30,
            time_24hr: true
        });

        document.getElementById('details-form').addEventListener('submit', function(event) {
            var startDateValue = document.getElementById('startTime').value;
            var startDateMinutes = startDateValue.split(':')[1];

            if (startDateMinutes != undefined && startDateMinutes !== '00' && startDateMinutes !== '30') {
                event.preventDefault();
                alert('{{ __("global.hidden_blocks_alert_1") }}');
                document.getElementById('startTime').focus();
            } else {
                var endDateValue = document.getElementById('endTime').value;
                var endDateMinutes = endDateValue.split(':')[1];
    
                if (endDateMinutes != undefined && endDateMinutes !== '00' && endDateMinutes !== '30') {
                    event.preventDefault();
                    alert('{{ __("global.hidden_blocks_alert_1") }}');
                    document.getElementById('endTime').focus();
                }
            }

            if(startDateValue != undefined && endDateValue != undefined && endDateValue < startDateValue) {
                event.preventDefault();
                alert('{{ __("global.hidden_blocks_alert_2") }}');
                document.getElementById('startTime').focus();
            }
        });
    </script>

    <!-- Validation JS -->
    <script src="{{ asset('assets/js/validation.js') }}"></script>

    <script>
        // sample calendar events data
        var curYear = moment().format('YYYY');
        var curMonth = moment().format('MM');
        // Calendar Event Source
        var sptCalendarEvents = {
            id: 1,
            events: [
                @foreach($hiddenDataranges as $key => $hiddenDatarange)
                    {
                        id: '{{ $hiddenDatarange->id }}',
                        start: '{{ \Carbon\Carbon::createFromFormat("Y-m-d H:i:s", $hiddenDatarange->start)->toIso8601String() }}',
                        end: '{{ \Carbon\Carbon::createFromFormat("Y-m-d H:i:s", $hiddenDatarange->end)->toIso8601String() }}',
                        title: 'Hidden Block',
                        backgroundColor: '#1a99aecc',
                        borderColor: '#1a99aecc',
                        description: 'All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary'
                    },
                @endforeach
            ]
        };
        // Birthday Events Source
        var sptBirthdayEvents = {
        id: 2,
        backgroundColor: '#49b6f5',
        borderColor: '#49b6f5',
        textColor: '#fff',
        events: [@foreach($product->productTickets as $ticket)
                    {
                        id: '{{ $ticket->id }}',
                        start: '{{ \Carbon\Carbon::createFromFormat("Y-m-d H:i:s", min(unserialize($ticket->start)))->toIso8601String() }}',
                        end: '{{ \Carbon\Carbon::createFromFormat("Y-m-d H:i:s", max(unserialize($ticket->end)))->toIso8601String() }}',
                        title: '{{ unserialize($ticket->ticket_name)["ticket_name_ge"] }}',
                        backgroundColor: '#23b7e5',
                        borderColor: '#23b7e5',
                        description: ''
                    },
                @endforeach]
        };
        var sptHolidayEvents = {
        id: 3,
        backgroundColor: '#e6533c',
        borderColor: '#e6533c',
        textColor: '#fff',
        events: []
        };
        var sptOtherEvents = {
        id: 4,
        backgroundColor: '#23b7e5',
        borderColor: '#23b7e5',
        textColor: '#fff',
        events: []
        };
    
    
        var calendarEl = document.getElementById('calendar2');
    
        var calendar = new FullCalendar.Calendar(calendarEl, {
        headerToolbar: {
            left: 'prev,next today',
            center: 'title',
            right: 'dayGridMonth,timeGridWeek,timeGridDay,listWeek'
        },
        defaultView: 'month',
        navLinks: true,
        businessHours: true,
        editable: true,
        selectable: true,
        selectMirror: true,
        droppable: true,
    
        select: function (arg) {
        },
        eventClick: function (arg) {
        },
    
        editable: true,
        dayMaxEvents: true,
        eventSources: [sptCalendarEvents, sptBirthdayEvents, sptHolidayEvents, sptOtherEvents,],
    
        });

        $('#calendar-tab-link').on('shown.bs.tab', function (e) {
            // Render the calendar only when the tab is shown
            calendar.render();
        });

        calendar.render();


        function priceInputGenerator(inputId) {
            $(inputId).on('keyup', function(){
                var price = $(this).val().replace(/[^\d]/g,'');    
                var pre, dec;
                var delimiter = '.';
                
                var result = price;
            
                if (price.length > 3 && price.charAt(0) == '0') {
                        price = price.substr(1);
                }
                
                if (price.length > 2) {
                        pre = price.slice(0,-2);
                        dec = price.substr( (price.length-2), 2);
                        result = pre + delimiter + dec;
                }
                
                $(this).val('').val(result);
                
            });
        }

        priceInputGenerator('.price-input');
    </script>
@endsection