@extends('admin.layouts.index')

@section('styles')
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.css" />
    <link href="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote.min.css" rel="stylesheet">

    <style>
        .gallery-image-field{
            display: none;
            width: 0;
        }
        .images-wrapper{
            display: flex;
            margin-top: 10px;
            flex-wrap: wrap;
        }
        .images-wrapper .single-image-upload{
            width: 100px;
            height: 100px;
            margin-right: 5px;
        }
        .images-wrapper .single-image-upload label{
            width: 100%;
            height: 100%;
            border: 1px dashed #CCCCCC;
            border-radius: 5px;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 3rem;
            color: #c3c3c3;
            cursor: pointer;
            padding: 5px;
        }

        .images-wrapper .single-image-upload label:hover{
            background-color: #f9f9f9
        }

        .images-wrapper .single-image-upload label img{
            width: 100%;
            height: 100%;
            display: block;
        }
        .images-wrapper .single-image-upload i{
            display: none;
        }

        #refuse-unit-text{
            display: none;
        }

        #refuse-unit-text.show{
            display: block;
        }
    </style>
@endsection

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

    <script src="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote.min.js"></script>

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

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

        $('#refuse-unit').on('change', function (){
            if ($(this).is(':checked')){
                $('#accept-unit').prop('checked', false)
                $('#refuse-unit-text').addClass('show');
            } else
                $('#refuse-unit-text').removeClass('show');
        });

        $('#accept-unit').on('change', function (){
            $('#refuse-unit').prop('checked', false)
            $('#refuse-unit-text').removeClass('show');
        });
    </script>

@endsection

@section('subheader')
    <div class="subheader py-2 py-lg-4  subheader-solid " id="kt_subheader">
        <div class=" container-fluid  d-flex align-items-center justify-content-between flex-wrap flex-sm-nowrap">
            <!--begin::Details-->
            <div class="d-flex align-items-center flex-wrap mr-2">
                <!--begin::Title-->
                <h5 class="text-dark font-weight-bold mt-2 mb-2 mr-5">
                    {{$page_title}}
                </h5>
                <!--end::Search Form-->
            </div>
            <!--end::Details-->

            <!--begin::Toolbar-->
            <div class="d-flex align-items-center">
                <!--begin::Button-->
                <a href="{{route('admin.units.index')}}" class="btn btn-light-primary font-weight-bold ml-2">العودة للوحدات</a>
                <!--end::Button-->
            </div>
            <!--end::Toolbar-->
        </div>
    </div>
@stop

