@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>
        #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>

    @if(!$unit->exists)
        <div class="modal fade" id="add-partner" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
             aria-hidden="true">
            <div class="modal-dialog" role="document">
                <div class="modal-content">

                    <form action="#" id="add-partner-form" method="post" enctype="multipart/form-data">
                        @csrf

                        <div class="modal-header">
                            <h5 class="modal-title" id="exampleModalLabel">إضافة مستثمر جديد</h5>
                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                        </div>

                        <div class="modal-body">

                            <div class="form-group">
                                <label for="partner_name">الاسم</label>
                                <input name="partner_name" id="partner_name" type="text" class="form-control" value="{{old('partner_name')}}" />
                            </div>

                            <div class="form-group">
                                <label for="email">البريد الالكتروني</label>
                                <input name="email" id="email" type="email" class="form-control" value="{{old('email')}}" />
                            </div>

                            <div class="form-group">
                                <label for="phonenumber">رقم الجوال</label>
                                <input name="phonenumber" id="phonenumber" type="text" class="form-control" value="{{old('phonenumber')}}" />
                            </div>

                            <div class="form-group">
                                <label for="password">كلمة المرور</label>
                                <input name="password" id="password" type="text" class="form-control" value="{{old('password')}}" />
                            </div>

                            <div class="form-group">
                                <label for="password_confirmation">تأكيد كلمة المرور</label>
                                <input name="password_confirmation" id="password_confirmation" type="text" class="form-control" value="{{old('password_confirmation')}}" />
                            </div>

                        </div>

                        <div class="modal-footer">
                            <button id="add-partner-button" type="submit" class="btn btn-primary"><i class="fa fa-check"></i>حفظ البيانات</button>
                            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">اغلاق</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    @endif


    <!-- 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="{{$unit->exists ? dashboard_route('units.update', $unit->id) : dashboard_route('units.store')}}"
                          enctype="multipart/form-data">

                        @if($unit->exists)
                            @method('PUT')
                        @endif

                        @csrf

                        @if(!$unit->exists)
                            <div class="form-group">
                                <label for="partner_id" class="required">المستثمر</label>
                                <select class="select2 form-control" id="partner_id" name="partner_id" required></select>
                            </div>
                        @endif

                        <div class="form-group">
                            <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']}}" 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?->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']}}</option>
                                @endif
                            </select>
                        </div>

                        <div class="form-group">
                            <label for="region_id">الحي</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">
                            <label for="direction_id">الاتجاه</label>

                            <select class="select2 mt-2 w-100 @error('direction_id') has-error @enderror" id="direction_id" name="direction_id" required>
                                @foreach($directions as $direction)
                                    <option value="{{$direction->id}}" {{$direction->id == $unit_info['direction_id'] ? 'selected' : ''}}>{{$direction->name_ar}}</option>
                                @endforeach
                            </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(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}}"
                                               data-class="{{$field_name}}" name="amenities[]" id="{{$field_name.$key}}"
                                               type="{{$amenity['field_type']}}"
                                               value="{{$field['id']}}" {{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'], 'original') : 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" />
                            </div>

                            @if(!check_array_key('main_image', $unit_info))
                                <p class="text-muted">لا يوجد</p>
                            @endif
                        </div>

                        <div class="form-group">
                            <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($gallery_images as $key => $item)

                                    <div class="uploaded-image">
                                        <label class="uploaded-image-label">
                                            @php
                                                if(file_exists(get_unit_image($item, 'temp')))
                                                    $path = get_unit_image($item, 'temp');
                                                else
                                                    $path = get_unit_image($item, '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}}"
                                               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="form-group">
                            <div class="form-inline numeric-form mt-2 justify-content-start">
                                <label for="profit_percentage" class="form-label">نسبة العمولة:</label>

                                <input type="number" class="form-control" name="profit_percentage" id="profit_percentage"
                                       value="{{old('profit_percentage') ?? $unit_info['profit_percentage'] ?? 7.5}}" step=".5" required />
                            </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>


                        <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')
    <script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.js"></script>

    <script src="{{asset('js/gallery.js')}}"></script>
    <script src="{{asset('js/tus.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) || $unit_info['minutes_in'] == '')
        <script
            src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBg-ick3BgA97MfR3EDax7psToQ8lK77Dg&libraries=places"></script>

        <script>

            let lat = {{$unit_info['lat'] != '' ? $unit_info['lat'] : 21.4858}},
                lng = {{$unit_info['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_url = '{{dashboard_route('available-regions', ':id')}}';

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

            $('#region_id').select2({
                placeholder: 'برجاء اختيار الحي',
                allowClear: true,
                ajax: {
                    url: region_url,
                    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();
                }
            })
        })

        @if($unit->exists)
        $('#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)
            })
        })
        @endif

        // Handle Select2 change event
        $('#partner_id').select2({
            placeholder: 'برجاء اختيار المستثمر أو المالك للعقار',
            ajax: {
                url: '/api/partners', // URL to fetch current users
                processResults: function (data) {
                    let results = data.map(function (user) {
                        return {
                            id: user.id,
                            text: user.name
                        };
                    });
                    // Add "Add New User" option
                    results.unshift({
                        id: 'add-new',
                        text: '+ اضافة مستثمر جديد'
                    });
                    return {
                        results: results
                    };
                }
            }
        });

        $('#partner_id').on('select2:select',function (e) {
            const data = e.params.data;
            if (data.id === 'add-new') {
                // Open Add User modal if 'Add New User' is selected
                $('#add-partner').modal('show');
            }
        });

        $('#add-partner-form').on('submit', function (e) {
            e.preventDefault();
            $('#add-partner-button').attr('disabled', true);

            const name = $('#partner_name').val(),
                email = $('#email').val(),
                phonenumber = $('#phonenumber').val(),
                password = $('#password').val(),
                password_confirmation = $('#password_confirmation').val()

            $.ajax({
                url: '/api/partners', // URL to add new user
                method: 'POST',
                data: {
                    name: name,
                    email: email,
                    phonenumber: phonenumber,
                    password: password,
                    password_confirmation: password_confirmation
                },
                success: function(user) {
                    // Add new user to Select2 options
                    console.log(user.data.id)

                    var newOption = new Option(user.data.name+' - '+user.data.phonenumber, user.data.id, false, true);
                    $('#partner_id').append(newOption);

                    // Select the newly added option
                    // $("#partner_id").select2("val", user.data.id);

                    // Close the Add User modal and reopen the User Select modal
                    $('#add-partner').modal('hide');
                },
                error: function(xhr, status, error) {
                    alert('برجاء التأكد من ادخال كل البيانات');
                    $('#add-partner-button').attr('disabled', false);
                }
            });
        });
    </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