@extends('layouts.admin')
@section('content')
    <style>
        .table tbody tr:last-child td,
        .table tbody tr:last-child th{
            border-bottom: none;
        }
        .card-body .table{
            margin-bottom: 0;
        }
        .long-description {
            max-width: 600px;  /* Limit width */
            max-height: 150px; /* Limit height */
            overflow: auto;    /* Enable scrolling for overflow */
            word-wrap: break-word; /* Ensure long words break properly */
            white-space: pre-line; /* Preserve line breaks */
            padding: 5px;
            border: 1px solid #ddd; /* Optional: add a border */
            background-color: #f8f9fa; /* Light background for readability */
            border-radius: 5px;
        }

        #statusDropdown {
            height: 25px;
            padding: 0 0px 0px 8px;
        }

        #map {
            height: 500px;
            width: 100%;
        }

    </style>

   <!-- start page title -->
   <div class="row">
    <div class="col-12">
        <div class="page-title-box d-sm-flex align-items-center justify-content-between bg-galaxy-transparent">
            <h4 class="mb-sm-0">Ad Details</h4>

            <div class="page-title-right">
                <ol class="breadcrumb m-0">
                    <li class="breadcrumb-item"><a href="javascript: void(0);">Home</a></li>
                    <li class="breadcrumb-item"><a href="javascript: void(0);">Ads</a></li>
                    <li class="breadcrumb-item active">Ad Details</li>
                </ol>
            </div>
        </div>
    </div>
</div>
<!-- end page title -->