@section('content')
    <div class="d-flex flex-column-fluid">
        <!--begin::Container-->
        <div class="container">
            <!-- Modal -->
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">{{($unit->unit->unit_number ?? '').' - '.($unit->unit->beach->beach ?? '').' - '.($unit->unit->beach->sector->sector_name ?? '')}}</h5>
                </div>

                <div class="modal-body">

                    <form method="post" id="form" action="{{route('admin.units.update', $unit->id)}}">
                        @csrf
                        @method('PUT')

                        <div class="form-group">
                            <label for="unit_name">اسم العقار</label>
                            <input type="text" id="unit_name" value="{{$unit->unit_name}}" class="form-control" disabled />
                        </div>

                        <div class="form-group">
                            <label>غرف النوم</label>

                            <div class="images-wrapper">
                                @foreach($rooms as $room)
                                    <a data-fancybox="gallery" class="p-1" data-src="{{env('CONTRACT_APP_URL').'/'.UNIT_ORIGINAL_IMAGE.'/'.$room->value}}" data-caption="صور الغرف" data-speed="700">
                                        <img src="{{env('CONTRACT_APP_URL').'/'.UNIT_THUMBNAIL_IMAGE.'/'.$room->value}}" alt="" />
                                    </a>
                                @endforeach
                            </div>
                        </div>

                        <div class="form-group">
                            <label>دورات المياة</label>

                            <div class="images-wrapper">
                                @foreach($toilets as $toilet)
                                    <a data-fancybox="gallery" class="p-1" data-src="{{env('CONTRACT_APP_URL').'/'.UNIT_ORIGINAL_IMAGE.'/'.$toilet->value}}" data-caption="صور دورات المياة" data-speed="700">
                                        <img src="{{env('CONTRACT_APP_URL').'/'.UNIT_THUMBNAIL_IMAGE.'/'.$toilet->value}}" alt="" />
                                    </a>
                                @endforeach
                            </div>
                        </div>

                        <div class="form-group">
                            <label>المسابح</label>

                            <div class="images-wrapper">
                                @foreach($pools as $pool)
                                    <a data-fancybox="gallery" class="p-1" data-src="{{env('CONTRACT_APP_URL').'/'.UNIT_ORIGINAL_IMAGE.'/'.$pool->value}}" data-caption="صور المسابح" data-speed="700">
                                        <img src="{{env('CONTRACT_APP_URL').'/'.UNIT_THUMBNAIL_IMAGE.'/'.$pool->value}}" alt="" />
                                    </a>
                                @endforeach
                            </div>
                        </div>

                        <div class="form-group">
                            <label>الصالات</label>

                            <div class="images-wrapper">
                                @foreach($halls as $hall)
                                    <a data-fancybox="gallery" class="p-1" data-src="{{env('CONTRACT_APP_URL').'/'.UNIT_ORIGINAL_IMAGE.'/'.$hall->value}}" data-caption="صور الصالات" data-speed="700">
                                        <img src="{{env('CONTRACT_APP_URL').'/'.UNIT_THUMBNAIL_IMAGE.'/'.$hall->value}}" alt="" />
                                    </a>
                                @endforeach
                            </div>
                        </div>

                        <div class="form-group">
                            <label>المطابخ</label>

                            <div class="images-wrapper">
                                @foreach($kitchens as $kitchen)
                                    <a data-fancybox="gallery" class="p-1" data-src="{{env('CONTRACT_APP_URL').'/'.UNIT_ORIGINAL_IMAGE.'/'.$kitchen->value}}" data-caption="صور المطابخ" data-speed="700">
                                        <img src="{{env('CONTRACT_APP_URL').'/'.UNIT_THUMBNAIL_IMAGE.'/'.$kitchen->value}}" alt="" />
                                    </a>
                                @endforeach
                            </div>
                        </div>

                        @if(array_key_exists('view_image', $unit_info))
                            <div class="form-group">
                                <label>اطلالة العقار</label>

                                <div class="images-wrapper">
                                    <a data-fancybox="gallery" class="p-1" data-src="{{env('CONTRACT_APP_URL').'/'.UNIT_ORIGINAL_IMAGE.'/'.$unit_info['view_image']}}" data-caption="صورة غطلالة العقار" data-speed="700">
                                        <img src="{{env('CONTRACT_APP_URL').'/'.UNIT_THUMBNAIL_IMAGE.'/'.$unit_info['view_image']}}" alt="" />
                                    </a>
                                </div>
                            </div>
                        @endif

                        <div class="form-group">
                            <label>واجهة العقار</label>

                            <div class="images-wrapper">
                                <a data-fancybox="gallery" class="p-1" data-src="{{env('CONTRACT_APP_URL').'/'.UNIT_ORIGINAL_IMAGE.'/'.$unit_info['front_image']}}" data-caption="صورة واجهة العقار" data-speed="700">
                                    <img src="{{env('CONTRACT_APP_URL').'/'.UNIT_THUMBNAIL_IMAGE.'/'.$unit_info['front_image']}}" alt="" />
                                </a>
                            </div>
                        </div>

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

                                    <textarea id="details" name="details">{{old('details') ?? $unit_info['details']}}</textarea>
                                </div>
                            </div>
                        </div>

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

                                    <textarea id="capacity" name="capacity">{{old('capacity') ?? $unit_info['capacity']}}</textarea>
                                </div>
                            </div>
                        </div>

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

                                    <video style="width: 100%" src="{{env('CONTRACT_APP_URL').'/'.UNIT_VIDEO_URL.'/'.$unit_info['video_url']}}" controls id="video_url"></video>
                                </div>
                            </div>
                        </div>

                        <div class="form-group">
                            <label for="video_url"><a href="{{$unit->unit_location}}" target="_blank">رابط موقع العقار</a></label>
                        </div>

                        <div class="form-group">
                            <label for="accept-unit">قبول و عرض العقار</label>

                            <span class="switch switch-outline switch-icon switch-success">
									<label>
											<input id="accept-unit" type="checkbox" name="accept" {{old('refuse') == 'on' || $unit->edit_status == 1 ? 'checked' : ''}} />
											<span></span>
									</label>
							</span>
                        </div>

                        <div class="form-group">
                            <label for="refuse-unit">رفض عرض العقار</label>

                            <span class="switch switch-outline switch-icon switch-danger">
									<label>
											<input id="refuse-unit" type="checkbox" name="refuse" {{old('refuse') == 'on' || $unit->edit_status == 2 ? 'checked' : ''}} />
											<span></span>
									</label>
							</span>
                        </div>

                        <div class="row" id="refuse-unit-text">
                            <div class="col-md-6 col-xs-12">
                                <div class="form-group">
                                    <label for="note">سبب الرفض</label>

                                    <textarea id="note" name="note" class="form-control">{{old('note') ?? $unit->note}}</textarea>
                                </div>
                            </div>
                        </div>

                        <button type="submit" class="btn btn-primary">تعديل</button>

                    </form>

                </div>

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