@extends('layouts.admin')
@section('content')
<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">Business Listings</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 active">Business Listings</li>
            </ol>
         </div>
      </div>
   </div>
</div>
<div class="row">
   <div class="col-lg-12">
      <div class="card">
         <div class="card-header border-0">
            <h5 class="card-title mb-0">Business Listing Table</h5>
         </div>
         <div class="card-body">
            <div class="table-responsive">
               <table id="BusinessTable" class="table table-bordered nowrap align-middle" style="width:100%;">
                  <thead class="text-uppercase">
                     <tr>
                        <th>Sl No</th>
                        <th>Image</th>
                        <th>Title</th>
                        <th>Owner</th>
                        <th>Category</th>
                        <th>Featured</th>
                        <th>Status</th>
                        <th>Action</th>
                     </tr>
                  </thead>
                  <tbody>
                     @foreach($businesses as $business)
                     <tr>
                        <td>{{ $loop->iteration }}</td>
                        <td>
                           <img src="{{ $business->main_image }}" 
                              alt="Image" 
                              style="width:60px; height:60px; object-fit:cover; border-radius:6px;">
                        </td>
                        <td>{{ $business->title }}</td>
                        <td>{{ $business->owner->name ?? '-' }}</td>
                        <td>{{ $business->category->name ?? '-' }}</td>
                        <td>
                            <select class="form-select business-featured" data-id="{{ $business->id }}">
                                <option value="0" {{ $business->featured == 0 ? 'selected' : '' }}>No</option>
                                <option value="1" {{ $business->featured == 1 ? 'selected' : '' }}>Yes</option>
                            </select>
                        </td>

                        <td>
                           <select style="width: 120px !important" class="form-select business-status" data-id="{{ $business->id }}">
                           <option value="pending"  {{ $business->approval_status == 'pending' ? 'selected' : '' }}>Pending</option>
                           <option value="approved" {{ $business->approval_status == 'approved' ? 'selected' : '' }}>Approved</option>
                           <option value="rejected" {{ $business->approval_status == 'rejected' ? 'selected' : '' }}>Rejected</option>
                           </select>
                        </td>
                        <td class="text-center">
                           <a href="{{ route('admin.businesslisting.view', $business->id) }}" class="btn btn-sm btn-primary">View</a>
                           <button class="btn btn-sm btn-danger delete-btn"
                              data-url="{{ route('admin.businesslisting.delete',$business->id) }}">
                           Delete
                           </button>
                        </td>
                     </tr>
                     @endforeach
                  </tbody>
               </table>
            </div>
         </div>
      </div>
   </div>
</div>
@endsection
@section('script')
<script>
   $(document).ready(function() {
       $('#BusinessTable').DataTable({
           responsive: true,
           pageLength: 10
       });
   });
   
   // ✅ Status Change via Dropdown
   $("body").on("change", ".business-status", function () {
       const id = $(this).data("id");
       const status = $(this).val();
   
       Swal.fire({
           text: `Change business status to '${status}'?`,
           icon: "warning",
           showCancelButton: true,
           confirmButtonText: "Yes",
           cancelButtonText: "No",
           reverseButtons: true
       }).then((result) => {
           if (result.isConfirmed) {
               fetch("{{ route('admin.businesslisting.status') }}", {
                   method: "POST",
                   headers: {
                       "Content-Type": "application/json",
                       "X-CSRF-TOKEN": document.querySelector('meta[name="csrf-token"]').content
                   },
                   body: JSON.stringify({ id, status })
               })
               .then(res => res.json())
               .then(data => {
                  Swal.fire({
                       iconHtml: `<img src="${ASSET_PATH}/success-circle.svg" class="img-fluid">`,
                       text: data.message,
                       confirmButtonText: "OK",
                       customClass: {
                           confirmButton: 'custom-ok-button-class w-sm'
                       }
                   }).then(() => {
                       location.reload(); // Refresh page
                   });
               });
           } else {
               location.reload();
           }
       });
   });

   // ✅ Featured Change via Dropdown
    $("body").on("change", ".business-featured", function () {
        const id = $(this).data("id");
        const featured = $(this).val();

        Swal.fire({
            text: `Change business to '${featured == 1 ? 'Featured' : 'Not Featured'}'?`,
            icon: "warning",
            showCancelButton: true,
            confirmButtonText: "Yes",
            cancelButtonText: "No",
            reverseButtons: true
        }).then((result) => {
            if (result.isConfirmed) {
                fetch("{{ route('admin.businesslisting.featured') }}", {
                    method: "POST",
                    headers: {
                        "Content-Type": "application/json",
                        "X-CSRF-TOKEN": document.querySelector('meta[name="csrf-token"]').content
                    },
                    body: JSON.stringify({ id, featured })
                })
                .then(res => res.json())
                .then(data => {
                    Swal.fire({
                        iconHtml: `<img src="${ASSET_PATH}/success-circle.svg" class="img-fluid">`,
                        text: data.message,
                        confirmButtonText: "OK",
                        customClass: {
                            confirmButton: 'custom-ok-button-class w-sm'
                        }
                    }).then(() => location.reload());
                });
            } else {
                location.reload();
            }
        });
    });

   
   // ✅ Delete
   $("body").on("click", ".delete-btn", function () {
       const deleteUrl = $(this).data("url");
   
       Swal.fire({
           iconHtml: `<img src="${ASSET_PATH}/delete-circle.svg" class="img-fluid">`,
           text: "Are you sure? You will not be able to recover this!",
           icon: 'warning',
           showCancelButton: true,
           confirmButtonText: 'Yes, delete it!',
           cancelButtonText: 'No, keep it!',
           reverseButtons: true,
       }).then((result) => {
           if (result.isConfirmed) {
               fetch(deleteUrl, {
                   method: 'DELETE',
                   headers: {
                       'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content
                   }
               })
               .then(res => res.json())
               .then(data => {
                   Swal.fire({
                       iconHtml: `<img src="${ASSET_PATH}/success-circle.svg" class="img-fluid">`,
                       text: data.message,
                       confirmButtonText: "OK",
                       customClass: {
                           confirmButton: 'custom-ok-button-class w-sm'
                       }
                   }).then(() => {
                       location.reload(); // Refresh page
                   });
               });
           }
       });
   });
</script>
@endsection