<div class="row">
    <div class="col-lg-12">
        <div class="card">
            <div class="card-header border-0">
                <div class="row align-items-center gy-3">
                    <div class="col-sm">
                        <h5 class="card-title mb-0">Ad Details <strong>{{ $ad->ad_number }}</strong></h5>
                    </div>
                </div>
            </div>
            <div class="card-body">
                <div class="row">
                    <!-- Left Column: Contact Information, Documents, Additional Information, Options -->
                    <div class="col-lg-6">
                        <div class="card mb-3">
                            <div class="card-header py-2" style="background-color: var(--vz-primary);">
                                <h4 class="mb-0 text-white">Basic Information</h4>
                            </div>
                            <div class="card-body">
                                <table class="table table-sm">
                                    <tr>
                                        <th>Status</th>
                                        <td>{{$ad->status}}</td>
                                        <td>
                                            <select class="form-select" id="statusDropdown" data-url="{{ route('admin.ads.status', $ad->id) }}" data-id="{{ $ad->id }}">
                                            <option>Select a Status</option>
                                            @foreach(['Rejected','Live'] as $status)
                                                <option value="{{ $status }}" {{ $ad->status == $status ? 'selected' : '' }}>
                                                    {{ $status }}
                                                </option>
                                            @endforeach
                                            </select>
                                        </td>
                                        
                                    </tr>
                                    <tr>
                                        <th>Created On</th>
                                        <td>{{ $ad->created_at->format('d-m-Y') }}</td>
                                        <td></td>
                                    </tr>
                                    <tr>
                                        <th>City</th>
                                        <td>{{ $ad->city->name }}</td>
                                        <td>{{ $ad->city->name_ar }}</td>
                                    </tr>
                                    <tr>
                                        <th>Price</th>
                                        <td>{{ $ad->total_amount }}</td>
                                        <td></td>
                                    </tr>
                                    <tr>
                                            <th>Plan</th>
                                            <td>{{ $ad->plan->name??'N/A' }}</td>
                                        </tr>
                                        <tr>
                                            <th>Duration</th>
                                            <td>{{ $ad->plan->duration??'N/A' }}</td>
                                        </tr>
                                </table>
                            </div>
                        </div>
                        
                    </div>

                    <!-- Right Column: Shipping Information, Billing Information, Order Summary -->
                        <div class="col-lg-6">
                            <div class="card mb-3">
                                <div class="card-header py-2" style="background-color: var(--vz-primary);">
                                    <h4 class="mb-0 text-white">Customer Information</h4>
                                </div>
                                <div class="card-body">
                                    <table class="table table-sm">
                                        <tr>
                                            <th>Customer Name</th>
                                            <td>{{ $ad->customer->name??'N/A' }}</td>
                                        </tr>
                                        <tr>
                                            <th>Gender</th>
                                            <td>{{ $ad->customer->gender??'N/A' }}</td>
                                        </tr>
                                        <tr>
                                            <th>Nationality</th>
                                            <td>{{ $ad->customer->nationality->name??'N/A' }}</td>
                                        </tr>
                                        <tr>
                                            <th>Email</th>
                                            <td>{{ $ad->customer->email??'N/A' }}</td>
                                        </tr>
                                        <tr>
                                            <th>Phone</th>
                                            <td>{{ $ad->customer->dial_code??'N/A' }} {{ $ad->customer->phone??'N/A' }}</td>
                                        </tr>
                                    </table>
                                </div>
                            </div>
                        </div>
                </div>
                <div class="row">
                    <!-- Left Column: Contact Information, Documents, Additional Information, Options -->
                    <div class="col-lg-12">
                        <div class="card mb-3">
                            <div class="card-header py-2" style="background-color: var(--vz-primary);">
                                <h4 class="mb-0 text-white">Ad Information</h4>
                            </div>
                            <div class="card-body">
                                <table class="table table-sm">
                                    <tr>
                                        <th>Title</th>
                                        <td>{{ $ad->title }}</td>
                                        <td>{{ $ad->title_ar }}</td>
                                    </tr>
                                    <tr>
                                        <th>Category</th>
                                        <td>{{ $ad->category->name_with_parent_category_name }}</td>
                                        <td></td>
                                    </tr>
                                    @foreach($fields as $field)
                                    @if(!in_array($field['field_type'], ['file', 'files','range']) && empty($field['value']) )
                                    @continue
                                    @endif
                                    <tr>
                                        <th>{{$field['field_label']}}</th>
                                        @if(in_array($field['field_type'], ['select','currency']))
                                        <td>{{ $field['attribute_value']->name??'' }}</td>
                                        <td>{{ $field['attribute_value']->name??'' }}</td>
                                        @elseif(in_array($field['field_type'], ['range']))
                                        <td>{{ $field['from']??'' }}-{{ $field['to']??'' }}</td>
                                        <td></td>
                                        @elseif(in_array($field['field_type'],['make','model']))
                                        <td>{{ $field['attribute_value']->name??'' }}</td>
                                        <td>{{ $field['attribute_value']->name_ar??'' }}</td>
                                        @elseif(in_array($field['field_type'],['amenities']))
                                        <td>@foreach($field['attribute_value']??[] as $amenity) {{$amenity->name}}, @endforeach</td>
                                        <td>@foreach($field['attribute_value']??[] as $amenity) {{$amenity->name_ar}}, @endforeach</td>
                                        @elseif(in_array($field['field_type'],['file','files']))
                                            <td>
                                            @foreach($field['attribute_value']??[] as $file)
                                            @if(Str::endsWith($file['image'], ['.jpg', '.jpeg', '.png', '.gif', '.webp']))
                                                
                                                    <img src="{{ $file['image'] }}" data-toggle="modal" data-target="#exampleModalCenter" class = "img-view img-thumbnail" style = "width:200px; height: 150px; object-fit: cover;" >    
                                            @elseif(Str::endsWith($file['image'], ['.mp4', 'avi', 'mov', 'mkv']))
                                                <img src="{{ $file['thumbnail']??asset('images/camera_placeholder.png') }}" data-toggle="modal" data-target="#VideoModalCenter" data-video="{{$file['image']}}" class = "video-view img-thumbnail" style = "width:200px; height: 150px; object-fit: cover;" >   
                                            @else
                                                    <a href="{{ $file['image'] }}" target="_blank" class="btn btn-primary btn-sm">View File</a>
                                            @endif
                                            @endforeach
                                            </td>
                                        @else
                                        <td>{{ $field['value'] }}</td>
                                        <td>{{ $field['value_ar'] }}</td>
                                        @endif
                                    </tr>
                                    @endforeach
                                </table>
                            </div>
                        </div>
                    </div>
                </div>




                <div class="row">
                    <!-- Left Column: Contact Information, Documents, Additional Information, Options -->
                    <div class="col-lg-12">
                        <div class="card mb-3">
                            <div class="card-header py-2" style="background-color: var(--vz-primary);">
                                <h4 class="mb-0 text-white">Location</h4>
                            </div>
                            <div class="card-body">
                            <div id="map"></div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <!-- Left Column: Contact Information, Documents, Additional Information, Options -->
                    <div class="col-lg-12">
                        <div class="card mb-3">
                            <div class="card-header py-2" style="background-color: var(--vz-primary);">
                                <h4 class="mb-0 text-white">Reports</h4>
                            </div>
                            <div class="card-body">
                                <table class="table table-bordered nowrap align-middle" style="width: 100%;">
                                    <thead class="">
                                        <tr class="text-uppercase">
                                            <th style="width: 20px;">Sl. No</th>
                                            <th>User</th>
                                            <th>Type</th>
                                            <th>Created At</th>
                                            <th>Status</th>
                                            <th>View</th>
                                        </tr>
                                    </thead>
                                    <tbody class="list form-check-all">
                                        @foreach($ad->reports??[] as $key => $report)
                                        <tr>
                                            <td>{{ $key + 1 }}</td>
                                            <td>{{ $report->user->name??'N/A' }}</td>
                                            <td>{{ $report->type->name }}</td>
                                            <td>{{ $report->created_at->format('d-m-Y') }}</td>
                                            <td>{{ $report->status }}</td>
                                            <td>
                                                <div class="dropdown">
                                                    <a href="#" class="btn btn-soft-secondary btn-sm" role="button" id="dropdownMenuLink5" data-bs-toggle="dropdown" aria-expanded="false">
                                                        <i class="ri-more-2-fill"></i>
                                                    </a>
                                                    <ul class="dropdown-menu" aria-labelledby="dropdownMenuLink5">
                                                        <li><a class="dropdown-item" href="{{ route('admin.ad_reports.show', $report->id) }}">Details</a></li>
                                                    </ul>
                                                </div>
                                            <td>
                                        </tr>
                                        @endforeach
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- Back Button -->
                <div class="hstack gap-2 justify-content-between mt-3">
                    <a href="{{ route('admin.ads') }}" class="btn btn-success">Back</a>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="fileViewerModal" tabindex="-1" aria-labelledby="fileViewerModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="fileViewerModalLabel">File Viewer</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <!-- Iframe for supported file types -->
                <embed id="fileViewerIframe" src="" width="100%" height="500px">
                
                <!-- Message for unsupported files -->
               
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content">
      
      <img src = "" width = "100%" class = "img img-thumbnail" id = "display-image">                  

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

