@extends('layouts.admin')

@section('title', 'Diamond Gallery Overview')

@section('breadcrumbs', 'Gallery')

@section('css')
  <style>
    /* Gold & Dark Theme */
    .card-gallery {
        background: #1a1a1a;
        border-radius: 15px;
        border: 1px solid #333;
        color: #fff;
    }
    .nav-tabs .nav-link {
        color: #888;
        border: none;
        transition: 0.3s;
    }
    .nav-tabs .nav-link.active {
        background: transparent !important;
        color: #ffd700 !important;
        border-bottom: 2px solid #ffd700 !important;
        font-weight: bold;
    }
    .table-dark-wedding {
        background: #111;
        color: #eee;
    }
    .table-dark-wedding thead {
        background: linear-gradient(to right, #b8860b, #ffd700);
        color: #000;
        font-weight: bold;
    }
    .img-thumbnail-gallery {
        width: 100px;
        height: 70px;
        object-fit: cover;
        border-radius: 8px;
        border: 1px solid #ffd700;
        transition: 0.3s;
    }
    .img-thumbnail-gallery:hover {
        transform: scale(2.5);
        z-index: 100;
        position: relative;
    }
    .btn-create {
        background: #ffd700;
        color: #000;
        border-radius: 20px;
        font-weight: bold;
        transition: 0.3s;
    }
    .btn-create:hover {
        background: #fff;
        box-shadow: 0 0 15px rgba(255,215,0,0.5);
        color: #000;
    }
    .status-badge {
        font-size: 11px;
        padding: 3px 10px;
        border-radius: 10px;
        text-transform: uppercase;
    }
  </style>
@endsection

@section('content')
  <div class="row">
    <div class="col-md-12">
      <div class="card card-gallery">
      <div class="card-body">
          
          {{-- Header Section --}}
          <div class="d-flex justify-content-between align-items-center mb-5">
            <h4 class="font-weight-bold" style="color: #ffd700; font-family: 'Playfair Display', serif;">Lighting Project List</h4>
            {{-- Perbaikan: Memanggil route gallery.create tanpa parameter --}}
            <a href="{{ route('gallery.create') }}" class="btn btn-create"> 
                <i class="fa fa-plus"></i> Add New Project
            </a>
          </div>

          {{-- Filter & Search --}}
          <div class="row mb-4">
            <div class="col-sm-7">
              <ul class="nav nav-tabs border-0">
                  <li class="nav-item">
                      <a class="nav-link {{Request::get('status') == NULL ? 'active' : ''}}" href="{{route('gallery.index')}}">All Projects</a>
                  </li>
                  <li class="nav-item">
                      <a class="nav-link {{Request::get('status') == 'PUBLISH' ? 'active' : ''}}" href="{{route('gallery.index', ['status' => 'PUBLISH'])}}">Published</a>
                  </li>
                  <li class="nav-item">
                      <a class="nav-link {{Request::get('status') == 'DRAFT' ? 'active' : ''}}" href="{{route('gallery.index', ['status' => 'DRAFT'])}}">Drafts</a>
                  </li>
              </ul>
            </div>
            <div class="col-sm-5">
              <form action="{{route('gallery.index')}}">
                  <div class="input-group">
                      <input name="keyword" type="text" value="{{Request::get('keyword')}}" class="form-control bg-dark border-secondary text-white" placeholder="Search project name..." style="border-radius: 20px 0 0 20px;">
                      <div class="input-group-append">
                          <button type="submit" class="btn btn-warning" style="border-radius: 0 20px 20px 0;">Filter</button>
                      </div>
                  </div>
              </form>
            </div>
          </div>

          @if (session('success'))
              <div class="alert alert-warning border-0 text-dark" style="background: #ffd700; border-radius: 10px;">
                  <i class="fa fa-check-circle"></i> {{session('success')}}
                  <button type="button" class="close" data-dismiss="alert"><span>&times;</span></button>
              </div>
          @endif
          
          {{-- Table --}}
          <div class="table-responsive">
            <table class="table table-dark-wedding table-hover">
                <thead>
                    <tr>
                        <th width="120px">Preview</th>
                        <th>Project Details</th>
                        <th width="100px" class="text-center">Status</th>
                        <th width="120px" class="text-center">Action</th>
                    </tr>
                </thead>
                <tbody>
                    {{-- Perbaikan: Pastikan variabel sesuai dengan compact('galleries') di Controller --}}
                    @forelse ($galleries as $item)                           
                    <tr>
                        <td align="center">
                            @if($item->image)
                                <img src="{{$item->image}}" class="img-thumbnail-gallery" alt="Lighting">
                            @else
                                <span class="text-muted small">No Image</span>
                            @endif
                        </td>
                        <td>
                            <a href="{{route('gallery.edit', [$item->id])}}" style="color:#ffd700; font-weight: 500; text-decoration: none;">
                                <span class="d-block" style="font-size: 1.1rem;">{{$item->title}}</span>
                                <small class="text-muted">
                                    <i class="fa fa-calendar"></i> {{ $item->created_at ? $item->created_at->format('d M Y') : '-' }}
                                </small>
                            </a>
                        </td>
                        <td class="text-center">
                            @if ($item->status == 'DRAFT')
                                <span class="status-badge border border-danger text-danger">Draft</span>
                            @else
                                <span class="status-badge border border-success text-success">Active</span>
                            @endif
                        </td>
                        <td class="text-center">
                            <a href="{{route('gallery.edit', [$item->id])}}" class="btn btn-sm btn-outline-warning" title="Edit"><i class="fa fa-pencil"></i></a>
                            <button class="btn btn-sm btn-outline-danger" onclick="deleteConfirm('{{$item->id}}', '{{$item->title}}')"><i class="fa fa-trash"></i></button>
                        </td>
                    </tr>
                    @empty
                    <tr>
                        <td colspan="4" class="text-center text-muted p-4">No lighting projects found.</td>
                    </tr>
                    @endforelse
                </tbody>
            </table>
          </div>

          <div class="mt-4">
              {{-- Perbaikan: Variabel harus $galleries --}}
              {{$galleries->appends(Request::all())->links()}}
          </div>
        </div>
      </div>
    </div>
  </div>

  {{-- Modal Delete --}}
  <div class="modal fade" id="modalDelete" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered">
      <div class="modal-content" style="background: #111; border: 1px solid #f44336; border-radius: 15px;">
        <div class="modal-header border-0">
          <h5 class="modal-title text-danger">Confirm Deletion</h5>
          <button type="button" class="close text-white" data-dismiss="modal"><span>&times;</span></button>
        </div>
        <div class="modal-body text-white text-center">
            <i class="fa fa-exclamation-triangle fa-3x text-danger mb-3"></i>
            <p id="message"></p>
        </div>
        <div class="modal-footer border-0 justify-content-center">
          <button type="button" class="btn btn-secondary px-4" style="border-radius: 20px;" data-dismiss="modal">Cancel</button>
          <form action="" id="urlDelete" method="POST" class="d-inline">
            @csrf @method('DELETE')
            <button type="submit" class="btn btn-danger px-4" style="border-radius: 20px;">Delete Forever</button>
          </form>
        </div>
      </div>
    </div>
  </div>
@endsection

@section('script')
  <script>
    function deleteConfirm(id, name){ 
      // Mengarahkan ke route gallery.destroy
      var url = '{{ route("gallery.destroy", ":id") }}';    
      url = url.replace(':id', id);
      document.getElementById("urlDelete").setAttribute("action", url);
      document.getElementById('message').innerHTML = "Are you sure you want to remove <b>" + name + "</b> project from the gallery?"
      $('#modalDelete').modal('show');
    }
  </script>
@endsection