@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="{{asset('js/hls.min.js')}}"></script>
    <link href="{{asset('css/bootstrap-datetimepicker.css')}}" rel="stylesheet" />

    <style>
        #hour_in,
        #hour_out {
            margin-right: 5px;
        }

        #minutes_in,
        #minutes_out {
            margin-left: 5px;
        }

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

        .app {
            overflow: initial !important;
        }
    </style>
@endsection

@section('content')
    <div class="modal fade" id="refuse-request" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog" role="document"></div>
    </div>

    <!-- 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.gallery.accept', $unit->id)}}" enctype="multipart/form-data">
                        @csrf

                        <div class="form-group">
                            <label for="name_ar">اسم العقار</label>
                            <div class="form-group">
                                <div class="mt-2 justify-content-start">
                                    <label for="single_beds" class="form-label">اسم العقار:</label>
                                    <input type="text" id="name_ar" name="name_ar" value="{{old('name_ar') ?? $unit_info['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_info['name_en'] ?? null}}" class="form-control" required />
                        </div>

                        @if(array_key_exists('lat', $unit_info) && array_key_exists('lng', $unit_info))
                            <input id="searchInput" class="form-control controls" name="address" value="{{$unit_info['address'] ?? null}}" type="text" placeholder="برجاء ادخال عنوان العقار" required />

                            <div id="googleMap" style="width:100%;height:400px;"></div>

                            <div class="form-group">
                                <input type="hidden" id="lat" value="{{$unit_info['lat']}}" name="lat" required />
                                <input type="hidden" id="lng" value="{{$unit_info['lng']}}" name="lng" required />

                                <div class="text-danger @error('lat') active @enderror">
                                    @error('lat')
                                    {{ $message }}
                                    @enderror
                                </div>
                            </div>
                        @endif

                        <div class="row">
                            <div class="col-md-6 col-xs-12">
                                <div class="form-group">
                                    <label for="unit_type_id" class="form-label">نوع المبيت</label>

                                    <h6 class="text-muted"><small>برجاء اختيار نوع المبيت المناسب</small></h6>

                                    <div id="unit-types">
                                        @foreach($unit_types as $key => $unit_type)
                                            <div class="checkbox-container">
                                                <input type="radio" name="unit_type_id" value="{{$unit_type->id}}" class="d-none image-checkbox-input" id="image-checkbox-input-{{$key}}" {{$unit_info['unit_type_id'] == $unit_type->id ? 'checked' : ''}} required />

                                                <label class="image-check-box" for="image-checkbox-input-{{$key}}" style="background-image: url('{{get_image_path('types', $unit_type->image)}}')">
                                                    <span>{{$unit_type->name_ar}}</span>
                                                </label>
                                            </div>
                                        @endforeach
                                    </div>

                                    <div class="text-danger @error('unit_type_id') active @enderror">
                                        @error('unit_type_id')
                                        {{ $message }}
                                        @enderror
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="form-group">
                            <label for="province_id" class="form-label">المنطقة</label>

                            <select class="select2 mt-2 w-100 @error('province_id') has-error @enderror" id="province_id" name="province_id" required>
                                <option></option>

                                @foreach($provinces as $province)
                                    <option value="{{$province->id}}" {{ $province->id == $unit_info['city']['province_id'] ? 'selected' : ''  }}>{{$province->name_ar}}</option>
                                @endforeach
                            </select>
                        </div>

                        <div class="form-group">
                            <label for="city_id">المدينة</label>

                            <select class="select2 mt-2 w-100 @error('city_id') has-error @enderror" id="city_id" name="city_id" required>
                                @if(check_array_key('city_id', $unit_info))
                                    <option value="{{$unit_info['city']['id']}}" selected>{{$unit_info['city']['name_ar']}}</option>
                                @endif
                            </select>
                        </div>

                        <div class="form-group">
                            <label for="region">الحي</label>

                            <select class="select2 mt-2 w-100 @error('region_id') has-error @enderror" id="region_id" name="region_id" required>
                                @if(check_array_key('region_id', $unit_info))
                                    <option value="{{$unit_info['region_id']}}" selected>{{$unit_info['region_name']}}</option>
                                @endif
                            </select>

                        </div>

                        <div class="form-group">
                            <div class="form-inline">
                                <label for="area" class="form-label">مساحة عقارك</label>
                                <input type="text" class="form-control" name="area" id="area" value="{{old('area') ?? $unit_info['area'] ?? null}}" required />
                                <label>متر مربع</label>
                            </div>
                        </div>

                        <div class="form-group">
                            <label for="area">مرافق عقارك الرئيسية</label>

                            <div class="flex-check-boxes" id="unit-contents">
                                @foreach(config('units.contents') as $key => $content)
                                    @if($key !== 'additional')
                                        <div class="checkbox-container with-svg">
                                            <input type="checkbox" value="{{$content['id']}}" name="unit_contents[]" class="d-none image-checkbox-input unit-contents-input" id="unit-content-{{$key}}" {{in_array($key, $unit_content) ? 'checked' : null}} />

                                            <label class="image-check-box" for="unit-content-{{$key}}">
                                                {!! $content['icon'] !!}
                                                <span>{{$content['name_ar']}}</span>
                                            </label>
                                        </div>
                                    @endif
                                @endforeach
                            </div>
                        </div>

                        <!-- Bedrooms -->
                        @if(in_array('rooms', $unit_content))
                            <h3>غرف النوم</h3>
                            <hr />

                            <div class="form-group">
                                <div class="form-inline numeric-form mt-2 justify-content-start">
                                    <label for="bedrooms" class="form-label">عدد غرف النوم:</label>

                                    <div class="up-down-numeric">
                                        <input type="number" class="form-control" id="bedrooms" name="bedrooms" value="{{old('bedrooms') ?? $unit_info['bedrooms'] ?? null}}" />
                                    </div>
                                </div>
                            </div>

                            <div class="form-group">
                                <div class="form-inline numeric-form mt-2 justify-content-start">
                                    <label for="single_beds" class="form-label">عدد الأسرة المفردة:</label>

                                    <div class="up-down-numeric">
                                        <input type="number" class="form-control" id="single_beds" name="single_beds" value="{{old('single_beds') ?? $unit_info['single_beds'] ?? null}}" />
                                    </div>
                                </div>
                            </div>

                            <div class="form-group">
                                <div class="form-inline numeric-form mt-2 justify-content-start">
                                    <label for="master_beds" class="form-label">عدد الأسرة الماستر:</label>

                                    <div class="up-down-numeric">
                                        <input type="number" class="form-control" id="master_beds" name="master_beds" value="{{old('master_beds') ?? $unit_info['master_beds'] ?? null}}" />
                                    </div>
                                </div>
                            </div>
                        @endif

                        <!-- Pools -->
                        @if(in_array('pools', $unit_content))
                            <h3>عدد المسابح</h3>
                            <hr />

                            <div class="form-group">
                                <div class="form-inline numeric-form mt-2 justify-content-start">
                                    <label for="bedrooms" class="form-label">عدد المسابح:</label>

                                    <div class="up-down-numeric">
                                        <input type="number" class="form-control" id="pools" name="pools" value="{{old('pools') ?? $unit_info['pools'] ?? null}}" />
                                    </div>
                                </div>
                            </div>
                        @endif

                        <!-- Receptions -->
                        @if(in_array('receptions', $unit_content))
                            <h3>المجالس</h3>
                            <hr />

                            <div class="form-group">
                                <div class="form-inline numeric-form mt-2 justify-content-start">
                                    <label for="receptions" class="form-label">عدد المجالس:</label>

                                    <div class="up-down-numeric">
                                        <input type="number" class="form-control" id="receptions" name="receptions" value="{{old('receptions') ?? $unit_info['receptions'] ?? null}}" />
                                    </div>
                                </div>
                            </div>

                            <div class="form-group">
                                <div class="form-inline numeric-form mt-2 justify-content-start">
                                    <label for="main_reception" class="form-label">مجلس رئيسي:</label>

                                    <div class="up-down-numeric">
                                        <input type="number" class="form-control" id="main_reception" name="main_reception" value="{{old('main_reception') ?? $unit_info['main_reception'] ?? null}}" />
                                    </div>
                                </div>
                            </div>

                            <div class="form-group">
                                <div class="form-inline numeric-form mt-2 justify-content-start">
                                    <label for="additional_reception" class="form-label">مجلس اضافي:</label>

                                    <div class="up-down-numeric">
                                        <input type="number" class="form-control" id="additional_reception" name="additional_reception" value="{{old('additional_reception') ?? $unit_info['additional_reception'] ?? null}}" />
                                    </div>
                                </div>
                            </div>

                            <div class="form-group">
                                <div class="form-inline numeric-form mt-2 justify-content-start">
                                    <label for="external_reception" class="form-label">جلسة خارجية:</label>

                                    <div class="up-down-numeric">
                                        <input type="number" class="form-control" id="external_reception" name="external_reception" value="{{old('external_reception') ?? $unit_info['external_reception'] ?? null}}" />
                                    </div>
                                </div>
                            </div>

                            <div class="form-group">
                                <div class="form-inline numeric-form mt-2 justify-content-start">
                                    <label for="external_extension" class="form-label">ملحق خارجي:</label>

                                    <div class="up-down-numeric">
                                        <input type="number" class="form-control" name="external_extension" id="external_extension" value="{{old('external_extension') ?? $unit_info['external_extension'] ?? null}}" />
                                    </div>
                                </div>
                            </div>
                        @endif

                        <!-- Toilets -->
                        @if(in_array('toilets', $unit_content))
                            <h3>دورات المياة</h3>
                            <hr />

                            <div class="form-group">
                                <div class="form-inline numeric-form mt-2 justify-content-start">
                                    <label for="toilets" class="form-label">عدد دورات المياة:</label>

                                    <div class="up-down-numeric">
                                        <input type="number" class="form-control" name="toilets" id="toilets" value="{{old('toilets') ?? $unit_info['toilets'] ?? null}}" />
                                    </div>
                                </div>
                            </div>
                        @endif

                        <!-- Kitchens -->
                        @if(in_array('kitchens', $unit_content))
                            <h3>المطابخ</h3>
                            <hr />

                            <div class="form-group">
                                <div class="form-inline numeric-form mt-2 justify-content-start">
                                    <label for="kitchens" class="form-label">عدد المطابخ:</label>

                                    <div class="up-down-numeric">
                                        <input type="number" class="form-control" id="kitchens" name="kitchens" value="{{old('kitchens') ?? $unit_info['kitchens'] ?? null }}" />
                                    </div>
                                </div>
                            </div>

                            <div class="form-group">
                                <div class="form-inline numeric-form mt-2 justify-content-start">
                                    <label for="table_seats" class="form-label">عدد كراسي طاولة الطعام:</label>

                                    <div class="up-down-numeric">
                                        <input type="number" class="form-control" id="table_seats" name="table_seats" value="{{old('table_seats') ?? $unit_info['table_seats'] ?? null}}" />
                                    </div>
                                </div>
                            </div>
                        @endif