<div class="modal fade" id="videoModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content">
      
      <video id="video-player" width="100%" height="500" controls>
        <source src="" type="video/mp4">
        Your browser does not support the video tag.
      </video>                 

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



@endsection
@section('script')
<script>

        $("body").on('click', '#updateStatus', function () {
            // Open the modal
            var bookingId = $(this).data('id'); // Get the booking ID from the clicked item
            var currentStatus = $(this).data('status'); // Get the current status
            
            // Set the booking ID in the hidden input field
            $('#bookingId').val(bookingId);
            
            // Disable the current status option in the dropdown
            $('#statusDropdown option').each(function () {
                if ($(this).val() === currentStatus) {
                    $(this).attr('disabled', 'disabled');
                } else {
                    $(this).removeAttr('disabled');
                }
            });
            var firstEnabledOption = $('#statusDropdown option:not(:disabled):first');
            if (firstEnabledOption.length) {
                firstEnabledOption.prop('selected', true);
            }

            // Show the modal
            $('#statusModal').modal('show');
        });

        $("#saveStatus").on('click', function () {
            var newStatus = $('#statusDropdown').val();
            var bookingId = $('#bookingId').val();

            // Send AJAX request to update status
            $.ajax({
                url: updateUrl,
                type: 'PATCH',
                dataType: 'json',
                data: {
                    _token: $('meta[name="csrf-token"]').attr('content'),
                    status: newStatus
                },
                success: function (response) {
                    if (response.status === "success") {
                           
                            Swal.fire({
                                    iconHtml: `<img src="${ASSET_PATH}/success-circle.svg" class="img-fluid">`,
                                    text: response.message,
                                    confirmButtonText: "OK",
                                    customClass: {
                                        confirmButton: 'custom-ok-button-class w-sm'
                                    }
                            }).then(() => {
                                location.reload(); // Redirect to company list
                            });

                        // Close the modal
                        $('#statusModal').modal('hide');
                        // Optionally, reload or update the UI with the new status
                    } else {
                       
                        Swal.fire({
                                    title: "Error!",
                                    text: response.message,
                                    icon: "error",
                                    confirmButtonText: "OK",
                                    confirmButtonColor: "#299cdb"
                                });
                    }
                },
                error: function (xhr) {
                    Swal.fire({
                                    title: "Error!",
                                    text: "Something went wrong. Please try again later.",
                                    icon: "error",
                                    confirmButtonText: "OK",
                                    confirmButtonColor: "#299cdb"
                                });
                }
            });
        });

    </script>

