@extends('admin.layouts.master')
@section('headerFiles')
    <link rel="stylesheet" type="text/css" href="{{ admin_asset('admin-assets/plugins/table/datatable/datatables.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ admin_asset('admin-assets/plugins/table/datatable/custom_dt_zero_config.css') }}">

@endsection

@section('content')

<div class="container">
    <div class="page-header">
        <div class="page-title">
            <h3>All Properties </h3>            
        </div>
        <a href="{{ route('admin.property.add',['deals_of_month' => true])}}" class="mt-4 btn btn-button-7" style="float: right;">+ Add New</a>
    </div>
    <div class="row layout-spacing ">

        <div class="col-xl-12 col-lg-12 col-sm-12  layout-spacing">
            <div class="statbox widget box box-shadow">
                <div class="widget-content widget-content-area">
                    
                    <div class="table-responsive mb-4">
                        
                        <table id="zero-config" class="table table-striped table-hover table-bordered" style="width:100%">
                            <thead>
                                <tr>
                                    <th> #</th>
                                    <th> Code</th>
                                    <th style="width: 150px;">Name</th>
                                    <th>Category</th>
                                    <th>Type</th>
                                    @if(!isset($deals_of_month))
                                        <th>Actuall Price (AED)</th>
                                        <th>Offer Price (AED)</th>
                                    @endif
                                    <th>Status</th>
                                    <th>Created At</th>
                                    <th>NearBy Areas</th>
                                    <th>Actions</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach ($data["property"] as $key => $row)
                                    <tr>
                                        <td>{{ $key +1 }}</td>
                                        <td>{{ $row->property_code }}</td>
                                        <td>{{ $row->property_name }}</td>
                                        <td>
                                            @if ($row->category != null)
                                            {{ $row->category->name_en }}    
                                            @endif                                            
                                        </td>
                                        <td>{{----}}
                                            @if ($row->propertytype != null)
                                            {{ $row->propertytype->name_en }}    
                                            @endif                                            
                                        </td>
                                        @if(!isset($deals_of_month))
                                            <td>AED {{ $row->property_price }}</td>
                                            <td>AED {{ $row->offer_price > 0 ? $row->offer_price : 0 }}</td>
                                        @endif
                                        <td>{{ $row->property_status == 1 ? "Active" : "Inactive" }}</td>
                                        <td>{{ date('d-m-Y ',strtotime($row->property_created_date)) }}</td>
                                        <td><a href="{{ route('admin.property_nearby_areas', ['id' => $row->property_id])}}">Areas</a></td>
                                        <td class="align-center">
                                            <ul class="table-controls">
                                                <li><a href="javascript:;" onclick="loadImageModal('{{ $row->property_id }}')"><i class="flaticon-picture"></i></a></li>
                                                @php
                                                $route = route("admin.property.edit", ['id' => $row->property_id]);
                                                if(isset($deals_of_month)){
                                                    $route = route("admin.property.edit", ['id' => $row->property_id,'deals_of_month' => true]);
                                                }
                                                @endphp
                                                <li><a href="{{ $route   }}"><i class="flaticon-edit-fill-2"></i></a></li>
                                                <li><a href="javascript:;" onclick="showDeleteModal('{{ $row->property_id }}')"><i class="flaticon-delete"></i></a></li>
                                            </ul>
                                        </td>
                                    </tr>                                    
                                @endforeach                            
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>

</div>

<!-- Delete Modal -->
<div class="modal fade" id="deleteModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <form method="post" class="form-validate form-delete" method="post">
            @csrf
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">Delete Confirmation</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
            <div class="modal-body">
                Are you sure you want to delete this record?
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-danger deleteRecord">Delete</button>
            </div>
            <input type="hidden" name="id" id="id" value="">
        </form>
      </div>
    </div>
  </div>


  <!-- Image Modal -->
<div class="modal fade" id="imageModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg" role="document">
        
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">Image Upload</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
        <div class="modal-body">
            <form method="post" class="form-validate" action="{{ route("admin.property.image.upload") }}" method="post" enctype="multipart/form-data">
                @csrf
                <div class="form-group row" style="font-size:0.7rem !important;">
                    <div class="col-md-6 col-sm-12">
                        <label for="t-text">Image or Video (Dimension for image is (1200 x 700)px )</label>                                            
                        <input type="file" name="image[]" id="image" class="form-control" accept=".jpg, .jpeg, .png,.mp4" multiple="multiple" style="font-size:0.7rem !important;" required>
                    </div>
                    <div class="col-md-2 col-sm-12">
                        <label for="t-text">Sort Order</label>                                            
                        <input type="text" name="image_sort_order" id="image_sort_order" class="form-control" value="1"  style="font-size:0.7rem !important;" required>
                    </div>
                    <div class="col-md-2 col-sm-12">
                        <label for="t-text">&nbsp;</label>  
                        <button type="submit" class="btn btn-button-7" style="margin-top: 20px;" onclick="$loading.show()" >Upload</button>
                    </div>
                </div>
                <input type="hidden" name="property_id" id="property_id" value="">
            </form>
            <form method="post" class="form-validate" id="changeImageOrder" method="post">
                @csrf
                <div class="form-group row">
                    <table id="zero-config" class="table table-striped table-hover table-bordered" style="width:100%">
                        <thead>
                            <tr>
                                <th>Image or Video</th>
                                <th>Sort Order</th>
                                <th>Action</th>
                            </tr>
                        </thead>
                        
                            <tbody id="loadImages">
                                <tr>


                                </tr>
                            </tbody>
                        
                    </table>
                </div>
            </form>
            
        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-button-7" data-dismiss="modal">Cancel</button>
        </div>
        <input type="hidden" name="id" id="id" value="">

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

