@extends('Partners.Layouts.Page')

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

    <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="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.css" />

    <style>
        @if(empty($errors->any()) && !$gallery->exists && request()->show != 'form')
        #add-unit-form{
            display: none;
        }
        @endif
        #terms-and-conditions ul{
            height: 350px;
            overflow: scroll;
            background-color: #f5f5f5;
            padding: 2rem;
        }
        #terms-and-conditions ul li{
            list-style: none;
            line-height: 30px;
        }

        .image-exists img{
            display: block !important;
        }

        .image-exists i{
            display: none;
        }

        .progress{
            display: none;
        }

        .resume-upload,
        .pause-upload,
        .stop-upload{
            display: none;
        }

        .text-required{
            color: #e74c3c
        }

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

        #minutes_in,
        #minutes_out {
            margin-left: 5px;
        }
        #main-image-upload,
        #main-image-upload + .single-image-upload{
            width: 200px;
            height: 200px;
        }
        #main-image-upload + .single-image-upload{
            margin-top: 11px !important;
        }
    </style>
@endsection

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

        <div class="d-flex my-xl-auto right-content">
            <a href="{{partner_route('units.index')}}" class="btn btn-danger mb-1 me-1" title="عرض العقارات">
                <span class="me-1">عرض العقارات</span>
                <i class="fa fa-angle-left"></i>
            </a>
        </div>
    </div>
    <!-- breadcrumb -->

    <div class="progress-outer mt-5 mb-2">

        <div class="progress-bar--ribbon">
            <span class="icon"><i class="si si-docs"></i></span>
            <span class="step-header">بيانات العقار</span>
        </div>

        <div class="progress-bar--ribbon">
            <span class="icon"><i class="mdi mdi-image"></i></span>
            <span class="step-header">صورة العقار</span>
        </div>

        <div class="progress-bar--ribbon">
            <span class="icon"><i class="fa fa-bed"></i></span>
            <span class="step-header">الغرف</span>
        </div>
        <div class="progress-bar--ribbon">
            <span class="icon"><i class="fa fa-chair"></i></span>
            <span class="step-header">الصالات</span>
        </div>
        <div class="progress-bar--ribbon">
            <span class="icon"><i class="fa fa-toilet"></i></span>
            <span class="step-header">دورات المياة</span>
        </div>
        <div class="progress-bar--ribbon">
            <span class="icon"><i class="fa fa-swimming-pool"></i></span>
            <span class="step-header">المسابح</span>
        </div>
        <div class="progress-bar--ribbon">
            <span class="icon"><i class="mdi mdi-kettle"></i></span>
            <span class="step-header">المطابخ</span>
        </div>
        <div class="progress-bar--ribbon">
            <span class="icon"><i class="si si-picture"></i></span>
            <span class="step-header">صور اضافية</span>
        </div>
        <div class="progress-bar--ribbon">
            <span class="icon"><i class="si si-list"></i></span>
            <span class="step-header">تفاصيل اضافية</span>
        </div>
    </div>

    <!-- Row -->
    <div class="row row-sm">
        <div class="col-lg-12">
            <div class="form-container">
                <div class="card">
{{--                    <div class="card-header">--}}
{{--                        <h3 class="card-title m-0">{{$page_title}}</h3>--}}
{{--                    </div>--}}

                    <div class="card-body">

                        <div class="unit-form-card">

                            @if(partner_auth()->user()->banks()->count())

                                @if(empty($errors->any()) && !$gallery->exists && request()->show != 'form')
                                    @include('Partners.Reservations.Gallery.Unit-terms')
                                @endif

                                @if(empty(old()) && request()->show == 'form')
                                    <div class="modal fade" id="warning-modal">
                                        <div class="modal-dialog modal-dialog-centered" role="document">
                                            <div class="modal-content tx-size-sm">
                                                <div class="modal-body tx-center pd-y-20 pd-x-20">
                                                    <button aria-label="Close" class="close" data-bs-dismiss="modal" type="button"><span aria-hidden="true">&times;</span></button>

                                                    <i class="fa fa-exclamation-triangle tx-100 tx-warning lh-1 mg-t-20 d-inline-block"></i>
                                                    <h4 class="tx-warning mg-b-20">تنبيه!</h4>
                                                    <p class="mg-b-20 mg-x-20">يمنع رفع صور تحتوي على أي ارقام تواصل او مؤثرات او حسابات خارجيه ويمنع ذكر أي وسيله تواصل في الوصف.</p>
                                                    <button aria-label="Close" class="btn ripple btn-success pd-x-25" data-bs-dismiss="modal" type="button">استمرار</button>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <script>
                                        $(document).ready(function (){
                                            $('#warning-modal').modal("show")
                                        })
                                    </script>
                                @endif


                                <div id="add-unit-form" class="card-body p-0">

                                    @include('Messages')

                                    @if(!is_blocked())
                                        <form id="contract-form" method="post" action="{{partner_route('gallery.update', $unit->id)}}" enctype="multipart/form-data">
                                            @csrf
                                            @method('PUT')

                                            <div id="available-error" style="display: none">
                                                <div class="alert alert-danger alert-dismissible fade show mb-1" role="alert">
                                                    <span class="alert-inner--icon"><i class="fe fe-slash"></i></span>

                                                    <span class="alert-inner--text alert-body">{{session()->get('error')}}</span>

                                                    <button type="button" class="close" data-bs-dismiss="alert" aria-label="Close">
                                                        <span aria-hidden="true">×</span>
                                                    </button>
                                                </div>
                                            </div>

                                            <div id="main-form" class="form-box">

                                                <div class="step active required" data-step="1">

                                                    <h3 class="form-title"><span class="form-ribbon">1. بيانات العقار</span></h3>

                                                    <div class="row">
                                                        <div class="col-md-6 col-xs-12">
                                                            <div class="form-group">
                                                                <label for="unit_id" class="form-label">{{$gallery->exists ? 'تعديل صور العقار' : 'أضافة صور للعقار'}}</label>

                                                                <select class="nice-select mt-2 w-100 @error('unit_id') has-error @enderror" id="unit_id" name="unit_id">
                                                                    @foreach($units as $unitItem)
                                                                        <option value="{{$unitItem->id}}">{{$unitItem?->code}} - {{$unitItem?->name_ar}} - {{$unitItem?->city?->name_ar}}</option>
                                                                    @endforeach
                                                                </select>

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

                                                    <div class="row">
                                                        <div class="col-md-6 col-xs-12">
                                                            <div class="form-group">
                                                                <label for="name_ar" class="form-label">اسم العقار <span style="color: red"> (مطلوب)</span></label>

                                                                <h6><small>برجاء اعطاء اسم للعقار</small></h6>

                                                                <input type="text" class="form-control" name="name_ar" id="name_ar" placeholder="استديو بتصميم مودرن وسرير ماستر" value="{{old('name_ar') ?? $unit->name_ar}}" required />

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

                                                    <div class="row">
                                                        <div class="col-md-6 col-xs-12">
                                                            <div class="form-group">
                                                                <label for="name_en" class="form-label">اسم العقار باللغة الانجليزية<span style="color: red"> (مطلوب)</span></label>

                                                                <h6><small>برجاء ترجمة اسم العقار للغة الانجليزية</small></h6>

                                                                <input type="text" class="form-control" name="name_en" id="name_en" placeholder="Modern studio with a master bed" value="{{old('name_en') ?? $unit->name_en}}" required />

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

                                                <div class="step required" data-step="2">

                                                    <h3 class="form-title"><span class="form-ribbon">2. صورة العقار الرئيسية</span></h3>

                                                    <div class="row">
                                                        <div class="col-md-6 col-xs-12">
                                                            <div class="images-wrapper">
                                                                <div class="uploaded-image mt-3 mb-5" id="main-image-upload">
                                                                    <label class="uploaded-image-label">
                                                                        <a href="#" class="single-image-link">
                                                                            <img src="{{get_image_path('units', 'placeholder.jpeg')}}" alt="" />
                                                                        </a>
                                                                    </label>
                                                                </div>

                                                                <div class="single-image-upload">
                                                                    <label class="" for="main-image-field">
                                                                        <i class="fa fa-upload"></i>
                                                                    </label>

                                                                    <input class="main-image-field d-none" id="main-image-field" type="file" accept="image/*" name="main_image_field" />
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>

                                                </div>

                                                <div class="step image-with-select required" data-name="rooms" data-step="2">
                                                    <h3 class="form-title"><span class="form-ribbon">2. الغرف</span></h3>

                                                    <div class="row">
                                                        <div class="col-md-6 col-xs-12">
                                                            <div class="form-group">
                                                                <label for="room_count" class="form-label">عدد الغرف</label>

                                                                <select class="nice-select gallery-items-count mt-2 w-100 @error('room_count') has-error @enderror" data-name="rooms" data-trans="الغرفة" id="room_count" name="room_count">
                                                                    @for($i=1;$i<=10;$i++)
                                                                        <option value="{{$i}}" {{$gallery?->details?->room_count == $i ? 'selected' : ''}}>{{$i}}</option>
                                                                    @endfor
                                                                </select>
                                                            </div>
                                                        </div>
                                                    </div>

                                                    <div class="row">
                                                        <div class="col-12">
                                                            <div class="form-group">
                                                                <label for="rooms" class="form-label">صور الغرف</label>

                                                                <div class="images-container mt-2">
                                                                    @if($gallery->exists && isset($rooms_no) && !empty($rooms_no))
                                                                        @foreach($rooms_no as $no)
                                                                            @include('Partners.Reservations.Gallery.Image_box', ['data' => 'rooms', 'name' => 'roomsPreloaded', 'objs' => $rooms, 'trans' => 'الغرفة'])
                                                                        @endforeach
                                                                    @else
                                                                        @include('Partners.Reservations.Gallery.Image_box', ['data' => 'rooms', 'name' => 'rooms', 'trans' => 'الغرفة'])
                                                                    @endif
                                                                </div>

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

                                                </div>

                                                <div class="step image-with-select" data-name="halls" data-step="3">
                                                    <h3 class="form-title"><span class="form-ribbon">3. الصالات</span></h3>

                                                    <div class="row">
                                                        <div class="col-md-6 col-xs-12">
                                                            <div class="form-group">
                                                                <label for="halls_count" class="form-label">عدد الصالات</label>

                                                                <select {{$unit?->details?->halls_count == $i ? 'selected' : ''}} class="nice-select gallery-items-count mt-2 w-100 @error('halls_count') has-error @enderror" data-name="halls" data-trans="الصالة" id="halls_count" name="halls_count">
                                                                    @for($i=0;$i<=7;$i++)
                                                                        <option value="{{$i}}" {{$unit?->details?->halls_count == $i ? 'selected' : ''}}>{{$i}}</option>
                                                                    @endfor
                                                                </select>

                                                                <label for="halls_count" class="form-label"><small>يمكنك التخطي في حالة عدم توفر صالة في عقاركم.</small></label>
                                                            </div>
                                                        </div>
                                                    </div>

                                                    <div class="row">
                                                        <div class="col-12">
                                                            <div class="form-group">
                                                                <label for="halls" class="form-label">صور الصالات</label>

                                                                {{--                                                        <div id="halls-note"></div>--}}

                                                                <div class="images-container mt-2">
                                                                    @if($gallery->exists && isset($halls_no) && !empty($halls_no))
                                                                        @foreach($halls_no as $no)
                                                                            @include('Partners.Reservations.Gallery.Image_box', ['data' => 'halls', 'name' => 'hallsPreloaded', 'objs' => $halls, 'trans' => 'الصالة'])
                                                                        @endforeach
                                                                    @endif
                                                                </div>

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

                                                <div class="step image-with-select required" data-name="toilets" data-step="4">
                                                    <h3 class="form-title"><span class="form-ribbon">4. دورات المياة</span></h3>

                                                    <div class="row">
                                                        <div class="col-md-6 col-xs-12">
                                                            <div class="form-group">
                                                                <label for="toilets_count" class="form-label">عدد دورات المياة</label>

                                                                <select {{$unit?->details?->toilets_count == $i ? 'selected' : ''}} class="nice-select gallery-items-count mt-2 w-100 @error('toilets_count') has-error @enderror" data-name="toilets" data-trans="دورة مياة" id="toilets_count" name="toilets_count">
                                                                    @for($i=1;$i<=10;$i++)
                                                                        <option value="{{$i}}" {{$unit?->details?->toilets_count == $i ? 'selected' : ''}}>{{$i}}</option>
                                                                    @endfor
                                                                </select>
                                                            </div>
                                                        </div>
                                                    </div>

                                                    <div class="row">
                                                        <div class="col-12">
                                                            <div class="form-group">
                                                                <label for="toilets" class="form-label">صور دورات المياة</label>

                                                                {{--                                                        <div class="image-upload-box" id="toilets-images"></div>--}}

                                                                <div class="images-container mt-2">

                                                                    @if($gallery->exists && isset($toilets_no) && !empty($toilets_no))
                                                                        @foreach($toilets_no as $no)
                                                                            @include('Partners.Reservations.Gallery.Image_box', ['data' => 'toilets', 'name' => 'toiletsPreloaded', 'objs' => $toilets, 'trans' => 'دورة مياة'])
                                                                        @endforeach
                                                                    @else
                                                                        @include('Partners.Reservations.Gallery.Image_box', ['data' => 'toilets', 'name' => 'toilets', 'trans' => 'دورة مياة'])
                                                                    @endif
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>

                                                <div class="step image-with-select" data-name="pools" data-step="5">
                                                    <h3 class="form-title"><span class="form-ribbon">5. عدد المسابح</span></h3>

                                                    <div class="row">
                                                        <div class="col-12">
                                                            <div class="form-group">
                                                                <label for="pools_count" class="form-label">عدد المسابح</label>

                                                                <select {{$unit?->details?->pools_count == $i ? 'selected' : ''}} class="nice-select gallery-items-count mt-2 w-100 @error('pools_count') has-error @enderror" data-name="pools" data-trans="المسبح" id="pools_count" name="pools_count">
                                                                    @for($i=0;$i<=10;$i++)
                                                                        <option value="{{$i}}" {{$unit?->details?->pools_count == $i ? 'selected' : ''}}>{{$i}}</option>
                                                                    @endfor
                                                                </select>

                                                                <label for="pools_count" class="form-label"><small>يمكنك التخطي في حالة عدم توفر مسبح في عقاركم.</small></label>
                                                            </div>
                                                        </div>
                                                    </div>

                                                    <div class="row">
                                                        <div class="col-12">
                                                            <div class="form-group">
                                                                <label for="pools" class="form-label">صور المسابح</label>

                                                                <div id="pools-note"></div>

                                                                <div class="images-container mt-2">
                                                                    @if($gallery->exists && isset($pools_no) && !empty($pools_no))
                                                                        @foreach($pools_no as $no)
                                                                            @include('Partners.Reservations.Gallery.Image_box', ['data' => 'pools', 'name' => 'poolsPreloaded', 'objs' => $pools, 'trans' => 'مسبح'])
                                                                        @endforeach
                                                                    @endif
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>

                                                <div class="step image-with-select" data-name="kitchens" data-step="6">
                                                    <h3 class="form-title"><span class="form-ribbon">6. المطابخ</span></h3>

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

                                                                <select class="nice-select gallery-items-count mt-2 w-100 @error('kitchens_count') has-error @enderror" data-name="kitchens" data-trans="مطابخ" id="kitchens_count" name="kitchens_count">
                                                                    @for($i=0;$i<=10;$i++)
                                                                        <option value="{{$i}}" {{$unit?->details?->kitchens_count == $i ? 'selected' : ''}}>{{$i}}</option>
                                                                    @endfor
                                                                </select>

                                                                <label for="kitchens_count" class="form-label"><small>يمكنك التخطي في حالة عدم توفر مطبخ في عقاركم.</small></label>
                                                            </div>
                                                        </div>
                                                    </div>

                                                    <div class="row">
                                                        <div class="col-12">
                                                            <div class="form-group">
                                                                <label for="toilets" class="form-label">صور المطابخ</label>

                                                                <div class="images-container mt-2">
                                                                    @if($gallery->exists && isset($kitchens_no) && !empty($kitchens_no))
                                                                        @foreach($kitchens_no as $no)
                                                                            @include('Partners.Reservations.Gallery.Image_box', ['data' => 'kitchens', 'name' => 'kitchensPreloaded', 'objs' => $kitchens, 'trans' => 'مطبخ'])
                                                                        @endforeach
                                                                    @endif
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>

                                                <div class="step image-without-select" data-name="additional_images" data-step="7">
                                                    <h3 class="form-title"><span class="form-ribbon">7. صور اضافية</span></h3>

                                                    <div class="row">
                                                        <div class="col-12">
                                                            <div class="form-group">

                                                                <div class="images-container mt-2">
                                                                    @include('Partners.Reservations.Gallery.Image_box', ['data' => 'additionals', 'name' => 'additionalsPreloaded', 'objs' => $additionals, 'message' => 'اضف المزيد من الصور لعقارك', 'no' => 0])

                                                                    <label for="halls_count" class="form-label"><small>يمكنك التخطي في حالة عدم توفر صور اضافية لعقارك.</small></label>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>

                                                <div class="step" data-step="8">
                                                    <h3 class="form-title"><span class="form-ribbon">8. تفاصيل اضافية</span></h3>

                                                    <div class="row">
                                                        <div class="col-md-6 col-xs-12">
                                                            <div class="form-group">
                                                                <label for="unit_location" class="form-label">رابط موقع العقار <span class="text-required">(مطلوب)</span></label>
                                                                <h6><small>برجاء ادخال رابط لموقع العقار على الخريطة ، يظهر للعميل عند تأكيد الحجز.</small></h6>

                                                                <input type="url" class="form-control" name="location" id="unit_location" value="{{old('location') ?? $unit?->details?->location}}" placeholder="مثال: https://goo.gl/maps/UqXieS7agnbtEjoy5" required />

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

                                                    <div class="row">
                                                        <div class="col-md-6 col-xs-12">
                                                            <div class="form-group">
                                                                <label for="region" class="form-label">اسم الحي</label>
                                                                <input type="text" class="form-control" name="region" id="region" value="{{old('region') ?? $unit?->details?->region}}" placeholder="مثال: 15 حي الربيع" />
                                                            </div>
                                                        </div>
                                                    </div>

                                                    <div class="row">
                                                        <div class="col-md-4 col-xs-6">
                                                            <div class="form-group">
                                                                <label for="area" class="form-label">مساحة العقار (م2)</label>
                                                                <input type="number" class="form-control" name="area" id="area" value="{{old('area') ?? $unit?->details?->area}}" placeholder="مثال: 250" />

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

                                                    <div class="row">
                                                        <div class="col-md-4 col-xs-6">
                                                            <div class="form-group">
                                                                <label for="insurance" class="form-label">مبلغ التأمين (ر.س)</label>
                                                                <input type="number" class="form-control" name="insurance" id="insurance" value="{{old('insurance') ?? $unit?->details?->insurance}}" placeholder="مثال: 300" required />

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

                                                    <div class="row">
                                                        <div class="col-md-4 col-xs-6">
                                                            <div class="form-group">
                                                                <label for="capacity" class="form-label">الطاقة الاستيعابية</label>
                                                                <input type="number" class="form-control" name="capacity" id="capacity" value="{{old('capacity') ?? $unit?->details?->capacity}}" placeholder="مثال: 5" required />

                                                                <div class="text-danger @error('capacity') active @enderror">
                                                                    @error('capacity')
                                                                    {{ $message }}
                                                                    @enderror
                                                                </div>
                                                            </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?->details?->unit_for == 'family' ? 'selected' : ''}}>عوائل</option>
                                                                    <option value="single" {{$unit?->details?->unit_for == 'single' ? 'selected' : ''}}>عزاب</option>
                                                                    <option value="both" {{$unit?->details?->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?->details?->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?->details?->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?->details?->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?->details?->hour_out == $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="details_ar" class="form-label mb-2">تفاصيل العقار</label>

                                                                <textarea id="details_ar" name="details_ar">{{old('details_ar') ?? $unit?->details?->details_ar}}</textarea>

                                                                <p class="mt-2">بامكانك كتابه هنا تفاصيل اضافيه عن عقارك ، على سبيل المثال:</p>

                                                                <ul>
                                                                    <li>يتوفر واي فاي - يتوفر سماعات - يتوفر انظمه احتفالات منزليه.</li>
                                                                    <li>تفاصيل الغرف (عدد ٢ سرير مفرد - عدد السرر المزدوجه - الخ).</li>
                                                                    <li>يرجى كتابة اوقات الدخول والخروج المسموح بها.</li>
                                                                </ul>
                                                            </div>
                                                        </div>
                                                    </div>

                                                    <div class="row">
                                                        <div class="col-md-6 col-xs-12">
                                                            <div class="form-group">
                                                                <label for="details_en" class="form-label mb-2">تفاصيل العقار بالانجليزية</label>

                                                                <textarea id="details_en" name="details_en">{{old('details_en') ?? $unit?->details?->details_en}}</textarea>

                                                                <p class="mt-2">برجاء ترجمة تفاصيل العقار إلى اللغة الانجليزية</p>
                                                            </div>
                                                        </div>
                                                    </div>

                                                    <div class="row">
                                                        <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-3" 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%">0%</div>
                                                                </div>

                                                                <div class="d-flex mt-2">
                                                                    <input type="file" id="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" id="resume-upload"><i class="fa fa-play-circle"></i> استئناف الرفع</button>

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

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

                                                                <input type="hidden" id="encrypted_video_upload" name="video_url" value="{{$unit?->details?->video_url}}" />

                                                                @if($gallery->exists && $unit?->details?->video_url != '')
                                                                    <a href="{{asset(UNIT_VIDEO_URL.'/'.$unit?->details?->video_url)}}">عرض الفيديو</a>
                                                                @endif

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

                                                <div class="form-group d-flex buttons m-0">

                                                    <button type="button" class="btn btn-danger mx-2 button-icon mb-1 prev"><i class="si si-arrow-right me-2"></i>السابق  </button>

                                                    <button
                                                        class="btn btn-success hover-slide ml-2 hover-fill"
                                                        id="submit"
                                                        type="submit"
                                                    ><i class="si si-check"></i> <span class="text">{{$gallery->exists ? 'تعديل صور العقار' : 'تسجيل صور العقار'}}</span></button>

{{--                                                    <button class="hover-slide ml-2 hover-fill prev btn btn-danger"><i class="fa fa-angle-left"></i> <span class="text">السابق</span></button>--}}

                                                    <button type="button" class="btn btn-success mx-2 button-icon mb-1 next"> التالي <i class="si si-arrow-left ms-2" style="float: left"></i></button>
                                                </div>
                                            </div>

                                        </form>
                                    @else
                                        <div class="alert alert-danger text-center">
                                            <div><i class="icon_close_alt2" style="font-size:50px;color:#dc3545!important"></i></div>

                                            @if(!is_null(block_note()))
                                                <h3>عفوا قد تم إيقاف خاصية اضافة صور العقارات بسبب:</h3>
                                                <h4>{{partner_auth()->user()->blocked_note}}</h4>
                                            @else
                                                <h3>عفوا قد تم إيقاف خاصية اضافة صور العقارات</h3>
                                            @endif
                                        </div>
                                    @endif
                                </div>
                            @else
                                <div class="unit-form-body">
                                    <div class="alert alert-danger text-center">
                                        <div><i class="icon_close_alt2"></i></div>
                                        <h3>لم تقم باضافة حسابات بنكية بعد. برجاء الاضافة قبل استكمال اضافة العقار</h3>
                                    </div>

                                    <div class="text-center">
                                        <a href="{{partner_route('user.banks')}}" class="btn btn-success hover-slide"><i class="mdi mdi-bank"></i> <span class="text"> اضف الحسابات البنكية </span></a>
                                    </div>
                                </div>
                            @endif
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('scripts')
    <script src="{{asset('js/moment.min.js')}}"></script>
    <script src="{{asset('js/gallery.js')}}"></script>
{{--    <script src="{{asset('js/image-uploader.min.js')}}"></script>--}}

    <script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.20/summernote-lite.min.js"></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js"></script>

    <script src="{{asset('js/resumable.js')}}"></script>

    <script>
        $("a.single-image-link").fancybox();

        $('#unit_id').select2()

        $('#details_ar').summernote({
            tabsize: 2,
            height: 120,
            toolbar: [
                ['font', ['bold', 'underline', 'clear']],
                ['color', ['color']],
                ['para', ['ul', 'ol', 'paragraph']],
                ['view', ['fullscreen']]
            ]
        });

        $('#details_en').summernote({
            tabsize: 2,
            height: 120,
            toolbar: [
                ['font', ['bold', 'underline', 'clear']],
                ['color', ['color']],
                ['para', ['ul', 'ol', 'paragraph']],
                ['view', ['fullscreen']]
            ]
        });

        $('#main-image-field').on('change', function (){
            let file = $(this)[0].files[0];

            console.log(file)
            $('#main-image-upload').find('img').attr('src', URL.createObjectURL(file));
            $('#main-image-upload').find('a').attr('href', URL.createObjectURL(file));
        });

        @if(empty($errors->any()) && !$gallery->exists && request()->show != 'form')

        $('#agree').on('change', function (){
            const isChecked = $(this).is(':checked');
            $('#agree-button').attr('disabled', !isChecked)
        })

        $('#agree-button').on('click', function (e){
            e.preventDefault();
            window.location.href = '{{partner_route('gallery.edit', ['gallery' => $unit->id, 'show' => 'form'])}}'
        })
        @endif

        $('#unit_id').on('change', function (){
            let url = '{{partner_route('gallery.edit', ['gallery' => ':id', 'show' => 'form'])}}';
            url = url.replace(':id', $(this).val());
            window.location.href = url;
        })

        // Handle Next & Prev
        $('.next').on('click', function (e){

            e.preventDefault();
            $(this).attr('disabled', true).addClass('button-loading');

            let activeStep = $('.step.active'),
                currentStep = activeStep.data('step'),
                zeroImagesWrapper = 0;

            const checkFile = activeStep.find('.image-upload-box .uploaded .uploaded-image');
            // const checkRequiredInputs = checkFile.length === 0 && activeStep.hasClass('required');
            const checkRequiredInputs = activeStep.hasClass('image-with-select');
            // const lengthRequiredOfImages = parseInt(activeStep.find('select').val());
            // const lengthOfImages = checkFile.length


            const selectValue = activeStep.find('select').val()
            const imageWrappers = activeStep.find('.images-wrapper')

            imageWrappers.each(function (index){
                if($(this).find('.single-image-link').length == 0)
                    zeroImagesWrapper = 1
            })

            if (currentStep === 1)
                $('.prev').show()

            if (currentStep === 7) {
                $(this).hide()
                $('#submit').show()
            }

            // if(currentStep === 2){
            //     $('#available-error').hide().find('.alert-body').html('');
            //     $('#from, #to').removeClass('has-error').addClass('valid')
            //     goNext(currentStep)
            // if {
                let requiredInput = activeStep.find('input[required]'),
                    selectMenus = activeStep.find('select[required]');

                let errorsCount = 0;

                requiredInput.each(function (){
                    if ($(this).val() === ''){
                        // errors.push($(this).val());
                        $(this).addClass('has-error').parents('.form-group').find('.text-danger').addClass('active').html('هذا الحقل مطلوب ، برجاء إدخال القيمة المطلوبة.')
                        errorsCount++;
                    }else {
                        const fieldSize = $(this).data('size');
                        const fieldMaxSize = $(this).data('max-size');

                        if ($(this).val().length === fieldSize || typeof (fieldSize) === "undefined")
                            $(this).removeClass('has-error').addClass('valid').parents('.form-group').find('.text-danger').removeClass('active').html('')
                        else{
                            $(this).addClass('has-error').parents('.form-group').find('.text-danger').addClass('active').html('يجب ان يكون عدد الحروف أو الارقام في تلك الخانة '+ fieldSize)
                            errorsCount++;
                        }
                    }
                })

                // if (checkRequiredInputs || (checkFile.length && lengthRequiredOfImages !== lengthOfImages)){
                if (checkRequiredInputs && (imageWrappers.length != selectValue || (selectValue > 0 && zeroImagesWrapper))){
                    $('#available-error').show().find('.alert-body').html('برجاء اكمال الصور بما يتناسب مع العدد.')
                }else if(errorsCount === 0){
                    $('#available-error').hide().find('.alert-body').html()
                    goNext(currentStep)
                }

            // if (errorsCount == 0)
            //     goNext(currentStep)
            // }

            $('html, body').animate({ scrollTop: $('.form-container').offset().top }, 'slow');

            $(this).attr('disabled', false).removeClass('button-loading');
        })

        $('.prev').on('click', function (e){
            e.preventDefault();

            $(this).attr('disabled', true)

            $('#submit').hide()
            $('.next').show()

            let currentStep = $('.step.active').data('step');

            $('body').find('.step.active').hide().removeClass('active').prev().fadeIn().addClass('active')

            if (currentStep === 2)
                $(this).hide()

            $('html, body').animate({ scrollTop: $('.form-container').offset().top }, 'slow');
            $(this).attr('disabled', false)
        })
        const modal = $();

        $(document).ready(function (){
            $('.preloader-wrapper').remove()
        })

        function goNext(currentStep){
            $('.progress-bar--ribbon').eq(currentStep-1).addClass('active')
            $('body').find('.step.active').hide().removeClass('active').next().fadeIn().addClass('active')
        }

        $('form').on('submit', function (e){
            // e.preventDefault();

            // alert('submit')
            $('#submit-form').attr('disabled', true)
        })


        // for (let i = 0; i<=2; i++) {
            let browseFile = $('#encrypted_video');
            const progress = $('#progress-bar-encrypted');

        let resumable = new Resumable({
                target: '{{url('upload-video')}}',
                chunkSize: 10 * 1024 * 1024,
                query:{_token:'{{ csrf_token() }}'} ,// CSRF token
                // fileType: ['mp4'],
                headers: {
                    'Accept' : 'application/json'
                },
                testChunks: false,
                throttleProgressCallbacks: 2
            });

            resumable.assignBrowse(browseFile);

            resumable.on('fileAdded', function (file) { // trigger when file picked
                showProgress(progress);
                resumable.upload() // to actually start uploading.

                $('#encrypted_video_button').hide()
                $('#pause-upload').show()
                $('#stop-upload').show()

                $(this).parents('.upload-to-omega').find('.progress').show()
                $('#submit').attr('disabled', true)

                // browseFile.parents('.form-group').find('.stop-upload').attr('id', file.uniqueIdentifier);
            });

            resumable.on('fileProgress', function (file) { // trigger when file progress update
                updateProgress(progress, Math.floor(file.progress() * 100));
            });

            resumable.on('fileSuccess', function (file, response) { // trigger when file upload complete
                $('#encrypted_video_upload').val(JSON.parse(response).filename);

                $('#progress-bar-encrypted').find('.progress-bar').addClass('bg-success')


                $('#encrypted_video_button').show()
                $('#pause-upload').hide()
                $('#stop-upload').hide()

                $('#submit').attr('disabled', false)

                toastr.success("{{trans('messages.upload-success')}}");
            });

            resumable.on('fileError', function (file, response) { // trigger when there is any error
                toastr.error("{{trans('messages.upload-error')}}", "error");
            });

            $('#pause-upload').on('click', function (){
                resumable.pause();

                const progressBar = $(this).parents('.upload-to-omega').find('.progress-bar')
                progressBar.addClass('bg-warning')

                $('#encrypted_video_button').show()
                $('#pause-upload').hide()
                $('#stop-upload').show();
                $('#resume-upload').show();

                toastr.warning("{{trans('messages.upload-paused')}}");
            });

            $('#resume-upload').on('click', function (){
                resumable.upload();

                const progressBar = $(this).parents('.upload-to-omega').find('.progress-bar')
                progressBar.removeClass('bg-warning')

                $('#encrypted_video_button').hide()
                $('#pause-upload').show()
                $('#stop-upload').show();
                $('#resume-upload').hide();

                toastr.success("{{trans('messages.upload-resumed')}}");
            });

            $('#stop-upload').on('click', function (){
                resumable.cancel();

                $(this).parents('.upload-to-omega').find('.progress').hide()

                $('#encrypted_video_button').show()
                $('#pause-upload').hide()
                $('#stop-upload').hide();
                $('#resume-upload').hide();

                toastr.error("{{trans('messages.upload-stopped')}}", "error");
            });

        // }

        function showProgress(progress) {
            progress.find('.progress-bar').css('width', '0%');
            progress.find('.progress-bar').html('0%');
            progress.find('.progress-bar').removeClass('bg-success');
            progress.show();
        }

        function updateProgress(progress, value) {
            progress.find('.progress-bar').css('width', `${value}%`)
            progress.find('.progress-bar').html(`${value}%`)
        }

        function hideProgress(progress) {
            progress.hide();
        }
    </script>
@endsection