<script>
$(document).ready(function () {
    $(document).on('click','.img-view',function(){
            console.log('asdfasdfasd')
            let src = $(this).attr('src');
            $('#display-image').attr('src',src);
            $('#exampleModalCenter').modal('show');
        })

        $(document).on('click','.video-view',function(){
            let src = $(this).data('video');
            $('#video-player source').attr('src',src);
            $("#video-player")[0].load();
            $('#videoModalCenter').modal('show');
        })
    $('.view-file-btn').on('click', function () {
        const fileUrl = $(this).data('file-url'); // Get the file URL
        const fileExtension = fileUrl.split('.').pop().toLowerCase();

        if (fileExtension === 'pdf') {
            // Handle PDF file (using native PDF viewer)
            $('#fileViewerIframe').attr('src', fileUrl); 
            $('#fileViewerIframe').attr('type', 'application/pdf');
        } 
        else if (['doc', 'docx'].includes(fileExtension)) {
            // Use Microsoft Office Online Viewer for DOC/DOCX files
            const officeViewerUrl = 'https://view.officeapps.live.com/op/view.aspx?src=' + encodeURIComponent(fileUrl);
            $('#fileViewerIframe').attr('src', officeViewerUrl);
        } 
        else {
            // For unsupported file formats, display a message
            $('#fileViewerIframe').attr('src', ''); // Clear iframe
            $('.modal-body').html('<p>Unsupported file format</p>'); // Show message
        }

        // Show the modal
        $('#fileViewerModal').modal('show');
    });

    var adsStatus = "{{ $ad->status }}";

    $("#statusDropdown").on('change', function () {
        const select = $(this);
        const packageUrl = select.data('url');
        const newStatus = select.val();
        const id = select.data('id');
        console.log('clicked')
    
        setTimeout(function () {
            Swal.fire({
                iconHtml: `<img src="${ASSET_PATH}/alert-circle.svg" class="img-fluid">`,
                text: "Are you sure you want to change the status?",
                icon: 'warning',
                showCancelButton: true,
                confirmButtonText: 'Yes, Change It!',
                cancelButtonText: 'Cancel',
                reverseButtons: true,
                customClass: {
                    confirmButton: 'custom-ok-button-class',
                    cancelButton: 'btn custom-cancel-button-class',
                }
            }).then((result) => {
                if (result.isConfirmed) {
                    $.ajax({
                        url: packageUrl,
                        type: 'PATCH',
                        dataType: 'json',
                        data: {
                            _token: $('meta[name="csrf-token"]').attr('content'),
                            status: newStatus,
                        },
                        success: function (response) {
                            if (response.status === "success") {
                                Swal.fire({
                                    iconHtml: `<img src="${ASSET_PATH}/success-circle.svg" class="img-fluid">`,
                                    text: response.message,
                                    confirmButtonText: "OK",
                                    customClass: {
                                        confirmButton: 'custom-ok-button-class w-sm'
                                    }
                                }).then(() => {
                                    location.reload(); // Redirect to company list
                                });
                            } else {
                                Swal.fire({
                                    iconHtml: `<img src="${ASSET_PATH}/error-circle.svg" class="img-fluid">`,
                                    text: response.message,
                                    confirmButtonText: "OK",
                                    customClass: {
                                        confirmButton: 'custom-ok-button-class w-sm'
                                    }
                                });
                            }
                        },
                        error: function (xhr) {
                            select.val(adsStatus);
                            Swal.fire({
                                text: xhr.responseJSON?.message || 'Failed to update status. Please try again.',
                                iconHtml: `<img src="${ASSET_PATH}/error-circle.svg" class="img-fluid">`,
                                confirmButtonText: "OK",
                                customClass: {
                                    confirmButton: 'custom-ok-button-class w-sm'
                                }
                            });
                        }
                    });
                } else {
                    select.val(adsStatus);
                }
            });
        }, 0);
    });

    $('#isPopular').on('change', function () {
        const isChecked = $(this).is(':checked');
        const adId = "{{ $ad->id }}";
        const url = "{{ route('admin.popularads.toggle', $ad->id) }}";
        var checkbox = $(this);

        Swal.fire({
            iconHtml: `<img src="${ASSET_PATH}/alert-circle.svg" class="img-fluid">`,
            text: "Are you sure you want to change the 'Popular' status?",
            icon: 'warning',
            showCancelButton: true,
            confirmButtonText: 'Yes, Change It!',
            cancelButtonText: 'Cancel',
            reverseButtons: true,
            customClass: {
                confirmButton: 'custom-ok-button-class',
                cancelButton: 'btn custom-cancel-button-class',
            }
        }).then((result) => {
            if (result.isConfirmed) {
                $.ajax({
                    url: url,
                    type: 'PATCH',
                    dataType: 'json',
                    data: {
                        _token: $('meta[name="csrf-token"]').attr('content'),
                        is_popular: isChecked ? 1 : 0,
                    },
                    success: function (response) {
                        if (response.status === "success") {
                            Swal.fire({
                                iconHtml: `<img src="${ASSET_PATH}/success-circle.svg" class="img-fluid">`,
                                text: response.message,
                                confirmButtonText: "OK",
                                customClass: {
                                    confirmButton: 'custom-ok-button-class w-sm'
                                }
                            });
                        } else {
                            Swal.fire({
                                iconHtml: `<img src="${ASSET_PATH}/error-circle.svg" class="img-fluid">`,
                                text: response.message,
                                confirmButtonText: "OK",
                                customClass: {
                                    confirmButton: 'custom-ok-button-class w-sm'
                                }
                            });
                            checkbox.prop('checked', !isChecked); // Revert checkbox state
                        }
                    },
                    error: function (xhr) {
                        Swal.fire({
                            text: xhr.responseJSON?.message || 'Failed to update status. Please try again.',
                            iconHtml: `<img src="${ASSET_PATH}/error-circle.svg" class="img-fluid">`,
                            confirmButtonText: "OK",
                            customClass: {
                                confirmButton: 'custom-ok-button-class w-sm'
                            }
                        });
                        checkbox.prop('checked', !isChecked); // Revert checkbox state
                    }
                });
            } else {
                checkbox.prop('checked', !isChecked); // Revert checkbox state
            }
        });
    });

    $('#isFeatured').on('change', function () {
        const isChecked = $(this).is(':checked');
        const adId = "{{ $ad->id }}";
        const url = "{{ route('admin.keepLookingStatus', $ad->id) }}";
        var checkbox = $(this);

        Swal.fire({
            iconHtml: `<img src="${ASSET_PATH}/alert-circle.svg" class="img-fluid">`,
            text: "Are you sure you want to change the 'Keep Looking For' status?",
            icon: 'warning',
            showCancelButton: true,
            confirmButtonText: 'Yes, Change It!',
            cancelButtonText: 'Cancel',
            reverseButtons: true,
            customClass: {
                confirmButton: 'custom-ok-button-class',
                cancelButton: 'btn custom-cancel-button-class',
            }
        }).then((result) => {
            if (result.isConfirmed) {
                $.ajax({
                    url: url,
                    type: 'PATCH',
                    dataType: 'json',
                    data: {
                        _token: $('meta[name="csrf-token"]').attr('content'),
                        is_keep_looking: isChecked ? 1 : 0,
                    },
                    success: function (response) {
                        if (response.status === "success") {
                            Swal.fire({
                                iconHtml: `<img src="${ASSET_PATH}/success-circle.svg" class="img-fluid">`,
                                text: response.message,
                                confirmButtonText: "OK",
                                customClass: {
                                    confirmButton: 'custom-ok-button-class w-sm'
                                }
                            });
                        } else {
                            Swal.fire({
                                iconHtml: `<img src="${ASSET_PATH}/error-circle.svg" class="img-fluid">`,
                                text: response.message,
                                confirmButtonText: "OK",
                                customClass: {
                                    confirmButton: 'custom-ok-button-class w-sm'
                                }
                            });
                            checkbox.prop('checked', !isChecked); // Revert checkbox state
                        }
                    },
                    error: function (xhr) {
                        Swal.fire({
                            text: xhr.responseJSON?.message || 'Failed to update status. Please try again.',
                            iconHtml: `<img src="${ASSET_PATH}/error-circle.svg" class="img-fluid">`,
                            confirmButtonText: "OK",
                            customClass: {
                                confirmButton: 'custom-ok-button-class w-sm'
                            }
                        });
                        checkbox.prop('checked', !isChecked); // Revert checkbox state
                    }
                });
            } else {
                checkbox.prop('checked', !isChecked); // Revert checkbox state
            }
        });
    });
});

    </script>
<script>

  function initMap() {
    var uluru = {lat: {{ (float)$ad->latitude ?? '' }}, lng: {{ (float)$ad->longitude ?? ''}}};
    var map = new google.maps.Map(document.getElementById('map'), {
      zoom: 17,
      center: uluru
      // You can set more attributes value here like map marker icon etc
    });
    var marker = new google.maps.Marker({
      position: uluru,
      map: map
    });
  }
</script>
<script async defer src="https://maps.googleapis.com/maps/api/js?key={{ env('GOOGLE_MAPS_API_KEY') }}&callback=initMap"></script>
@endsection