@extends('Admin.layout.app')

@section('title', 'Gallery')

@section('page-title', 'Gallery')

@section('content')


<div class="card">
   <div class="card-header d-flex justify-content-between align-items-center">
       <h5 class="mb-0">Gallery List</h5>
       
   </div>

   <div class="card-body">
       <!-- Filter Form -->
       <form method="GET" class="row g-2 mb-3">
           <div class="col-md-4">
               <input type="text" name="search" class="form-control"
                  value="{{ request('search') }}" placeholder="Search">
           </div>
           <div class="col-md-3">
               <select name="status" class="form-control">
                 <option value="">Status</option>
              
                 <option value="1" {{ request('status')=='1' ? 'selected' : '' }}>
                     Active
                 </option>
              
                 <option value="0" {{ request('status')=='0' ? 'selected' : '' }}>
                     Un-Active
                 </option>
              
                 
               </select>
           </div>
           <div class="col-md-3">
               <button class="btn btn-secondary w-100">Filter</button>
           </div>
           
            <div class="col-md-2">
                <button type="button" class="btn btn-success" onclick="window.location='{{ route('admin.gallery.new') }}'">
                    <i class="fas fa-user-plus me-1"></i>
                    Add New
                </button>
            </div>
       </form>

       <!-- Products Table -->
       <div class="table-responsive">
           <table class="table table-bordered align-middle">
               <thead class="table-light">
                   <tr>
                       <th width="30"><input type="checkbox" class="check-all"></th>
                       <th>Image</th>
                       <th>Title</th>
                       <th>Category</th>
                       <th>Status</th>
                       <th>Date</th>
                       <th class="text-end">Action</th>
                   </tr>
               </thead>
               <tbody>
                 @foreach($gallery as $galley_img)
                    <tr>
                       <td><input type="checkbox" class="check-one" value="{{ $galley_img->id }}"></td>
                       
                       <td>
                          
                           <img src="{{ $galley_img->image ? asset($galley_img->image) : asset('default-product.png') }}"
                               alt="{{ $galley_img->title }}" class="img-fluid" style="max-width:100px; max-height:80px; object-fit:cover;">
                      
                       </td>
                       
                       <td>
                           <strong>{{ $galley_img->title }} </strong><br>
                       </td>

                       

                       <td> <strong> {{ $galley_img->category ?? '' }} </strong></td>
                       
                        <td>
                            @if($galley_img->status == '1')
                                 <span class="badge bg-success">Active</span>

                           @else($galley_img->status == '2')
                                 <span class="badge bg-danger">Un-Active</span>

                           @endif
                       </td>
                       
                       <td>
                            <strong>{{  \Carbon\Carbon::parse($galley_img->created_at)->format('d M Y h:i A') }}</strong>
                       </td>

                     

                       <td class="text-end">

                       @if(($galley_img->status == '1'))
                          <button
                              class="btn btn-sm btn-outline-info rounded-pill px-3 btn-UnActive"
                              data-bs-toggle="modal"
                              data-bs-target="#unactiveModal"
                              data-id="{{ $galley_img->id }}">
                              <i class="las la-times-circle"></i> Mark Un-Active
                          </button>
                       @else
                          <button
                              class="btn btn-sm btn-outline-success rounded-pill px-3 btn-Active"
                              data-bs-toggle="modal"
                              data-bs-target="#activeModal"
                              data-id="{{ $galley_img->id }}">
                              <i class="las la-check-circle"></i> Mark Active
                          </button>
                       @endif
                        <a href="{{ route('admin.gallery.update', $galley_img->id) }}" class="btn btn-sm btn-outline-warning rounded-pill px-3">
                             <i class="las la-eye"></i> Update
                         </a>
                          
                        </td>
                   </tr>

                  @endforeach
                 
               </tbody>
           </table>
       </div>

       <!-- Pagination -->
       <div class="mt-3">
         <div class="pagination-sm">
           {{ $gallery->links() }}
         </div>
       </div>
   </div>
</div>

<div class="modal fade" id="unactiveModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">

            <form id="unactiveForm" method="POST">
                @csrf
                @method('PUT')

                <div class="modal-header">
                    <h5 class="modal-title">Mark Image Not Publish </h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>

                <div class="modal-body">
                    Are you sure you want to Mark this Gallery Image <strong>Not Publish</strong>?
                </div>

                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary"
                        data-bs-dismiss="modal">Cancel</button>

                    <button type="submit" class="btn btn-info">
                        Yes, Not Publish
                    </button>
                </div>

            </form>

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

<div class="modal fade" id="activeModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">

            <form id="activeForm" method="POST">
                @csrf
                @method('PUT')

                <div class="modal-header">
                    <h5 class="modal-title">Mark Image Publish </h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>

                <div class="modal-body">
                    Are you sure you want to Mark this Gallery Image  <strong>Publish</strong>?
                </div>

                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary"
                        data-bs-dismiss="modal">Cancel</button>

                    <button type="submit" class="btn btn-info">
                        Yes, Publish
                    </button>
                </div>

            </form>

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

@endsection


@push('js')
<script>

$(function () {

    $('.btn-UnActive').click(function () {

        let id = $(this).data('id');

        $('#unactiveForm').attr(
            'action',
            '/admin/gallery/' + id + '/un-publish'
        );

    });

    $('.btn-Active').click(function () {

        let id = $(this).data('id');

        $('#activeForm').attr(
            'action',
            '/admin/gallery/' + id + '/publish'
        );

    });

    
    
});
</script>
@endpush