@extends('Admin.layout.app')

@section('title','Product List')
@section('page-title','Product List')

@section('content')
<div class="card">
   <div class="card-header d-flex justify-content-between align-items-center">
       <h5 class="mb-0">Product List</h5>
       
   </div>

   <div class="card-body">
       <!-- Filter Form -->
       <form method="GET" class="row g-2 mb-3">
           <div class="col-md-5">
               <input type="text" name="search" class="form-control"
                  value="{{ request('search') }}" placeholder="Search">
           </div>
           <div class="col-md-4">
               <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>
       </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>Name</th>
                       <th>Urdu Name</th>
                       <th>Price</th>
                       <th>Category</th>
                       <th>Status</th>
                       <th class="text-end">Action</th>
                   </tr>
               </thead>
               <tbody>
                 @foreach($products as $product)
                    <tr>
                       <td><input type="checkbox" class="check-one" value="{{ $product->id }}"></td>
                       
                       <td>
                           <strong>{{ $product->name }} </strong><br>
                       </td>

                       <td>
                           <strong>{{ $product->name_urdu ?? ''}}</strong>
                       </td>

                       <td>Rs {{ number_format($product->price, 2) }}</td>
                       <td>
                           
                            @if($product->category == '1')
                                 <span class="badge bg-success">Food</span>

                           @else($product->category == '2')
                                 <span class="badge bg-danger">Cattring</span>

                           @endif
                       </td>

                       <td>
                           
                            @if($product->status == '1')
                                 <span class="badge bg-success">Active</span>

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

                           @endif
                       </td>

                       <td class="text-end">

                       @if(($product->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="{{ $product->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="{{ $product->id }}">
                              <i class="las la-check-circle"></i> Mark Active
                          </button>
                        
                        @endif
                        <a href="{{ route('admin.product.update', $product->id) }}" class="btn btn-sm btn-outline-warning rounded-pill px-3">
                             <i class="las la-eye"></i> Update
                         </a>
                      
                          <button
                              class="btn btn-sm btn-outline-danger rounded-pill px-3 btn-delete"
                              data-bs-toggle="modal"
                              data-bs-target="#deleteModal"
                              data-id="{{ $product->id }}">
                              <i class="las la-check-circle"></i> Delete
                          </button>
                          
                        </td>
                   </tr>

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

       <!-- Pagination -->
       <div class="mt-3">
         <div class="pagination-sm">
           {{ $products->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 Product Un-Active </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 Product as <strong>Un-Active</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, Un-Active
                    </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 Product Un-Active </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 Product as <strong>Active</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, Active
                    </button>
                </div>

            </form>

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

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

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

                <div class="modal-header">
                    <h5 class="modal-title">Mark Product Un-Active </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 Product as <strong>Active</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, Active
                    </button>
                </div>

            </form>

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

@endsection

@push('js')
<script>

$(function () {

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

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

        $('#unactiveForm').attr(
            'action',
            '/admin/product/' + id + '/unactive'
        );

    });

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

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

        $('#activeForm').attr(
            'action',
            '/admin/product/' + id + '/active'
        );

    });

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

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

        $('#deleteForm').attr(
            'action',
            '/admin/product/' + id + '/remove'
        );

    });

    
});
</script>
@endpush