@extends('Dashboard.layouts.master')
@section('title', 'Experience | Edit')
@section('css')
@endsection
@section('content')
    <div class="app-main flex-column flex-row-fluid" id="kt_app_main">
        <div class="d-flex flex-column flex-column-fluid">

            <livewire:bread-crumb heading="{{__('translations.experiences')}}"
                                  url_1="{{Helper::handle_route('dashboard')}}" name_1="Home"
                                  url_2="{{Helper::handle_route('experiences.index')}}"
                                  name_2="{{__('translations.experiences')}}" name_3="{{__('forms.edit')}}"/>

            <div id="kt_app_content" class="app-content flex-column-fluid">
                <!--begin::Content container-->
                <div id="kt_app_content_container" class="app-container container-xxl">

                    <div class="card">
                        <form action="{{Helper::handle_route('experiences.update' , $experience)}}" method="POST"
                              class="form" enctype="multipart/form-data">
                            @csrf
                            @method('PUT')

                            <div class="card-body">
                                <ul class="nav nav-tabs" role="tablist">
                                    <li class="nav-item">
                                        <a class="nav-link active" data-bs-toggle="tab"
                                           href="#activity">Information</a>
                                    </li>
                                    <li class="nav-item">
                                        <a class="nav-link" data-bs-toggle="tab"
                                           href="#media">Media @error('medias.*')
                                            <span class="text-danger">*</span> @enderror</a>
                                    </li>
                                    <li class="nav-item">
                                        <a class="nav-link" data-bs-toggle="tab"
                                           href="#activityFeatures">Features @error('new_features.*')
                                            <span class="text-danger">*</span> @enderror</a>
                                    </li>
                                    <li class="nav-item">
                                        <a class="nav-link" data-bs-toggle="tab"
                                           href="#activityBenefits">Benefits @error('benefits.*')
                                            <span class="text-danger">*</span> @enderror</a>
                                    </li>

                                    <li class="nav-item">
                                        <a class="nav-link" data-bs-toggle="tab"
                                           href="#activityPolicies">Policies</a>
                                    </li>

                                </ul>
                                <div class="tab-content">
                                    <div id="activity" class="tab-pane active"><br>
                                        <div class="mb-5">
                                            <livewire:form.image label="{{__('forms.image')}}"
                                                                 name="image"
                                                                 remove_name="remove_main"
                                                                 value="{{$experience->getFirstMediaUrl('experience_image')}}"/>
                                        </div>

                                        <div class="mb-3">
                                            <livewire:form.text label="Title"
                                                                value="{{$experience->title}}"
                                                                name="title"
                                                                required="required"/>
                                        </div>

                                        <div class="mb-5">
                                            <label>{{__('forms.status')}}</label>
                                            <select name="status" class="form-control">
                                                <option
                                                    value="1" {{$experience->status == 1 ? 'selected' : ''}}>{{__('forms.enabled')}}</option>
                                                <option
                                                    value="0" {{ $experience->status == 0 ? 'selected' : ''}}>{{__('forms.disabled')}}</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div id="media" class="tab-pane"><br>
                                        <!--begin::Repeater-->
                                        <!--begin::Form group-->
                                        <div class="form-group">
                                            <div class="form-group row">
                                                @foreach($experience?->medias as $key => $media)
                                                    <div class="col-md-3">
                                                        <input type="hidden" name="medias[{{$key}}][media_id]"
                                                               value="{{$media->id}}">
                                                        <livewire:form.image
                                                            value="{{$media->getFirstMediaUrl('experience_media_image')}}"
                                                            remove_name="medias[{{$key}}][remove_image]"
                                                            name="medias[{{$key}}][image]"
                                                            label="{{__('forms.image') . ++$key}} "/>
                                                    </div>
                                                @endforeach
                                                <div class="separator my-10"></div>
                                                @for($i = count($experience?->medias) ; $i<3 ; $i++)
                                                    <div class="col-md-3">
                                                        <livewire:form.image
                                                            label="{{__('forms.image') . $i + 1 }}"
                                                            remove_name="medias[][remove_image]"
                                                            name="medias[][image]"/>
                                                    </div>
                                                @endfor
                                            </div>

                                        </div>
                                        <!--end::Repeater-->
                                    </div>
                                    <div id="activityFeatures" class="tab-pane"><br>
                                        <!--begin::Repeater-->
                                        <div id="kt_docs_repeater_features">
                                            <!--begin::Form group-->
                                            <div class="form-group">
                                                <div data-repeater-list="new_features">
                                                    @foreach( old('new_features' , $experience?->features) as $key => $feature)
                                                        <div data-repeater-item class="mt-5">
                                                            <div class="form-group row">
                                                                <input type="hidden"
                                                                       name="feature_id"
                                                                       value="{{$feature['id'] ?? ''}}">

                                                                <div class="col-md-6">
                                                                    <label class="form-label">Feature title: <span
                                                                            class="text-danger">*</span></label>
                                                                    <input type="text" class="form-control mb-2 mb-md-0"
                                                                           value="{{$feature['title'] ?? ''}}"
                                                                           name="new_features[][title]"/>
                                                                    @error('new_features.'.$key.'.title')
                                                                    <span
                                                                        class="text-danger"> {{ $errors->first('new_features.'.$key.'.title') }} </span>
                                                                    @enderror
                                                                </div>

                                                                <div class="col-md-2">
                                                                    <label class="form-label">Feature Price: <span
                                                                            class="text-danger">*</span></label>
                                                                    <input type="number"
                                                                           class="form-control mb-2 mb-md-0"
                                                                           value="{{$feature['price'] ?? ''}}"
                                                                           name="new_features[][price]"/>
                                                                    @error('new_features.'.$key.'.price')
                                                                    <span
                                                                        class="text-danger"> {{ $errors->first('new_features.'.$key.'.price') }} </span>
                                                                    @enderror
                                                                </div>

                                                                <div class="col-md-2">
                                                                    <label class="form-label">Feature Discount:</label>
                                                                    <input type="number"
                                                                           class="form-control mb-2 mb-md-0"
                                                                           value="{{$feature['discount'] ?? ''}}"
                                                                           name="new_features[][discount]" max="100"
                                                                           min="0"/>
                                                                    @error('new_features.'.$key.'.discount')
                                                                    <span
                                                                        class="text-danger"> {{ $errors->first('new_features.'.$key.'.discount') }} </span>
                                                                    @enderror
                                                                </div>

                                                                <div class="col-md-2">
                                                                    <label class="form-label">Feature Date:</label>
                                                                    <input type="date" class="form-control mb-2 mb-md-0"
                                                                           value="{{$feature['experience_date'] ?? ''}}"
                                                                           name="new_features[][experience_date]"/>
                                                                    @error('new_features.'.$key.'.experience_date')
                                                                    <span
                                                                        class="text-danger"> {{ $errors->first('new_features.'.$key.'.experience_date') }} </span>
                                                                    @enderror
                                                                </div>

                                                                <div class="col-md-2 mt-md-2">
                                                                    <label class="form-label">Feature start
                                                                        time:</label>
                                                                    <input type="time" class="form-control mb-2 mb-md-0"
                                                                           value="{{$feature['start_time'] ?? ''}}"
                                                                           name="new_features[][start_time]"/>
                                                                    @error('new_features.'.$key.'.start_time')
                                                                    <span
                                                                        class="text-danger"> {{ $errors->first('new_features.'.$key.'.start_time') }} </span>
                                                                    @enderror
                                                                </div>
                                                                <div class="col-md-2 mt-md-2">
                                                                    <label class="form-label">Feature end time:</label>
                                                                    <input type="time" class="form-control mb-2 mb-md-0"
                                                                           value="{{$feature['end_time'] ?? ''}}"
                                                                           name="new_features[][end_time]" />
                                                                    @error('new_features.'.$key.'.end_time')
                                                                    <span
                                                                        class="text-danger"> {{ $errors->first('new_features.'.$key.'.end_time') }} </span>
                                                                    @enderror
                                                                </div>

                                                                <div class="col-md-2">
                                                                    <a href="javascript:;" data-repeater-delete
                                                                       class="btn btn-sm btn-light-danger mt-3 mt-md-8">
                                                                        <i class="fa fa-trash fs-5"></i>
                                                                        Delete
                                                                    </a>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    @endforeach

                                                </div>
                                            </div>
                                            <!--end::Form group-->

                                            <!--begin::Form group-->
                                            <div class="form-group mt-5">
                                                <a href="javascript:;" data-repeater-create
                                                   class="btn btn-light-primary">
                                                    <i class="fa fa-plus fs-3"></i>
                                                    Add Feature
                                                </a>
                                            </div>
                                            <!--end::Form group-->
                                        </div>
                                        <!--end::Repeater-->
                                    </div>
                                    <div id="activityBenefits" class="tab-pane"><br>

                                        <!--begin::Repeater-->
                                        <div id="kt_docs_repeater_benefits">
                                            <!--begin::Form group-->
                                            <div class="form-group">
                                                <div data-repeater-list="benefits">
                                                    @foreach(old('benefits', $experience?->benefits) as $index => $benefit)
                                                        <div data-repeater-item class="mt-5"
                                                             data-error="{{ $errors->has('benefits.*.title') || $errors->has('benefits.*.description') }}">
                                                            <input type="hidden" name="benefit_id"
                                                                   value="{{$benefit['id'] ?? ''}}">
                                                            <div class="form-group row">
                                                                <div class="col-12">
                                                                    <label class="form-label">Benefit title: <span
                                                                            class="text-danger">*</span></label>
                                                                    <input type="text" class="form-control mb-2 mb-md-0"
                                                                           value="{{ $benefit['title'] ?? '' }}"
                                                                           name="benefits[][title]"/>
                                                                    @error('benefits.'.$index.'.title')
                                                                    <span
                                                                        class="text-danger"> {{ $errors->first('benefits.'.$index.'.title') }} </span>
                                                                    @enderror
                                                                </div>

                                                                <div class="col-12 mt-3">
                                                                    <label class="form-label">Benefit description: <span
                                                                            class="text-danger">*</span></label>
                                                                    <textarea
                                                                        class="form-control mb-2 mb-md-0 resize-none"
                                                                        name="benefits[][description]"
                                                                        rows="5">  {{ $benefit['description'] ?? '' }}</textarea>
                                                                    @error('benefits.'.$key.'.description')
                                                                    <span
                                                                        class="text-danger"> {{ $errors->first('benefits.'.$key.'.description') }} </span>
                                                                    @enderror
                                                                </div>

                                                                <div class="col-md-2">
                                                                    <a href="javascript:;" data-repeater-delete
                                                                       class="btn btn-sm btn-light-danger mt-3 mt-md-8">
                                                                        <i class="fa fa-trash fs-5"></i>
                                                                        Delete
                                                                    </a>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    @endforeach
                                                </div>
                                            </div>
                                            <!--end::Form group-->

                                            <!--begin::Form group-->
                                            <div class="form-group mt-5">
                                                <a href="javascript:;" data-repeater-create
                                                   class="btn btn-light-primary">
                                                    <i class="fa fa-plus fs-3"></i>
                                                    Add Benefit
                                                </a>
                                            </div>
                                            <!--end::Form group-->
                                        </div>
                                        <!--end::Repeater-->
                                    </div>
                                    <div id="activityPolicies" class="tab-pane"><br>

                                        <!--begin::Repeater-->
                                        <div id="kt_docs_repeater_policies">
                                            <!--begin::Form group-->
                                            <div class="form-group">
                                                <div data-repeater-list="policies">
                                                    @if(count($experience?->policies) == 0)
                                                        <div data-repeater-item class="mt-5">
                                                            <input type="hidden" name="policie_id"
                                                                   value="">
                                                            <div class="form-group row">
                                                                <div class="col-12">
                                                                    <label>Policie title:</label>
                                                                    <input type="text" class="form-control mb-2 mb-md-0"
                                                                           name="title"/>
                                                                </div>

                                                                <div class="col-12 mt-3">
                                                                    <livewire:form.area label="Policie description"
                                                                                        name="description"/>
                                                                </div>

                                                                <div class="col-md-2">
                                                                    <a href="javascript:;" data-repeater-delete
                                                                       class="btn btn-sm btn-light-danger mt-3 mt-md-8">
                                                                        <i class="fa fa-trash fs-5"></i>
                                                                        Delete
                                                                    </a>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    @endif
                                                    @foreach($experience?->policies as $policie)
                                                        <div data-repeater-item class="mt-5">
                                                            <div class="form-group row">
                                                                <input type="hidden" name="policie_id"
                                                                       value="{{$policie->id}}">
                                                                <div class="col-12">
                                                                    <label class="form-label">Policy title:</label>
                                                                    <input type="text" class="form-control mb-2 mb-md-0"
                                                                           value="{{$policie->title}}"
                                                                           name="title"/>
                                                                </div>
                                                                <div class="col-12 mt-3">
                                                                    <livewire:form.area label="Policy description"
                                                                                        value="{{$policie->description}}"
                                                                                        name="description"/>
                                                                </div>

                                                                <div class="col-md-2">
                                                                    <a href="javascript:;" data-repeater-delete
                                                                       class="btn btn-sm btn-light-danger mt-3 mt-md-8">
                                                                        <i class="fa fa-trash fs-5"></i>
                                                                        Delete
                                                                    </a>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    @endforeach
                                                </div>
                                            </div>
                                            <!--end::Form group-->

                                            <!--begin::Form group-->
                                            <div class="form-group mt-5">
                                                <a href="javascript:;" data-repeater-create
                                                   class="btn btn-light-primary">
                                                    <i class="fa fa-plus fs-3"></i>
                                                    Add Policy
                                                </a>
                                            </div>
                                            <!--end::Form group-->
                                        </div>
                                        <!--end::Repeater-->
                                    </div>
                                </div>
                            </div>
                            <div class="card-footer">
                                <input type="submit" value="{{__('forms.save')}}" class="btn btn-primary">
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection
@section('scripts')
    <script>
        $(document).ready(function () {
            $('.kt_docs_ckeditor_classic').each(function () {
                CKEDITOR.replace($(this)[0]).config.width = '100%';
            });

            $('#kt_docs_repeater_features, #kt_docs_repeater_policies ,  #kt_docs_repeater_benefits').repeater({
                initEmpty: false,

                show: function () {
                    $(this).slideDown();
                    let textarea = $(this).find('.kt_docs_ckeditor_classic')
                    CKEDITOR.replace(textarea[0]).config.width = '100%';
                },

                hide: function (deleteElement) {
                    $(this).slideUp(deleteElement);
                }
            });

        });
    </script>
@endsection