@endsection

@section('footerJs')
    <script src="{{ admin_asset('admin-assets/plugins/table/datatable/datatables.js') }}"></script>
    <script>
        $('#zero-config').DataTable({
            "language": {
                "paginate": { "previous": "<i class='flaticon-arrow-left-1'></i>", "next": "<i class='flaticon-arrow-right'></i>" },
                "info": "Showing page _PAGE_ of _PAGES_"
            }
        });

        function loadImageModal(id){
            $("#imageModal").modal("show");
            $("#property_id").val(id);
            let image_path = "{{public_url()}}";
            // Load images
            $.ajax({
                type:'POST',
                url: "{{ route("admin.property.images") }}",
                data: $('.form-delete').serialize()+"&id="+id+"&_token={{ csrf_token() }}",
                success: function(response){
                    console.log(response.images.length);
                    if(response.images.length > 0){
                        var makeHTML = '';
                        jQuery.each(response.images, function(index, item) {  
                            console.log(item);
                            var sortOrder = '';
                            if(item['sort_order'] != null){
                                sortOrder = item['sort_order'];
                            } 
                            // var imagePath =  "{{ asset('property/images/:imageName') }}";
                            // var imagePath = '{{ url("/property/images/", ":imageName") }}';
                            // imagePath = imagePath.replace(':imageName', item['property_images_path']);
                            
                            makeHTML += '<tr><td>';
                            if(item['file_type'] == 'mp4'){
                                makeHTML +=  '<a href="'+image_path+item['property_images_path']+'" target="_blank" data-fancybox="gallery" class="circle_media video-wrap" > <i class="far fa-play-circle"></i> <video width="150px" height="150px"  class="video-src"> <source src="'+image_path+item['property_images_path']+'" type="video/mp4"></video> </a>';
                            }else{
                                if(item['is_rms_image'] == 1){
                                    makeHTML +=  '<img src="'+item['property_images_path']+'" style="width:100px;">';
                                }else{
                                    makeHTML +=  '<img src="'+image_path+item['property_images_path']+'" style="width:100px;">';

                                }
                            }

                            makeHTML += '</td><td><input type="text" name="image_sort_order['+item['property_images_id']+']" value="'+sortOrder+'" class="form-control image-order-val"></td><td><a href="javascript:;" onclick="deleteSingleImage('+item['property_images_id']+')"><i class="flaticon-delete"></i></a></td></tr>';
                        });
                        makeHTML += '<tr><td>&nbsp;</td><td colspan="2"><button type="button" class="btn btn-button-7" onclick="changeImageOrder()">Change Order</button></td></tr>'
                        $("#loadImages").html(makeHTML);
                    } else {
                        $("#loadImages").html('<tr><td colspan="3">No Record Found</td></tr>');
                    }
                    

                },
                error: function(){
                    toastr["error"]("Something went wrong");
                }
            });
        }

        function showDeleteModal(id){
            $("#id").val(id);
            $("#deleteModal").modal("show");
        }

        $(".deleteRecord").click(function(){
            $.ajax({
                type:'POST',
                url: "{{ route("admin.property.delete") }}",
                data: $('.form-delete').serialize(),
                success: function(response){
                    if(response.success){
                        toastr["success"](response.message);
                        setTimeout(function(){ 
                            @if(isset($deals_of_month))
                                window.location.href = "{{ route("admin.property.deals_of_month")}}";
                            @else
                                window.location.href = "{{ route("admin.property.list")}}";
                            @endif
                        }, 1000);                        
                    } else {
                        toastr["error"](response.message);
                    }
                },
                error: function(){
                    toastr["error"]("Something went wrong");
                }
            });
        });

        function deleteSingleImage(id){
            $.ajax({
                type:'POST',
                url: "{{ route("admin.property.delete.image") }}",
                data: "id="+id+"&_token={{ csrf_token() }}",
                success: function(response){
                    if(response.success){
                        toastr["success"](response.message);
                        setTimeout(function(){ 
                            @if(isset($deals_of_month))
                                window.location.href = "{{ route("admin.property.deals_of_month")}}";
                            @else
                                window.location.href = "{{ route("admin.property.list")}}";
                            @endif
                        }, 1000);                        
                    } else {
                        toastr["error"](response.message);
                    }
                },
                error: function(){
                    toastr["error"]("Something went wrong");
                }
            });
        }

        function changeImageOrder(){            
            $.ajax({
                type:'POST',
                url: "{{ route("admin.property.image.order.change") }}",
                data: $('#changeImageOrder').serialize(),
                success: function(response){
                    if(response.success){
                        toastr["success"](response.message);
                        setTimeout(function(){ 
                            @if(isset($deals_of_month))
                                window.location.href = "{{ route("admin.property.deals_of_month")}}";
                            @else
                                window.location.href = "{{ route("admin.property.list")}}";
                            @endif
                        }, 1000);                        
                    } else {
                        toastr["error"](response.message);
                    }
                },
                error: function(){
                    toastr["error"]("Something went wrong");
                }
            });
        }

    </script>

@endsection