@extends('layouts.app')

@section('content')
<div class="card">
    <div class="card-header">
        Foglalások
    </div>
    <div class="card-body">
        <div class="row">
            <div class="col-6 d-flex justify-content-start mb-3">
                <a href="{{ route('admin.reservations.export_reservation') }}" class="btn btn-success">A mai foglalások exportálása</a>
            </div>
            <div class="col-6 d-flex justify-content-end mb-3">
                <a href="{{ route('admin.reservations.create') }}" class="btn btn-success">Létrehozás</a>
            </div>
        </div>
        @if(session('success'))
            <div class="alert alert-success">
                {{ session('success') }}
            </div>
        @endif

        @if(session('error'))
            <div class="alert alert-danger">
                {{ session('error') }}
            </div>
        @endif


        <div class="row">
            {{-- Data & Form --}}
            @if ($selected_task)
            <div class="col-12 col-xl-6 mb-2">
                <p class="h5">{{ $selected_task->name }}</p>
                <form id="survey_{{ $selected_task->id }}_form" action="{{ route('admin.reservations.update', ['id' => $selected_task->id]) }}" method="POST">
                    @csrf
                    {{-- <div>Ügyfél neve: {{ $selected_task->process->client->full_name }}</div> --}}
                    <div class="mb-2">{{ $selected_task->email }}</div>
                    {{-- <div class="mb-2">{{ $selected_task->process->client->phone }}</div> --}}
                    {{-- <div class="mb-2">@if($selected_task->process->client->phone) <a href="tel:{{ $selected_task->process->client->phone }}">{{ $phone }}</a>@endif<br/></div> --}}
                    <div class="mb-2">
                        {{$selected_task->description ?? ''}}

                        {{-- {!! $selected_task->calEvent('main_calendar', 'fullcalendar')['title'] ?? '' !!} --}}
                    </div>

                    <div class="form-group mb-3">
                        <label for="name">Név</label>
                        <input type="text" name="name" id="name" class="form-control @error('name') is-invalid @enderror" value="{{ old('name', $selected_task->name) }}">
                
                        @error('name')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>
                
                    <div class="form-group mb-3">
                        <label for="email">E-mail</label>
                        <input type="email" name="email" id="email" class="form-control @error('email') is-invalid @enderror" value="{{ old('email', $selected_task->email) }}">
                
                        @error('email')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>

                    <div class="mb-3">
                        <label for="status">{!! __('Státusz') !!}</label>
                        <select class="form-select mt-1 @error('status') is-invalid @enderror" id="status" name="status">
                            @foreach (App\Models\Reservation::statuses() as $key => $value)
                            <option value="{{$key}}" @if(isset($selected_task->status) && $key == old('status', $selected_task->status)) selected @endif>{!! __($value) !!}</option>
                            @endforeach
                        </select>
                    </div>

                    <div class="form-group mb-3">
                        <label for="description">Megjegyzés</label>
                        <textarea name="description" id="description" rows="4" class="form-control @error('description') is-invalid @enderror">{{ old('description', $selected_task->description) }}</textarea>
                    
                        @error('description')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>

                    <div class="form-group mb-3">
                        <label for="start_date">{!! __('Kezdés időpontja') !!}</label>
                        <input type="text" name="start_date" class="form-control w-100 input_start_date datetimepicker @error('start_date') is-invalid @enderror" onchange="check_date('#new_{{ $selected_task->id }}');" id="task_{{ $selected_task->id }}_start_date" data-type="start_date" data-taskid="{{ $selected_task->id }}" value="{{ (old('start_date', $selected_task->start_date)) ? date('Y-m-d H:i', strtotime(old('start_date', $selected_task->start_date))) : null }}">
                        @error('start_date')
                            <span class="invalid-feedback" role="alert">
                                <strong>{{ $message }}</strong>
                            </span>
                        @enderror
                    </div>

                    <div class="form-group mb-3">
                        <label for="end_date">{!! __('Befejezés időpontja') !!}</label>
                        <input type="text" name="end_date" class="form-control w-100 input_end_date datetimepicker @error('end_date') is-invalid @enderror" onchange="check_date('#new_{{ $selected_task->id }}');" id="task_{{ $selected_task->id }}_end_date" data-type="end_date" data-taskid="{{ $selected_task->id }}" value="{{ (old('end_date', $selected_task->end_date)) ? date('Y-m-d H:i', strtotime(old('end_date', $selected_task->end_date))) : null }}">
                        @error('end_date')
                            <span class="invalid-feedback" role="alert">
                                <strong>{{ $message }}</strong>
                            </span>
                        @enderror
                    </div>
                    {{-- <div class="form-group">
                        <label for="end_date">{!! __('Befejezés időpontja') !!}</label>
                        <input type="text" name="end_date" class="form-control w-100 input_end_date datetimepicker @error('end_date') is-invalid @enderror" onchange="check_date('#new_{{ $selected_task->id }}')" id="task_{{ $selected_task->id }}_end_date" data-type="end_date" data-taskid="{{ $selected_task->id }}" value="{{ ($selected_task->start_date) ? date('Y-m-d H:i', strtotime($selected_task->end_date)) : null }}">
                        @error('end_date')
                            <span class="invalid-feedback" role="alert">
                                <strong>{{ $message }}</strong>
                            </span>
                        @enderror
                    </div> --}}
                    <input type="hidden" name="id" value="{{ $selected_task->id }}">
                    <div class="row">
                        <div class="col-12 col-md-6">
                            <button class="btn btn-primary btn-sm submit_button mt-2" type="submit">Mentés</button> {{-- onclick="organize_date('#survey_{{ $selected_task->id }}_form')" --}}
                        </div>
                        <div class="col-12 col-md-6">

                            {{-- <form action="{{ route('admin.reservations.destroy', ['id' => $selected_task->id]) }}" method="post">
                                @csrf
                                @method('DELETE')
                                <button class="btn btn-danger btn-sm mt-2" type="submit" onclick="return confirm('Biztosan törölni szeretnéd a foglalást?')">Törlés</button>
                            </form> --}}

                            {{-- <button class="btn btn-danger btn-sm mt-2" type="button" onclick="window.location='{{ route('admin.reservations.destroy', ['id' => $selected_task->id]) }}'">Törlés</button> --}}
                        </div>
                    </div>
                </form>
                <form action="{{ route('admin.reservations.destroy', ['id' => $selected_task->id]) }}" method="post">
                    @csrf
                    @method('DELETE')
                    {{-- <button class="btn btn-primary" onclick="return confirm('Are you sure?')" type="submit" name="Delete">Törlés</button> --}}
                    <button class="btn btn-danger btn-sm mt-2" type="submit" onclick="return confirm('Biztosan törölni szeretnéd a foglalást?')">Törlés</button>
                </form>
            </div>
            @endif

            {{-- Calendar --}}
            <div id='calendar' class="@if($selected_task) col-12 col-xl-6 @else col-12 @endif mb-3"></div>
            {{-- <div id='calendar' class="@if(true) col-12 col-xl-6 @else col-12 @endif mb-3"></div> --}}
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
// $(function() {
//     $('.datetimepicker').datetimepicker({
//         showSecond: true,
//         format:'Y-m-d H:i',
//         step:30,
//         minDate: 0,
//     }).attr('readonly', 'readonly').on("change", function() {
//         // Befejezés dátumának beállítása automatikusan (Kezdés időpontja + 1 óra)
//         if($(this).data('type') == 'start_date' && $(this).val() != null)
//         {
//             var start_date = $(this).val();
//             start_date = new Date(start_date);

