@extends('Admin.Layouts.Dashboard')

@section('styles')
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.css"/>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.20/summernote-lite.min.css"/>

    <link rel="stylesheet" href="{{asset('css/gallery.css')}}"/>

    <script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>
    <script src="{{asset('js/hls.min.js')}}"></script>

    <style>

        @media (max-width: 780px) {
            .card {
                position: initial !important;
                top: 0;
                right: 0;
                height: 100%;
                width: 100%;
                z-index: 999999;
            }
        }

        .app {
            overflow: initial !important;
        }

        .uploaded-image.meta-data {
            width: 200px;
            height: 300px;
        }

        .uploaded-image.meta-data .uploaded-image-label {
            width: 100%;
            height: 200px;
        }
    </style>
@endsection

@section('content')

    <!-- breadcrumb -->
    <div class="breadcrumb-header justify-content-between">
        <div class="my-auto">
            <div class="d-flex">
                <h4 class="content-title mb-0 my-auto">الرئيسية</h4>
                <span class="text-muted mt-1 tx-13 ms-2 mb-0">/ العقارات</span>
                <span class="text-muted mt-1 tx-13 ms-2 mb-0">/ {{$page_title}}</span>
            </div>
        </div>
    </div>

    <!-- Row -->
    <div class="row row-sm">
        <div class="col-lg-12">
            <div class="card">
                <div class="card-header">
                    <h5 class="card-title" id="exampleModalLabel">{{$page_title}}</h5>
                </div>

                <div class="card-body">

                    @include('Messages')

                    <form method="POST" id="form-store"
                          action="{{ dashboard_route('units.meta.update', $unit->id) }}">

                        @method('PUT')

                        @csrf

                        <h3>بيانات العقار</h3>

                        <div class="form-group">
                            <div class="form-group">
                                <div class="mt-2 justify-content-start">
                                    <label for="name_ar" class="form-label">اسم العقار:</label>
                                    <input type="text" id="name_ar" name="name_ar"
                                           value="{{old('name_ar') ?? $unit->name_ar ?? null}}"
                                           class="form-control" required/>
                                </div>
                            </div>
                        </div>

                        <div class="form-group">
                            <label for="name_en">اسم العقار باللغة الانجليزية:</label>
                            <input type="text" id="name_en" name="name_en"
                                   value="{{old('name_en') ?? $unit->name_en ?? null}}" class="form-control"
                                   required/>
                        </div>

                        <div class="form-group">
                            <label for="details_ar">وصف العقار</label>
                            <textarea id="details_ar" name="details_ar" class="form-control summernote"
                                      required>{{old('details_ar') ?? $unit->details->details_ar ?? null}}</textarea>
                        </div>

                        <div class="form-group">
                            <label for="details_en">وصف العقار باللغة الانجليزية:</label>
                            <textarea id="details_en" name="details_en" class="form-control summernote"
                                      required>{{old('details_en') ?? $unit->details->details_en ?? null}}</textarea>
                        </div>

                        <div id="main-image-wrapper">
                            <label for="main_image" class="form-label">صورة العرض الرئيسية</label>

                            <p class="text-muted">مطلوب صورة واحدة فقط</p>

                            <div class="upload-images-wrapper">
                                <label for="main_image" class="upload-image">
                                    <i class="fa fa-image d-none"></i>
                                    <span class="d-none">أضف صورة العرض الرئيسية</span>

                                    <img id="blah"
                                         src="{{asset(UNIT_ORIGINAL_IMAGE.'/'.$unit->main_image)}}"
                                         class="d-block"/>
                                </label>
                            </div>

                            <input type="file" name="main_image" id="main_image" class="d-none single-image"/>
                        </div>

                        <div class="form-group">
                            <label for="main_image_alt_ar">Main image Alt in arabic</label>
                            <input type="text" id="main_image_alt_ar" name="main_image_alt_ar" class="form-control" value="{{$unit->main_image_alt_ar ?? $unit->name_ar ?? null}}" />
                        </div>

                        <div class="form-group">
                            <label for="main_image_alt_en">Main image Alt in english</label>
                            <input type="text" id="main_image_alt_en" name="main_image_alt_en" class="form-control" value="{{$unit->main_image_alt_en ?? $unit->name_en ?? null}}" />
                        </div>

                        <div id="gallery-upload" class="mt-4">
                            <label for="gallery" class="form-label">صور العقار</label>
                            <p class="text-muted">مطلوب 6 صور عالاقل</p>

                            <div class="upload-images-wrapper">
                                <label for="gallery" class="upload-image">
                                    <i class="fa fa-images"></i>
                                    <span>اضغط لاضافة صور للعقار</span>
                                </label>
                            </div>

                            <input type="file" id="gallery" class="d-none gallery-image-field" data-name="gallery"
                                   multiple accept="image/*"/>
                        </div>

                        <div id="gallery-wrapper" class="mt-4 d-flex">
                            @foreach($galleryImages as $key => $item)

                                <div class="uploaded-image meta-data">
                                    <label class="uploaded-image-label">
                                        @php
                                            $path = get_unit_image($item->image_path, 'original');
                                        @endphp

                                        <a href="{{$path}}" class="single-image-link">
                                            <img src="{{$path}}" alt=""/>
                                        </a>
                                    </label>

                                    <button class="remove-image"><i class="fa fa-times"></i></button>
                                    <input class="gallery-image-path" id="gallery-{{$key}}"
                                           value="{{$item?->image_path ?? null}}"
                                           type="hidden" name="gallery[{{$item->id}}][old_image_path]"
                                           accept="image/*"/>

                                    <div class="image-meta-data-field">
                                        <div class="form-group">
                                            <input type="text" class="form-control"
                                                   id="gallery[{{$item->id}}][alt_ar]"
                                                   name="gallery[{{$item->id}}][alt_ar]"
                                                   value="{{$item?->alt_ar ?? $unit->name_ar ?? ''}}" placeholder="alt in arabic"
                                                   required/>
                                        </div>

                                        <div class="form-group">
                                            <input type="text" class="form-control" id="gallery[{{$item->id}}][alt_en]"
                                                   name="gallery[{{$item->id}}][alt_en]" value="{{$item?->alt_en ?? $unit->name_en ?? ''}}"
                                                   placeholder="alt in english"/>
                                        </div>
                                    </div>

                                </div>
                            @endforeach
                        </div>

                        <h3 class="mt-3">بيانات ال SEO</h3>

                        <div class="form-group">
                            <div class="mt-2 justify-content-start">
                                <label for="meta[title_ar]" class="form-label">Title in arabic</label>
                                <input type="text" id="meta[title_ar]" name="meta[title_ar]"
                                       value="{{old('meta')['title_ar'] ?? $meta->title_ar ?? $unit->name_ar ?? null}}"
                                       class="form-control"/>
                            </div>
                        </div>

                        <div class="form-group">
                            <div class="mt-2 justify-content-start">
                                <label for="meta[title_en]" class="form-label">Title in english</label>
                                <input type="text" id="meta[title_en]" name="meta[title_en]"
                                       value="{{old('meta')['title_en'] ?? $meta->title_en ?? $unit->name_en ?? null}}"
                                       class="form-control"/>
                            </div>
                        </div>

                        <div class="form-group">
                            <div class="mt-2 justify-content-start">
                                <label for="meta[description_ar]" class="form-label">Description in arabic</label>
                                <textarea id="meta[description_ar]" name="meta[description_ar]"
                                          class="form-control" rows="10">{{old('meta')['description_ar'] ?? $meta->description_ar ?? $unit->details->details_ar ?? null}}</textarea>
                            </div>
                        </div>

                        <div class="form-group">
                            <div class="mt-2 justify-content-start">
                                <label for="meta[description_en]" class="form-label">Description in english</label>
                                <textarea id="meta[description_en]" name="meta[description_en]"
                                          class="form-control" rows="10">{{old('meta')['description_en'] ?? $meta->description_en ?? $unit->details->details_en ?? null}}</textarea>
                            </div>
                        </div>

                        <div class="form-group">
                            <div class="mt-2 justify-content-start">
                                <label for="meta[keywords_ar]" class="form-label">Keywords in arabic</label>
                                <input type="text" id="meta[keywords_ar]" name="meta[keywords_ar]"
                                       value="{{old('meta')['keywords_ar'] ?? $meta->keywords_ar ?? null}}"
                                       class="form-control"/>
                            </div>
                        </div>

                        <div class="form-group">
                            <div class="mt-2 justify-content-start">
                                <label for="meta[keywords_en]" class="form-label">Keywords in english</label>
                                <input type="text" id="meta[keywords_en]" name="meta[keywords_en]"
                                       value="{{old('meta')['keywords_en'] ?? $meta->keywords_en ?? null}}"
                                       class="form-control"/>
                            </div>
                        </div>

                        <button type="submit" class="btn btn-success button-icon"><i
                                    class="fa fa-check me-1"></i> تعديل البيانات
                        </button>

                        <a href="{{dashboard_route('units.index')}}" id="refuse-unit"
                           class="btn btn-danger button-icon"><i class="fa fa-times me-1"></i> الإلغاء </a>

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

@endsection

@section('scripts')
    <!-- Include Summernote JS -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.18/summernote-bs4.min.js"></script>

    <script>
        $('.summernote').summernote({
            height: 150
        });
    </script>
@endsection