@extends('layouts.master')

@section('title', 'Show event | Proxima - Medical Management app')

@section('title-topbar', 'Show event')

<!-- css insert -->
@section('css')

<!-- select 2 -->
<link href="https://fastly.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />

<!-- boostrap datepicker -->
<link rel="stylesheet"
    href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.1/css/bootstrap-datepicker3.css" />


<!-- datepicker time and date -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/flatpickr/4.6.13/flatpickr.min.css"
    integrity="sha512-MQXduO8IQnJVq1qmySpN87QQkiR1bZHtorbJBD0tzy7/0U9+YIC93QWHeGTEoojMVHWWNkoCp8V6OzVSYrX0oQ=="
    crossorigin="anonymous" referrerpolicy="no-referrer" />
@endsection


<!-- content insert -->
@section('content')

<div class="container-fluid px-2 mt-3">

    <!-- page title link -->
    <div class="d-flex align-items-center justify-content-center justify-content-md-between mb-3 flex-wrap">
        <span class="mb-0 me-2">
            <a class="link-cust-text text-gray-200 fw-light" href="{{ route('sett.home') }}">{{ __('basic.dashboard') }}
                |</a>
            <a class="link-cust-text text-gray-200 fw-light" href="{{ route('sett.event.index') }}">{{
                __('basic.events') }}
                | </a>
            <a class="text-gray-300">{{ __('basic.event') }}</a>
        </span>



        <a class="main-color-bg text-white btn btn-sm shadow-sm b-r-l-cont p-2 px-4 me-1" data-bs-toggle="modal"
            data-bs-target="#create_new_modal"><i class="fas fa-plus fa-sm me-1"></i> {{ __('basic.new')
            }}</a>

        <!-- Modal -->
        <div class="modal side_modal_prox fade" id="create_new_modal" tabindex="-1" aria-labelledby="exampleModalLabel"
            aria-hidden="true">
            <div class="modal-dialog shadow-lgg modal-dialog-scrollable">

                <form id="myform" class="mb-0" action="{{ route('sett.store_event_competition') }}" method="POST"
                    enctype="multipart/form-data" style="display: contents">
                    @csrf

                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title" id="exampleModalLabel"><i class="fas fa-plus me-1"></i>{{
                                __('basic.new competition') }}</h5>
                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                        </div>
                        <div class="modal-body px-5">

                            <div class="row mb-1">

                                <div class="row mb-2">
                                    <div class="col-12 mb-2">
                                        <label class="form-label">{{ __('basic.competition') }}
                                            <small>({{ __('basic.optional') }})</small></label>
                                        <select id="competition_cat_id" name="competition_cat_id"
                                            class="js-example-basic-single_new js-example-basic-single select2-hidden-accessible">
                                            @foreach ($competition_cats as $item)
                                            <option value="{{$item->id }}">
                                                {{ $item->name }}
                                            </option>
                                            @endforeach
                                        </select>
                                        @error('competition_cat_id')
                                        <span class="error-msg-form">
                                            {{ $message }}
                                        </span>
                                        @enderror
                                    </div>

                                    <div class="row mb-3">
                                        <div class="col-12">
                                            <label class="form-label">
                                                {{ __('basic.points taken by client') }}
                                                <small>({{ __('basic.required') }})</small></label>
                                            <input name="points_taken_by_client" type="number"
                                                class="form-control @error('points_taken_by_client') is-invalid @enderror"
                                                placeholder="Write the points here" required
                                                value="{{ old('name', 10) }}">
                                        </div>
                                        @error('points_taken_by_client')
                                        <span class="error-msg-form">
                                            {{ $message }}
                                        </span>
                                        @enderror
                                    </div>
                                </div>

                            </div>
                        </div>
                        <div class="modal-footer">
                            <span class="text-gray-300 clickable-item-pointer me-3" data-bs-dismiss="modal">{{
                                __('basic.close') }}</span>
                            <input type="hidden" name="crm_event_id" value="{{ $event->id }}">
                            <button type="submit" class="btn btn-primary px-5">{{ __('basic.send') }}</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <div class="card card-input shadow mb-3 pb-3">
        <!-- Card Header - Dropdown -->
        <div class="card-header py-3 d-flex flex-row align-items-center justify-content-between">
            <h6 class="m-0 fw-bold text-gray-500"><i class="fas fa-calendar me-2"></i> {{ __('basic.events') }}
            </h6>

        </div>

        <!-- Card Body -->
        <div class="card-body px-3">
            <div class="row d-flex justify-content-around align-items-center my-2 px-1 px-md-5">

                <div class="col-8 col-md-4 d-flex align-items-center mb-3 mb-md-0">
                    <img id="avatar_final_info" class="rounded-circle avatar-m me-3"
                        src="{{ URL::asset('img/event/' . $event->main_img) }}">
                    <div class="">
                        <p class=" mb-0 text-xs text-gray-300">
                            {{ __('basic.name') }}</p>
                        <p id="number_final_info" class="mb-0 text-s text-gray-700 fw-bold">
                            {{ $event->name }}</p>
                    </div>
                </div>

                <div class="col-4 col-md-2">
                    <h6 class="text-gray-300 text-xs mb-1">{{ __('basic.start') }}</h6>
                    <p id="branch_final_info" class="text-gray-600 text-s fw-bold">
                        {{ $event->start_at }}</p>
                </div>

                <div class="col-4 col-md-2">
                    <h6 class="text-gray-300 text-xs mb-1">{{ __('basic.end') }}</h6>
                    <p id="addre_final_info" class="text-gray-600 text-s fw-bold">
                        {{ $event->end_at }}</p>
                </div>

                <div class="col-4 col-md-2">
                    <h6 class="text-gray-300 text-xs mb-1">{{ __('basic.creator') }}</h6>
                    <p id="addre_final_info" class="text-gray-600 text-s fw-bold">
                        {{ $event->creator?->name ?? 'N/A' }}</p>
                </div>

                <div class="col-4 col-md-2">
                    <div class="visible-print text-center">
                        {!! QrCode::color(68, 95,
                        129)->size(60)->style('round')->eye('circle')->generate($event->code) !!}
                        <p class="mt-1 mb-0 text-xs fw-bold text-gray-300">{{ $event->code }}</p>
                    </div>
                </div>
            </div>

            <hr>

            <div class="px-2 px-lg-5 mt-4">
                <div class="row mb-2 px-lg-5">
                    <div class="mb-3">
                        <label class="form-label text-gray-300">{{ __('basic.description') }}</label>
                        <div class="form-control-textarea overflow-auto">{{ $event->description }}
                        </div>
                    </div>
                </div>
            </div>

        </div>

    </div>


    @foreach ($event->competitions as $item)
    <div class="card card-input shadow mb-3 pb-3">
        <!-- Card Header - Dropdown -->
        <div class="card-header py-3 d-flex flex-row align-items-center justify-content-between">
            <h6 class="m-0 fw-bold text-gray-500"><i class="fas fa-calendar me-2"></i> {{ $item->name }}
            </h6>

            <div class="d-flex align-items-center">
                <div class="d-flex align-items-center me-2">
                    <p class="text-gray-300 text-xs mb-0 me-1">{{ __('basic.points taken by client') }}</p>
                    <p class="text-gray-600 text-s fw-bold mb-0">
                        {{ $item->points_taken_by_client }} {{ __('basic.points') }} |
                    </p>
                </div>

                <a class="new_action_modal_btn clickable-item-pointer me-2" data-bs-toggle="modal"
                    data-bs-target="#delete_modal_{{ $item->id }}"> <i class="fas fa-trash-alt me-1 text-red"></i></a>
                <!-- Delete Modal -->
                <div class="modal fade" id="delete_modal_{{ $item->id }}" tabindex="-1"
                    aria-labelledby="exampleModalLabel" aria-hidden="true">
                    <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable ">
                        <div class="modal-content b-r-s-cont border-0">

                            <div class="modal-header">
                                <div class="modal-title" id="exampleModalLabel"><i class="fas fa-trash me-1"></i>
                                    {{ __('basic.delete') }}</div>
                                <button type="button" class="btn-close" data-bs-dismiss="modal"
                                    aria-label="Close"></button>
                            </div>

                            <form action="{{ route('sett.delete_event_competition', 'test') }}" method="post">
                                {{ method_field('post') }}
                                {{ csrf_field() }}

                                <!-- Modal content -->
                                <div class="modal-body px-4">
                                    <div class="modal-body delete-conf-input text-center py-0">
                                        <p class="mb-0">{{ __('basic.delete message') }}</p><br>
                                        <input type="hidden" name="item_id" value="{{ $item->id }}">
                                    </div>
                                </div>

                                <div class="modal-footer">
                                    <div class="left-side">
                                        <button type="button" class="btn btn-default btn-link"
                                            data-bs-dismiss="modal">{{
                                            __('basic.never mind') }}</button>
                                    </div>
                                    <div class="divider"></div>
                                    <div class="right-side">
                                        <button type="submit" class="btn btn-default btn-link text-red">{{
                                            __('basic.delete') }}
                                        </button>
                                    </div>

                                </div>
                            </form>

                        </div>
                    </div>
                </div>

                <a data-bs-toggle="modal" data-bs-target="#edit_modal_{{ $item->id }}"
                    class="new_action_modal_btn clickable-item-pointer"> <i class="fas fa-plus me-1 text-green"></i></a>

                <!-- Edit Modal -->
                <div class="modal side_modal_prox fade" id="edit_modal_{{ $item->id }}" tabindex="-1"
                    aria-labelledby="exampleModalLabel" aria-hidden="true">
                    <div class="modal-dialog shadow-lgg modal-dialog-scrollable">

                        <form id="myform" class="mb-0" action="{{ route('sett.store_event_participant', $item->id)
                                    }}" method="POST" enctype="multipart/form-data" style="display: contents">
                            @csrf
                            @method('post')

                            <div class="modal-content">
                                <div class="modal-header">
                                    <h5 class="modal-title" id="exampleModalLabel"><i class="fas fa-edit me-1"></i>{{
                                        __('basic.update') }}</h5>
                                    <button type="button" class="btn-close" data-bs-dismiss="modal"
                                        aria-label="Close"></button>
                                </div>
                                <div class="modal-body px-5">
                                    <div class="row mb-1">

                                        <div class="row">

                                            <div class="avatar-update-container">
                                                <div class="picture">
                                                    <img src="{{ URL::asset('img/event/competition/participant/default-img.jpg') }}"
                                                        class="picture-src" id="mib_PicturePreview" title="" />
                                                    <input type="file" name='avatar' accept="image/*"
                                                        id="mib_img_input">
                                                </div>
                                                <h6 class="text-gray-300"> {{ __('basic.choose pic')}}</h6>

                                                @error('avatar')
                                                <span class="error-msg-form">
                                                    {{ $message }}
                                                </span>
                                                @enderror
                                            </div>
                                            <div class="col-12 mb-2">
                                                <div class="mb-3">
                                                    <label class="form-label">
                                                        {{ __('basic.name') }}
                                                        <small>({{ __('basic.required')
                                                            }})</small></label>
                                                    <input name="name" type="text"
                                                        class="form-control @error('name') is-invalid @enderror"
                                                        placeholder="Write name here" required>
                                                </div>

                                                @error('name')
                                                <span class="error-msg-form">
                                                    {{ $message }}
                                                </span>
                                                @enderror
                                            </div>

                                            <div class="row mb-2">
                                                <div class="col-12 mb-0">
                                                    <label class="form-label">{{ __('basic.description')
                                                        }}
                                                        <small>({{ __('basic.optional')
                                                            }})</small></label>
                                                    <textarea name="description" class="form-control"
                                                        placeholder="Write here your description .." rows="4"
                                                        spellcheck="false"></textarea>
                                                    @error('description')
                                                    <span class="error-msg-form">
                                                        {{ $message }}
                                                    </span>
                                                    @enderror
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <input type="hidden" name="event_competition_id" value="{{ $item->id }}">
                                    <div class="modal-footer">
                                        <span class="text-gray-300 clickable-item-pointer me-3"
                                            data-bs-dismiss="modal">{{
                                            __('basic.close') }}</span>
                                        <button type="submit" class="btn btn-primary px-5">{{
                                            __('basic.send') }}</button>
                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>

        </div>

        <!-- Card Body -->
        <div class="card-body px-3">
            <div class="row d-flex justify-content-around align-items-center my-2 px-1 px-md-5">

                @foreach ($item->participants as $participant)
                <div class="col-4 col-md-2 text-center">
                    <img src="{{ URL::asset('img/event/competition/participant/' . $participant->main_img) }}"
                        class="rounded-circle avatar-m2" alt="">
                    <p class="mb-0 text-xs text-gray-300 text-center">
                        {{ $participant->name }}
                    </p>
                    <p class="mb-0 text-xs text-gray-300 text-center">
                        {{ $participant->number_voters ?? 0 }} {{ __('basic.voters') }}
                    </p>
                    @if (!$item->is_done)
                    <div>
                        <button type="button" class="btn btn-primary btn-sm" data-bs-toggle="modal"
                            data-bs-target="#winner_modal_{{ $participant->id }}">
                            {{ __('basic.add as winner') }}
                        </button>
                    </div>
                    <!-- Winner Confirmation Modal -->
                    <div class="modal fade" id="winner_modal_{{ $participant->id }}" tabindex="-1"
                        aria-labelledby="exampleModalLabel" aria-hidden="true">
                        <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
                            <div class="modal-content b-r-s-cont border-0">

                                <div class="modal-header">
                                    <div class="modal-title" id="exampleModalLabel">
                                        <i class="fas fa-trophy me-1 text-warning"></i>
                                        {{ __('basic.confirm winner') }}
                                    </div>
                                    <button type="button" class="btn-close" data-bs-dismiss="modal"
                                        aria-label="Close"></button>
                                </div>

                                <form action="{{ route('sett.store_event_participant_win', $participant->id) }}"
                                    method="POST">
                                    @csrf
                                    <!-- Modal content -->
                                    <div class="modal-body px-4">
                                        <div class="modal-body delete-conf-input text-center py-0">
                                            <p class="mb-1">{{

                                                __('basic.are you sure you want to make it a winner?') }}
                                            </p>
                                            <p class="mb-0 text-muted small">{{
                                                __('basic.points will be distributed to all voters.') }}</p>
                                        </div>
                                    </div>

                                    <div class="modal-footer">
                                        <div class="left-side">
                                            <button type="button" class="btn btn-default btn-link"
                                                data-bs-dismiss="modal">
                                                {{ __('basic.never mind') }}
                                            </button>
                                        </div>
                                        <div class="divider"></div>
                                        <div class="right-side">
                                            <button type="submit" class="btn btn-default btn-link text-success">
                                                {{ __('basic.confirm') }}
                                            </button>
                                        </div>
                                    </div>
                                </form>

                            </div>
                        </div>
                    </div>
                    @endif
                    @if($participant->is_winner)
                    <div>
                        <p class="mb-0 text-s text-green fw-bold text-center">
                            {{ __('basic.winner') }}
                        </p>
                    </div>
                    @endif
                </div>
                @endforeach
            </div>

        </div>

    </div>
    @endforeach

</div>

@endsection

<!-- js insert -->
@section('js')
<!-- select 2 -->
<script src="https://fastly.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js">
</script>
<script>
    $(document).ready(function() {
            $('.js-example-basic-single_branch').select2();
            //hide search

            $('.js-example-basic-single_new').select2({
                dropdownParent: $("#create_new_modal"),
            });

            $('.select2-no-search_branch').select2({
                minimumResultsForSearch: -1
            });


        });
</script>

<!-- jquery ui datepicker -->
<script type="text/javascript"
    src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.1/js/bootstrap-datepicker.min.js"></script>
<script>
    $(function() {
            $('.hasdatetimepicker').datepicker({
                todayHighlight: true,
                format: "yyyy-mm-dd",
            });
        });
</script>

<!-- delete confirmation modal -->
<script>
    $('.delete-conf').click(function(event) {
            var user_id = $(this).data("user_id");
            var username = $(this).data("username");
            console.log(user_id);
            var modal = $('.delete-conf-input [name="user_id"]')
            modal.val(user_id);
            $('#username').val(username);
        })
</script>


@endsection