//             var month = ('0' + (start_date.getMonth()+1)).slice(-2);
//             var year = start_date.getFullYear();
//             var day = ('0'+start_date.getDate()).slice(-2);

//             var hour = start_date.getHours()+1;

//             var min = ('0'+start_date.getMinutes()).slice(-2);

//             end_date = year+'-'+month+'-'+day+' '+hour+':'+min; // +':'+sec;

//             end_date_input = $('#task_'+$(this).data('taskid')+'_end_date');
//             // console.log(check_date, start_date);

//             // if (end_date_input.val() == '' ) { //  || start_date > new Date(end_date_input.val())
//                 end_date_input.val(end_date);
//             // }
//         }
//     });
// });

window.check_date = function(task_id) {
    var task = $(task_id);

    if(task.find('.input_start_date').val() != '' &&  task.find('.input_end_date').val() != '')
       task.find('.submit_button').removeClass('d-none');
}

window.get_date_time = function(dateObj) {
    var dateObj = new Date(dateObj);
    var date = $.datepicker.formatDate('yy-m-d', dateObj);
    var time = dateObj.getHours()+":"+dateObj.getMinutes();
    var get_h_null = (dateObj.getHours() < 10) ? 0 : '';
    var get_s_null = (dateObj.getMinutes() == 0) ? 0 : '';

    return date + ' ' + get_h_null + time + get_s_null;
}
// FullCalendar
document.addEventListener('DOMContentLoaded', function() {

    function getInitialView() {
        if (window.innerWidth >= 768) {
            return 'timeGridWeek';
        } else if (window.innerWidth <= 768) {
            return 'listMonth';
        } else {
            return 'dayGridMonth';
        }
    }

    var calendarEl = document.getElementById('calendar');

    window.calendar = new FullCalendar.Calendar(calendarEl, {
        // timeZone: 'UTC',
        headerToolbar: {
            left: 'prev,next today',
            center: 'title',
            right: 'dayGridMonth,timeGridWeek,timeGridDay,listMonth'
        },
        initialView: 'timeGridWeek',
        windowResize: function (view) {
            var newView = getInitialView();
            calendar.changeView(newView);
        },
        themeSystem: 'bootstrap5',
        navLinks: true, // can click day/week names to navigate views
        businessHours: true, // display business hours
        editable: false,
        selectable: true,
        droppable: false,
        locale: 'hu',
        firstDay: 1,
        initialDate: '{{ date("Y-m-d") }}',
        events: {!! $events !!},
        initialDate: '{{ ($selected_task && $selected_task->start_date) ? $selected_task->start_date->format('Y-m-d') : date('Y-m-d') }}', // '2021-06-07',
        // initialView: 'timeGridDay',
        eventClick: function(info) {
            info.jsEvent.preventDefault(); // don't let the browser navigate
            // console.log(info.event.id);
            var url = "{{ route('admin.reservations.index', [':slug']) }}";
            url = url.replace(':slug', info.event.id);
            window.location = url;
        },
    });

    calendar.render();
});
  </script>
@endpush