@extends('layouts.vertical')

@php
$is_update = false;
if(isset($event) && !empty($event)){
    $is_update = true;
}
@endphp

@section('css')
<link href="{{ Helper::assets('assets/libs/select2/select2.min.css') }}" rel="stylesheet" type="text/css" />
<link href="{{ Helper::assets('assets/libs/flatpickr/flatpickr.min.css') }}" rel="stylesheet" type="text/css" />
<style>
    input[name="image"].is-invalid ~ label.single-image-upload {
        border-color: var(--danger) !important;
    }
</style>
@endsection

@section('breadcrumb')
<div class="row page-title align-items-center">
    <div class="col-sm-6 col-xl-6">
        <h4 class="mb-1 mt-0 font-weight-medium">{{ $is_update ? "Edit details" : "Add new event" }}</h4>
    </div>
    <div class="col-sm-6 col-xl-6">
        <div class="form-inline float-sm-right mt-3 mt-sm-0">
        </div>
    </div>
</div>
@endsection

@section('content')
<div class="row">
    <div class="col-md-12">
        <form action="{{ $is_update ? route('events.update') : route('events.store') }}" method="post" class="event-form" enctype="multipart/form-data">
            @csrf
            @if($is_update)
            <input type="hidden" name="id" value="{{ $event->_id }}">
            @endif
            <div class="card">
                <div class="card-body border-bottom pb-3">
                    <h5 class="font-size-18 pb-3">Event details</h5>

                    <div class="row">
                        <div class="col-12">
                            <div class="form-group row">
                                <label class="col-xl-2 col-form-label">Event name</label>
                                <div class="col-xl-10">
                                    <input type="text" class="form-control" name="name" placeholder="Title of the event" value="{{ old('name', $is_update ? $event->name : '') }}">
                                    @if($errors->has('name'))
                                        <label id="name-error" class="invalid-feedback" for="name">{{ $errors->first('name') }}</label>
                                    @endif
                                </div>
                            </div>
                        </div>

                        <div class="col-12">
                            <div class="row">
                                <div class="col-xl-6">
                                    <div class="form-group row">
                                        <label class="col-xl-4 col-form-label">Upload an image</label>
                                        <div class="col-xl-8 position-relative">
                                            <div id="imagePreviewContainer" class="max-w-100 border rounded" @if(!$is_update || !$event->image) style="display: none" @endif>
                                                <img id="imagePreview" class="w-100 rounded event-image" @if($is_update && $event->image) src="{{ $event->image }}" @endif alt="">
                                            </div>

                                            <input type="hidden" name="old_image" value="{{ $is_update && $event->image ? $event->image : '' }}" id="oldImage">
                                            <input type="file" name="image" id="image" class="position-absolute" style="opacity: 0;height: 0;width: 0;">
                                            <label id="imageUpload" for="image" class="single-image-upload border px-4 py-5 mb-0 rounded w-100" @if($is_update && $event->image) style="display: none" @endif>
                                                <div class="d-flex flex-column justify-content-center align-items-center">
                                                    <img class="mb-2" src="{{ Helper::assets('assets/images/icons/image-plus.png') }}" alt="add">
                                                    <span>Add an event image</span>
                                                </div>
                                            </label>

                                            @if($errors->has('image'))
                                                <label id="image-error" class="invalid-feedback">{{ $errors->first('image') }}</label>
                                            @endif
                                        </div>
                                    </div>
                                </div>
                                <div class="col-xl-6" id="fileButtonContainer" @if(!$is_update || !$event->image) style="display: none" @endif>
                                    <div class="d-flex align-items-center h-100">
                                        <button id="changeImage" type="button" class="btn btn-pink mr-2">
                                            Change image
                                        </button>

                                        <button id="removeImage" type="button" class="btn btn-danger">
                                            Remove
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="col-12">
                            <div class="row date-group">
                                <div class="col-xl-6">
                                    <div class="form-group row">
                                        <label class="col-xl-4 col-form-label">Start date</label>
                                        <div class="col-xl-8">
                                            <div class="position-relative">
                                                <span class="flatpickr-arrow"></span>
                                                <input type="text" class="form-control flatpickr flatpickr-input input-validate from-date" name="start_date" value="{{ old('start_date', $is_update ? \Carbon\Carbon::parse($event->fromDate)->format('d/m/Y') : '') }}" placeholder="Select date">
                                            </div>
                                            @if($errors->has('start_date'))
                                                <label id="start_date-error" class="invalid-feedback">{{ $errors->first('start_date') }}</label>
                                            @endif
                                        </div>
                                    </div>
                                </div>

                                <div class="col-xl-6">
                                    <div class="form-group row">
                                        <label class="col-xl-4 col-form-label">End date</label>
                                        <div class="col-xl-8">
                                            <div class="position-relative">
                                                <span class="flatpickr-arrow"></span>
                                                <input type="text" class="form-control flatpickr flatpickr-input input-validate to-date" name="end_date" value="{{ old('end_date', $is_update ? \Carbon\Carbon::parse($event->toDate)->format('d/m/Y') : '') }}" placeholder="Select date">
                                            </div>
                                            @if($errors->has('end_date'))
                                                <label id="end_date-error" class="invalid-feedback">{{ $errors->first('end_date') }}</label>
                                            @endif
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="col-12">
                            <div class="row">
                                <div class="col-xl-6">
                                    <div class="form-group row">
                                        <label class="col-xl-4 col-form-label">Event time</label>

                                        <div class="col-xl-8">
                                            <div class="row">
                                                <div class="col-6 form-group">
                                                    <div class="position-relative">
                                                        <span class="flatpickr-arrow"></span>
                                                        <input type="text" class="form-control flatpickr flatpickr-time" name="start_time" value="{{ old('start_time', $is_update ? now()->startOfDay()->addMinutes($event->fromTime)->format('H:i A') : '') }}" placeholder="Start time">
                                                    </div>
                                                </div>
                                                <div class="col-6 form-group">
                                                    <div class="position-relative">
                                                        <span class="flatpickr-arrow"></span>
                                                        <input type="text" class="form-control flatpickr flatpickr-time" name="end_time" value="{{ old('end_time', $is_update ? now()->startOfDay()->addMinutes($event->toTime)->format('H:i A') : '') }}" placeholder="End time">
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div class="col-xl-6">
                                    <div class="form-group row">
                                        <label class="col-xl-4 col-form-label">Location</label>
                                        <div class="col-xl-8">
                                            <input type="text" class="form-control" name="location" value="{{ old('location', $is_update ? $event->location : '') }}" id="location" placeholder="Enter event location">
                                            @if($errors->has('location'))
                                                <label id="location-error" class="invalid-feedback" for="location">{{ $errors->first('location') }}</label>
                                            @endif
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="col-12">
                            <div class="form-group row">
                                <label class="col-xl-2 col-form-label">Description</label>
                                <div class="col-xl-10">
                                    <textarea class="form-control py-3" name="description" id="description" placeholder="Type here..." cols="30" rows="10">{{ old('description', $is_update ? $event->description : '') }}</textarea>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="card-body pb-3">
                    <div class="form-group">
                        <label for="form-label">This event will be visible for the following selected recipients:</label>
                        <div class="row">
                            <div class="col-auto checkbox big checkbox-pink pt-lg-1 mr-4 mb-3">
                                <input type="checkbox" class="input-validate check-not-school" name="eventFor[]" id="parentCheck" value="1" @if (!$is_update || in_array(1, $event->eventFor)) checked @endif data-error="eventFor-error" @if ($is_update && in_array(3, $event->eventFor)) disabled @endif>
                                <label for="parentCheck" class="pt-2">
                                    Parents
                                </label>
                            </div>
                            <div class="col-auto checkbox big checkbox-pink pt-lg-1 mr-4 mb-3">
                                <input type="checkbox" class="input-validate check-not-school" name="eventFor[]" id="teacherCheck" value="2" @if (!$is_update || in_array(2, $event->eventFor)) checked @endif data-error="eventFor-error" @if ($is_update && in_array(3, $event->eventFor)) disabled @endif>
                                <label for="teacherCheck" class="pt-2">
                                    Teachers
                                </label>
                            </div>
                            <div class="col-auto checkbox big checkbox-pink pt-lg-1 mr-4 mb-3">
                                <input type="checkbox" class="input-validate check-school" name="eventFor[]" id="schoolCheck" value="3" @if ($is_update && in_array(3, $event->eventFor)) checked @endif data-error="eventFor-error">
                                <label for="schoolCheck" class="pt-2">
                                    School
                                </label>
                            </div>
                        </div>
                        <div class="eventFor-error"></div>
                    </div>
                    <div class="form-group school" style="display:@if ($is_update && in_array(3, $event->eventFor)) none @else block @endif">
                        <label for="form-label">Of the following rooms:</label>
                        <div class="row">
                            @foreach ($rooms as $key => $room)
                            <div class="col-md-6 col-xl-3 mb-2">
                                <div class="checkbox-full border py-3">
                                    <div class="checkbox medium checkbox-pink right">
                                        <input type="checkbox" class="check-room" name="selectedRooms[]" id="room{{$room->_id}}" value="{{$room->_id}}" data-error="rooms-error" {{ in_array($room->_id, old('rooms', $is_update ? $event->rooms->pluck('room')->toArray() : [])) ? 'checked' : '' }}>
                                        <label style="line-height: 26px" for="room{{$room->_id}}" class="font-weight-normal">{{$room->name}}</label>
                                    </div>
                                </div>
                            </div>
                            @endforeach
                        </div>
                        <div class="rooms-error"></div>
                    </div>
                </div>

                <div class="card-body alert alert-success py-3 px-4 rounded-0 mb-0 school" id="resetButtonContainer" @if(!isset($event) || count($event->rooms) == 0) style="display: none" @elseif (!$is_update || ($is_update && in_array(3, $event->eventFor))) style="display: none" @endif>
                    <div class="d-flex align-items-center justify-content-between">
                        <span class="font-weight-500 font-size-16 text-success pl-2 my-2">Select specific teachers and parents</span>
                        @if ($is_update)
                            <button id="resetButton" type="button" class="btn border-0 py-0 px-1 my-2 text-danger font-weight-500 font-size-16" style="min-width: 55px;display: none;">Reset</button>
                        @endif
                    </div>
                </div>

                <div class="card-body school" id="usersListSelect" @if(!isset($event) || count($event->rooms) == 0) style="display: none" @elseif (!$is_update || ($is_update && in_array(3, $event->eventFor))) style="display: none" @endif>
                    @if(isset($rooms) && !empty($rooms))
                    @php $activeRoom = false; @endphp

                    <div class="row px-3">
                        <ul class="nav nav-pills navtab-bg">
                            @foreach($rooms as $key => $room)
                                @php $selectedRoom = $is_update ? $event->rooms->firstWhere('room', $room->_id) : null; @endphp
                                <li class="nav-item">
                                    <a data-toggle="tab" aria-expanded="true" class="cursor-pointer nav-link room-tab {{ $selectedRoom && !$activeRoom ? 'active' : '' }}" data-target="#tab{{ $room->_id }}" @if($selectedRoom == null) style="display:none" @endif>
                                        <span class="d-sm-block">{{$room->name}}</span>
                                    </a>
                                </li>
                                @php
                                    if ($selectedRoom && !$activeRoom) {
                                        $activeRoom = true;
                                    }
                                @endphp
                            @endforeach
                        </ul>
                    </div>
                    <div class="tab-content">
                        @php $activeRoom = false; @endphp

                        @foreach ($rooms as $key => $room)
                            @php $selectedRoom = $is_update ? $event->rooms->firstWhere('room', $room->_id) : null; @endphp

                            <div class="tab-pane @if($selectedRoom && !$activeRoom) active @endif" id="tab{{ $room->_id }}">
                                <div class="child-loader" style="display:none;">Loading...</div>
                                <div class="children-found">
                                    <div class="row">
                                        <input type="hidden" name="rooms[{{ $room->_id }}][roomName]" value="{{ $room->name }}">
                                        <input type="hidden" name="rooms[{{ $room->_id }}][applyToAll]" value="{{ old("rooms[$room->_id][applyToAll]", $selectedRoom ? ($selectedRoom->applyToAll ? 'true' : 'false') : 'true') }}">

                                        @php
                                            $count = 0;

                                            if ($selectedRoom && !$activeRoom) {
                                                $activeRoom = true;
                                            }
                                        @endphp

                                        @foreach ($teachers as $key => $teacher)
                                            @if (in_array($room->_id, $teacher->rooms))
                                            <div class="col-md-6 col-xl-3 mb-2 teacher-check">
                                                <label class="media border py-2 px-3 rounded cursor-pointer">
                                                    <img src="{{ $teacher->profileImage }}" alt="Child" class="img-child extra-small">
                                                    <div class="media-body ml-2">
                                                        <div class="font-weight-medium">{{ $teacher->firstName }} {{ $teacher->lastName }}</div>
                                                        <div class="font-weight-normal font-size-12">Teacher</div>
                                                    </div>
                                                    <div class="checkbox medium checkbox-pink">
                                                        <input type="checkbox" class="input-validate room-{{ $room->_id }} user-checkbox teacher" data-old="{{ old("rooms[$room->_id][teachers][$key]", $is_update ? ($selectedRoom && $selectedRoom->applyToAll ? 1 : (int)in_array($teacher->_id, $event->teachers)) : 1) }}" name="rooms[{{ $room->_id }}][teachers][{{ $key }}]" id="teacher-{{ $room->_id }}-{{$teacher->_id}}" value="{{ $teacher->_id }}" data-error="child-errors">
                                                        <label for="teacher-{{ $room->_id }}-{{$teacher->_id}}" class="pt-4 pl-4"></label>
                                                    </div>
                                                </label>
                                            </div>
                                            @php $count += 1; @endphp
                                            @endif
                                        @endforeach

                                        @foreach ($children as $key => $child)
                                            @if ($room->_id == $child->room)
                                            <div class="col-md-6 col-xl-3 mb-2 child-check">
                                                <label class="media border py-2 px-3 rounded cursor-pointer">
                                                    <img src="{{ $child->profileImage }}" alt="Child" class="img-child extra-small">
                                                    <div class="media-body ml-2">
                                                        <span class="font-weight-medium">{{ $child->name }}</span>
                                                    </div>
                                                    <div class="checkbox medium checkbox-pink">
                                                        <input type="checkbox" class="input-validate room-{{ $room->_id }} user-checkbox child" data-old="{{ old("rooms[$room->_id][children][$key]", $is_update ? ($selectedRoom && $selectedRoom->applyToAll ? 1 : (int)in_array($child->_id, $event->children)) : 1) }}" name="rooms[{{ $room->_id }}][children][{{ $key }}]" id="child-{{ $room->_id }}-{{$child->_id}}" value="{{ $child->_id }}" data-error="child-errors">
                                                        <label for="child-{{ $room->_id }}-{{$child->_id}}" class="pt-4 pl-4"></label>
                                                    </div>
                                                </label>
                                            </div>
                                            @php $count += 1; @endphp
                                            @endif
                                        @endforeach

                                        @if ($count == 0)
                                            <div class="col">
                                                Child not found in this room. Please add child in this room.
                                            </div>
                                        @endif
                                    </div>
                                </div>
                            </div>
                        @endforeach
                    </div>
                    @else
                    <div class="">
                        <p class="font-size-16">Please create a room before setup billing for children.</p>
                        <a href="{{ route('room.add') }}" class="btn btn-success btn-min-width">Add room</a>
                    </div>
                    @endif
                </div>
            </div>
            <div class="my-5">
                <button type="submit" class="btn btn-success btn-min-width mr-2">{{ $is_update ? 'Save changes' : 'Save event details' }}</button>
            </div>
        </form>
    </div>
</div>
@endsection

@section('script-bottom')
<script defer src="{{ Helper::assets('assets/libs/validation/validate.min.js') }}" type="text/javascript"></script>
<script defer src="{{ Helper::assets('assets/libs/moment/moment.min.js') }}" type="text/javascript"></script>
<script defer src="{{ Helper::assets('assets/libs/flatpickr/flatpickr.min.js') }}" type="text/javascript"></script>
<script defer src="{{ Helper::assets('assets/js/pages/event-add.js') }}?v={{time()}}" type="text/javascript"></script>
@endsection