{{--                        @foreach($amenities as $main_key => $amenity)--}}
{{--                            @foreach($amenity as $group)--}}

{{--                                <h6 class="amenity-label mt-4">{{$group['name']}}</h6>--}}

{{--                                <ul>--}}
{{--                                    @foreach($group['fields'] as $key => $field)--}}
{{--                                        <li class="form-label-light">{{$field['name']}}</li>--}}
{{--                                    @endforeach--}}
{{--                                </ul>--}}

{{--                            @endforeach--}}
{{--                        @endforeach--}}

{{--                        <h6 class="amenity-label mt-4">مميزات العقار</h6>--}}

{{--                        <ul>--}}
{{--                            @foreach($facilities as $key => $facility)--}}
{{--                                <li class="form-label-light">{{$facility->name_ar}}</li>--}}
{{--                            @endforeach--}}
{{--                        </ul>--}}

                        @foreach(config('units.contents') as $key => $content)
                            @if(!empty($amenities[$key][0]['fields']) && $key != 'additional')
                                @foreach($amenities[$key] as $amenity)
                                    <h6 class="amenity-label mt-4">{{$amenity['name']}}</h6>

                                    @foreach($amenity['fields'] as $key => $field)
                                        @php
                                            $field_name = field_name($amenity)
                                        @endphp

                                        <div class="form-inline multi-choice mt-2 {{$amenity['field_type']}}-form mt-2 text-right">
                                            <input class="d-none {{$field_name}}" onclick="deRequireCb('{{$field_name}}')" name="amenities[]" id="{{$field_name.$key}}" type="{{$amenity['field_type']}}" value="{{$field['id']}}" data-{{$amenity['is_required']}} {{in_array($field['id'], $unit_amenities) ? 'checked' : ''}} data-class="{{$field_name}}" />
                                            <label for="{{$field_name.$key}}" class="checkbox-style"></label>
                                            <label for="{{$field_name.$key}}" class="form-label-light">{{$field['name']}}</label>
                                        </div>
                                    @endforeach
                                @endforeach
                            @endif
                        @endforeach

                        @if(!empty($amenities['additional']))
                            @foreach($amenities['additional'] as $amenity)
                                <h6 class="amenity-label mt-4">{{$amenity['name']}}</h6>

                                @foreach($amenity['fields'] as $key => $field)
                                    @php
                                        $field_name = field_name($amenity)
                                    @endphp

                                    <div class="form-inline multi-choice rounded-choice-field {{$amenity['field_type']}}-form mt-2 text-right">
                                        <input class="d-none {{$field_name}}" onclick="deRequireCb('{{$field_name}}')" data-class="{{$field_name}}" name="amenities[]" id="{{$field_name.$key}}" type="{{$amenity['field_type']}}" value="{{$field['id']}}" {{$amenity['is_required']}} {{in_array($field['id'], $unit_amenities) ? 'checked' : ''}} />
                                        <label for="{{$field_name.$key}}" class="form-label-light">{{$field['name']}}</label>
                                    </div>
                                @endforeach
                            @endforeach
                        @endif


                        <h6 class="amenity-label mt-4">مميزات العقار</h6>

                        <div class="flex-check-boxes" id="unit-facilities">
                            @foreach($facilities as $key => $facility)
                                <div class="checkbox-container with-svg">
                                    <input type="checkbox" name="unit_facilities[]" value="{{$facility->id}}" class="d-none image-checkbox-input unit-facilities" data-class="unit-facilities" id="unit-facilities-{{$key}}" {{in_array($facility->id, $unit_facilities) ? 'checked' : ''}} />

                                    <label class="image-check-box" for="unit-facilities-{{$key}}">
                                        {!! $facility->icon !!}
                                        <span>{{ $facility->name_ar}}</span>
                                    </label>
                                </div>
                            @endforeach
                        </div>

                        <div class="form-group">
{{--                            <label>صورة العقار الرئيسية</label>--}}

                            @if(check_array_key('main_image', $unit_info))
{{--                                <div class="images-wrapper">--}}
{{--                                    <a data-fancybox="gallery" class="p-1" data-src="{{get_unit_image($unit_info['main_image'], 'original')}}" data-caption="صورة العقار الرئيسية" data-speed="700">--}}
{{--                                        <img src="{{get_unit_image($unit_info['main_image'])}}" alt="" />--}}
{{--                                    </a>--}}
{{--                                </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 {{!is_null($unit_info['main_image']) ? 'd-none' : null}}"></i>
                                            <span class="{{!is_null($unit_info['main_image']) ? 'd-none' : null}}">أضف صورة العرض الرئيسية</span>

                                            <img id="blah" src="{{!is_null($unit_info['main_image']) ? get_unit_image($unit_info['main_image'], 'temp') : null}}" class="{{!is_null($unit_info['main_image']) ? 'd-block' : null}}" alt="" />
                                        </label>
                                    </div>

                                    <input type="file" name="main_image" id="main_image" class="d-none single-image" {{is_null($unit_info['main_image']) ? 'required' : ''}} />
                                    <input type="hidden" name="main_image_path" value="{{$unit_info['main_image']}}" id="main_image_path" class="d-none single-image-path" />
                                </div>

                            @else
                                <p class="text-muted">لا يوجد</p>
                            @endif
                        </div>

                        <div class="form-group">
{{--                            <label>صور العقار</label>--}}

{{--                            <div class="">--}}
{{--                                @foreach($gallery_images as $key => $item)--}}
{{--                                    <a data-fancybox="gallery" class="p-1" data-src="{{get_unit_image($item, 'original')}}" data-caption="صور {{__('validation.'.$key)}}" data-speed="700">--}}
{{--                                        <img src="{{get_unit_image($item)}}" alt="" />--}}
{{--                                    </a>--}}
{{--                                @endforeach--}}
{{--                            </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" name="gallery[]" 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($gallery_images as $key => $item)

                                    <div class="uploaded-image">
                                        <label class="uploaded-image-label">
                                            @php

                                                if(file_exists(public_path("uploads/units/images/original/{$item}")))
                                                    $path = get_unit_image($item, 'original');
                                                else
                                                    $path = get_unit_image($item, 'temp');

                                            @endphp

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

{{--                                            <a href="{{get_unit_image($item, 'temp')}}" class="single-image-link">--}}
{{--                                                <img src="{{get_unit_image($item, 'temp')}}" alt="" />--}}
{{--                                            </a>--}}
                                        </label>

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

                                    </div>
                                @endforeach

                            </div>
                        </div>

                        <div class="form-group">
                            <div class="col-md-6 col-xs-12">
                                <div class="form-group">
                                    <label for="details_ar">تفاصيل العقار</label>
                                    <h6 class="text-danger"><small>يمكنك تعديل التفاصيل</small></h6>

                                    <textarea class="form-control" id="details_ar" name="details_ar" style="resize: none; min-height: 150px">{{old('details_ar') ?? $unit_info['details_ar'] ?? null}}</textarea>
                                </div>
                            </div>
                        </div>

                        <div class="form-group">
                            <div class="col-md-6 col-xs-12">
                                <div class="form-group">
                                    <label for="details_en">تفاصيل العقار بالانجليزية</label>
                                    <h6 class="text-danger"><small>يمكنك تعديل التفاصيل</small></h6>

                                    <textarea class="form-control" id="details_en" name="details_en" style="resize: none; min-height: 150px">{{old('details_en') ?? $unit_info['details_en'] ?? null }}</textarea>
                                </div>
                            </div>
                        </div>

                        <div class="form-group">
                            <div class="form-inline numeric-form mt-2 justify-content-start">
                                <label for="capacity" class="form-label">الطاقة الاستيعابية:</label>

                                <div class="up-down-numeric">
                                    <input type="number" class="form-control" name="capacity" id="capacity" value="{{old('capacity') ?? $unit_info['capacity'] ?? null}}" required />
                                </div>
                            </div>
                        </div>

                        <div class="form-group">
                            <div class="form-inline numeric-form mt-2 justify-content-start">
                                <label for="insurance" class="form-label">مبلغ التأمين (ر.س):</label>

                                <div class="up-down-numeric">
                                    <input type="number" class="form-control" name="insurance" id="insurance" value="{{old('insurance') ?? $unit_info['insurance'] ?? null}}" required />
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-6 col-xs-12">
                                <div class="form-group">
                                    <label for="unit_for" class="form-label">العقار مخصص لـ:</label>

                                    <select class="form-control" id="unit_for" name="unit_for">
                                        <option value="family" {{$unit_info['unit_for'] == 'family' ? 'selected' : ''}}>عوائل</option>
                                        <option value="single" {{$unit_info['unit_for'] == 'single' ? 'selected' : ''}}>عزاب</option>
                                        <option value="both" {{$unit_info['unit_for'] == 'both' ? 'selected' : ''}}>عوائل وعزاب</option>
                                    </select>
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-6 col-xs-12">
                                <div class="form-group">
                                    <label for="hour_in" class="form-label">موعد الدخول</label>

                                    <div class="form-inline">
                                        <select class="form-control" id="minutes_in" name="minutes_in">
                                            @for($i=0;$i<60;$i++)
                                                <option value="{{$i}}" {{$unit_info['minutes_in'] == $i ? 'selected' : ''}}>{{pad_code($i, 2)}}</option>
                                            @endfor
                                        </select>

                                        <span>:</span>

                                        <select class="form-control" id="hour_in" name="hour_in">
                                            @for($i=0;$i<24;$i++)
                                                <option value="{{$i}}" {{$unit_info['hour_in'] == $i ? 'selected' : ''}}>{{pad_code($i, 2)}}</option>
                                            @endfor
                                        </select>
                                    </div>

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

                        <div class="row">
                            <div class="col-md-6 col-xs-12">
                                <div class="form-group">
                                    <label for="hour_out" class="form-label">موعد الخروج</label>

                                    <div class="form-inline">
                                        <select class="form-control" id="minutes_out" name="minutes_out">
                                            @for($i=0;$i<60;$i++)
                                                <option value="{{$i}}" {{$unit_info['minutes_out'] == $i ? 'selected' : ''}}>{{pad_code($i, 2)}}</option>
                                            @endfor
                                        </select>

                                        <span>:</span>

                                        <select class="form-control" id="hour_out" name="hour_out">
                                            @for($i=0;$i<24;$i++)
                                                <option value="{{$i}}" {{$unit_info['hour_out'] == $i ? 'selected' : ''}}>{{pad_code($i, 2)}}</option>
                                            @endfor
                                        </select>
                                    </div>

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

                        <div class="form-group">
                            <div class="col-md-6 col-xs-12">
                                <div class="form-group">
                                    <label for="video_url">الفيديو الدعائي</label>

                                    @if(isset($unit_info['video_url']) && $unit_info['video_url'] != '')
                                        <div class="video_wrapper">
                                            <video width="400px" id="video" controls></video>
{{--                                            <video width="400px" controls id="video_url"></video>--}}
                                        </div>
                                    @else
                                        <h6 class="text-muted">لم يتم اضافة فيديو</h6>
                                    @endif
                                </div>
                            </div>
                        </div>

                        <div class="row mt-3">
                            <div class="col-md-6 col-xs-12">
                                <div class="form-group">
                                    <label for="video_url" class="form-label mb-2">فيديو دعائي خاص بالعقار</label>
                                    <h5 id="uploaded-file">بحد أقصى 500 ميجابايت</h5>

                                    <!-- Progress bar -->
                                    <div id="progress-bar-encrypted" class="progress mt-1" style="height: 25px">
                                        <div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0; height: 100%"><span class="progress-text">0%</span></div>
                                    </div>

                                    <div class="d-flex">
                                        <input type="file" id="encrypted_video" name="encrypted_video" class="form-control d-none" accept="video/*" />

                                        <label for="encrypted_video" id="encrypted_video_button" class="btn btn-success m-0"><i class="fa fa-upload"></i> رفع الفيديو </label>

                                        <button type="button" class="btn btn-success resume-upload m-1" id="resume-upload"><i class="fa fa-play-circle"></i> استئناف الرفع</button>

                                        <button type="button" class="btn btn-warning pause-upload m-1" id="pause-upload"><i class="fa fa-pause-circle"></i> ايقاف الرفع</button>

                                        <button type="button" class="btn btn-danger stop-upload m-1" id="stop-upload"><i class="fa fa-times-circle"></i> الغاء الرفع </button>
                                    </div>

                                    <input type="hidden" class="form-control" name="video_url" id="omega_video_link" value="" />

                                    @if($unit?->details?->video_url != '')
                                        <a href="">عرض الفيديو</a>
                                    @endif

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

                        @if(isset($unit_info['license_file']))
                            <div class="row mt-3">
                                <div class="col-md-6 col-xs-12">
                                    <div class="form-group">
                                        <label for="license_file" class="form-label mb-2">الترخيص</label>
                                        <a class="btn btn-primary btn-icon" href="{{asset(UNIT_LICENSE_PATH . $unit_info['license_file'])}}" target="_blank">عرض ملف الترخيص</a>';
                                    </div>
                                </div>
                            </div>

                        @endif

                        @if(isset($unit_info['license_number']))
                        <div class="row mt-3">
                            <div class="col-md-6 col-xs-12">
                                <div class="form-group">
                                    <label for="license_number" class="form-label mb-2">رقم الترخيص</label>
                                    <input type="text" id="license_number" name="license_number" value="{{old('license_number') ?? $unit_info['license_number'] ?? null}}" class="form-control" required />
                                </div>
                            </div>
                        </div>
                        @endif

                        @if(!isset($unit_info['license_file']) && !isset($unit_info['license_number']))
                            <div class="alert alert-danger">هذا العقار لم يقم باضافة ترخيص أو رقم ترخيص</div>
                        @endif

                        <div class="row mt-3">
                            <div class="col-md-6 col-xs-12">
                                <div class="form-group">
                                    <label for="license_file" class="form-label mb-2">تاريخ الانتهاء</label>
                                    <input id="valid-to" type="text" class="form-control valid_to" name="valid_to" value="{{old('valid_to') ?? Carbon\Carbon::parse($unit->valid_to)->format('d-m-Y') ?? \Carbon\Carbon::now()->addYear()->format('d-m-Y')}}" required />
                                </div>
                            </div>
                        </div>

                        <button type="submit" id="accept-unit" class="btn btn-success button-icon"><i class="fa fa-check me-1"></i> قبول </button>

                        <button type="button" id="refuse-unit" data-bs-toggle="modal" data-bs-target="#refuse-request" class="btn btn-danger button-icon"><i class="fa fa-times me-1"></i> رفض </button>

                    </form>

                </div>

            </div>
        </div>
    </div>
@endsection

@section('scripts')
    <script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.js"></script>
    <script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>

    <script src="{{asset('js/gallery.js')}}"></script>
    <script src="{{asset('js/tus.min.js')}}"></script>

    <script src="{{asset('js/moment.min.js')}}"></script>
    <script src="{{asset('js/bootstrap-hijri-datetimepicker.min.js')}}"></script>

    <script>
        $(document).ready(function (){
            $('body').find('#gallery-wrapper').sortable({
                placeholder: "ui-state-highlight"
            })
        })
    </script>

    @if(array_key_exists('lat', $unit_info) && array_key_exists('lng', $unit_info))
        <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBg-ick3BgA97MfR3EDax7psToQ8lK77Dg&libraries=places"></script>

        <script>

            const pickerOpt = {
                locale:'ar-SA',
                useCurrent: true,
                format:'DD-MM-YYYY',
                hijriFormat:'DD-MM-YYYY',
                hijriText: "عرض التاريخ الهجري",
                gregorianText: "عرض التاريخ الميلادي"
            }

            $(".valid_to").hijriDatePicker(pickerOpt);

            let lat = {{$unit_info['lat'] ?? 21.4858}},
                lng = {{$unit_info['lng'] ?? 39.1925}},
                markers = [],
                map;

            function isArabic (string) {
                let def = 0;
                let ar = 0;
                string.split('').forEach(i => /[\u0600-\u06FF]/.test(i) ? (ar++) : (def++))
                return ar >= def
            }

            function getRegion(components) {
                let region = null;

                for(i=0;i<components.length;i++){
                    if (isArabic(components[i].long_name) && typeof components[i].long_name !== "number")
                        region = components[i].long_name;
                }

                console.log(components)
                return region;
            }

            let geocoder = new google.maps.Geocoder()

            function coordinates_to_address(lat, lng) {
                let latlng = new google.maps.LatLng(lat, lng);

                geocoder.geocode({'latLng': latlng}, function(results, status) {

                    if(status == google.maps.GeocoderStatus.OK) {
                        if(results[0]) {
                            $('#searchInput').val(results[0].formatted_address);

                            // $('#region').val(results[0].address_components[1].long_name)
                            // $('#region').val([3].long_name)

{{--                            @if(is_null($unit_info['region']))--}}
{{--                                $('#region').val(getRegion(results[0].address_components));--}}
{{--                            @endif--}}

                        } else {
                            alert('No results found');
                        }
                    } else {
                        var error = {
                            'ZERO_RESULTS': 'Kunde inte hitta adress'
                        }

                        // alert('Geocoder failed due to: ' + status);
                        $('#address_new').html('<span class="color-red">' + error[status] + '</span>');
                    }
                });
            }

            @if(is_null($unit_info['lat']))
            function getLocation() {
                if (navigator.geolocation) {
                    navigator.geolocation.getCurrentPosition(showPosition);
                } else {
                    x.innerHTML = "Geolocation is not supported by this browser.";
                }
            }

            function showPosition(position) {
                lat = position.coords.latitude;
                lng = position.coords.longitude;

                coordinates_to_address(lat, lng)
                myMap();
                addMarker(lat, lng)
            }

            getLocation();
            @endif

            function myMap() {
                map = new google.maps.Map(document.getElementById('googleMap'), {
                    center: {lat: lat, lng: lng},
                    zoom: 10
                });

                var input = document.getElementById('searchInput');
                map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);

                var autocomplete = new google.maps.places.Autocomplete(input);
                autocomplete.bindTo('bounds', map);

                var infowindow = new google.maps.InfoWindow();

                var marker = new google.maps.Marker({
                    map: map,
                    anchorPoint: new google.maps.Point(0, -29)
                });

                addMarker(lat, lng)

                map.addListener('click', function (mapsMouseEvent){
                    // alert('clicked')
                    const latLng = mapsMouseEvent.latLng.toJSON();
                    addMarker(latLng.lat, latLng.lng)
                })

                autocomplete.addListener('place_changed', function () {
                    infowindow.close();
                    marker.setVisible(false);
                    var place = autocomplete.getPlace();
                    if (!place.geometry) {
                        window.alert("Autocomplete's returned place contains no geometry");
                        return;
                    }

                    // If the place has a geometry, then present it on a map.
                    if (place.geometry.viewport) {
                        map.fitBounds(place.geometry.viewport);
                    } else {
                        map.setCenter(place.geometry.location);
                        map.setZoom(17);
                    }

                    marker.setIcon(({
                        url: place.icon,
                        size: new google.maps.Size(71, 71),
                        origin: new google.maps.Point(0, 0),
                        anchor: new google.maps.Point(17, 34),
                        scaledSize: new google.maps.Size(35, 35)
                    }));

                    marker.setPosition(place.geometry.location);
                    marker.setVisible(true);

                    var address = '';

                    if (place.address_components) {
                        address = [
                            (place.address_components[0] && place.address_components[0].short_name || ''),
                            (place.address_components[1] && place.address_components[1].short_name || ''),
                            (place.address_components[2] && place.address_components[2].short_name || '')
                        ].join(' ');
                    }

                    infowindow.setContent('<div><strong>' + place.name + '</strong><br>' + address);
                    infowindow.open(map, marker);

                    // Location details
                    // for (var i = 0; i < place.address_components.length; i++) {
                    //     if (place.address_components[i].types[0] == 'postal_code') {
                    //         document.getElementById('postal_code').innerHTML = place.address_components[i].long_name;
                    //     }
                    //     if (place.address_components[i].types[0] == 'country') {
                    //         document.getElementById('country').innerHTML = place.address_components[i].long_name;
                    //     }
                    // }

                    const loc = place.geometry.location;
                    // document.getElementById('lat').innerHTML = loc.lat();
                    // document.getElementById('lon').innerHTML = loc.lng();

                    addMarker(loc.lat(), loc.lng())
                });
            }

            // Add marker
            function addMarker(lat, lon) {
                deleteMarkers();

                var marker = new google.maps.Marker({
                    position: new google.maps.LatLng(lat, lon),
                    map: map
                });

                markers.push(marker);
                coordinates_to_address(lat, lon)
                $('#lat').val(lat)
                $('#lng').val(lon)
                // map.setCenter(new google.maps.LatLng(lat, lon));
            }

            // Removes the markers from the map, but keeps them in the array.
            function clearMarkers() {
                for (var i = 0; i < markers.length; i++) {
                    markers[i].setMap(null);  //markerToBeRemoved.setMap(null);
                }
            }

            // Deletes all markers in the array by removing references to them.
            function deleteMarkers() {
                clearMarkers();
                markers = [];
            }

            window.addEventListener('load', myMap)
        </script>
    @endif

    <script>

        $("[data-fancybox]").fancybox();

        $('input[type="number"]').each(function (){
            $(this).attr('placeholder', 'لا يوجد')
        });

        if ($('#province_id').val() != '') {
            loadCities($('#province_id').val())
            loadRegions($('#city_id').val())
        }

        $('#province_id').on('change', function () {
            loadCities($(this).val())
        });

        $('#city_id').on('change', function () {
            loadRegions($(this).val())
        });

        function loadCities(province) {
            let city_url = '{{dashboard_route('available-cities', ':id')}}';

            city_url = city_url.replace(':id', province)

            $('#city_id').select2({
                placeholder: 'برجاء اختيار المدينة',
                allowClear: true,
                ajax: {
                    url: city_url,
                    processResults: function (data) {
                        $('#city_id').select2("val", 1);

                        return {
                            results: data.data
                        };
                    }
                }
            });
        }

        function loadRegions(city) {
            let region_id = '{{dashboard_route('available-regions', ':id')}}';

            region_id = region_id.replace(':id', city)

            $('#region_id').select2({
                placeholder: 'برجاء اختيار المنطقة',
                allowClear: true,
                ajax: {
                    url: region_id,
                    processResults: function (data) {
                        $('#region_id').select2("val", 1);

                        return {
                            results: data.data
                        };
                    }
                }
            });
        }

        $('#accept-unit').on('click', function (e){
            e.preventDefault();

            const form = $(this).parents('form');

            Swal.fire({
                title: "انت على وشك قبول الطلب",
                text: "هل انت متأكد من قبول طلب العقار؟",
                icon: "warning",
                showCancelButton: true,
                confirmButtonText: "قبول الطلب",
                cancelButtonText: "الغاء",
                dangerMode: true,
            }).then(function(result) {
                if (result.isConfirmed) {
                    form.submit();
                }
            })
        })

        $('#refuse-unit').on('click', function (){
            $('#refuse-request').find('.modal-dialog').html(getPreloader())

            $.get('{{dashboard_route('units.gallery.form.refuse', $unit->id)}}').done(function (data){
                $('#refuse-request').find('.modal-dialog').html(data.data)
            })
        })
    </script>

    @include('Includes.UploadVideo')

    @if(isset($unit_info['video_url']) && $unit_info['video_url'] != '')
        <script>
            var video = document.getElementById('video');
            var videoSrc = "{{$video_link}}";

            if (Hls.isSupported()) {
                var hls = new Hls({
                    xhrSetup: xhr => {
                        // xhr.setRequestHeader("Access-Control-Allow-Origin", '*')
                        {{--xhr.setRequestHeader("Authorization", "Bearer {{env('OMEGA_API_KEY')}}")--}}
                        // xhr.setRequestHeader('Authorization', 'Bearer 4da444118185eff995cc1283a8e5a266afc509e8be0a877b6aa7a38cd5852583')
                    }
                });

                hls.loadSource(videoSrc);
                hls.attachMedia(video);
            }
        </script>
    @endif

@endsection