@extends('layouts.app')

@section('title', 'Layanan Jasa')

@section('content')
<div class="container-fluid">
    <!-- Header -->
    <div class="d-flex justify-content-between align-items-center mb-4">
        <div>
            <h1 class="h2 mb-1">Layanan Jasa</h1>
            <p class="text-muted mb-0">Kelola layanan jasa yang tersedia</p>
        </div>
        <div class="d-flex gap-2">
            <a href="{{ route('layanan-jasa.export') }}" class="btn btn-outline-success">
                <i class="fas fa-download"></i> Export
            </a>
            <a href="{{ route('layanan-jasa.create') }}" class="btn btn-primary">
                <i class="fas fa-plus"></i> Tambah Layanan
            </a>
        </div>
    </div>

    <!-- Filters -->
    <div class="card border-0 shadow-sm mb-4">
        <div class="card-header bg-white border-bottom">
            <h6 class="card-title mb-0">
                <i class="fas fa-filter me-2"></i>Filter & Pencarian
            </h6>
        </div>
        <div class="card-body">
            <form method="GET" action="{{ route('layanan-jasa.index') }}" id="filterForm">
                <div class="row">
                    <div class="col-md-3 mb-3">
                        <label for="search" class="form-label">Pencarian</label>
                        <input type="text" name="search" id="search" class="form-control" 
                               value="{{ request('search') }}" placeholder="Nama layanan, kode, kategori...">
                    </div>
                    <div class="col-md-2 mb-3">
                        <label for="status" class="form-label">Status</label>
                        <select name="status" id="status" class="form-select">
                            <option value="">Semua Status</option>
                            @foreach($statuses as $status)
                                <option value="{{ $status }}" {{ request('status') == $status ? 'selected' : '' }}>
                                    {{ ucfirst(str_replace('_', ' ', $status)) }}
                                </option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-md-2 mb-3">
                        <label for="kategori" class="form-label">Kategori</label>
                        <select name="kategori" id="kategori" class="form-select">
                            <option value="">Semua Kategori</option>
                            @foreach($kategoris as $kategori)
                                <option value="{{ $kategori }}" {{ request('kategori') == $kategori ? 'selected' : '' }}>
                                    {{ ucfirst($kategori) }}
                                </option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-md-2 mb-3">
                        <label for="tipe_layanan" class="form-label">Tipe Layanan</label>
                        <select name="tipe_layanan" id="tipe_layanan" class="form-select">
                            <option value="">Semua Tipe</option>
                            @foreach($tipeLayanans as $tipe)
                                <option value="{{ $tipe }}" {{ request('tipe_layanan') == $tipe ? 'selected' : '' }}>
                                    @switch($tipe)
                                        @case('one_time')
                                            Sekali Pakai
                                            @break
                                        @case('recurring')
                                            Berulang
                                            @break
                                        @case('subscription')
                                            Berlangganan
                                            @break
                                    @endswitch
                                </option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-md-2 mb-3">
                        <label for="tersedia" class="form-label">Ketersediaan</label>
                        <select name="tersedia" id="tersedia" class="form-select">
                            <option value="">Semua</option>
                            <option value="1" {{ request('tersedia') == '1' ? 'selected' : '' }}>Tersedia</option>
                            <option value="0" {{ request('tersedia') == '0' ? 'selected' : '' }}>Tidak Tersedia</option>
                        </select>
                    </div>
                    <div class="col-md-1 mb-3">
                        <label for="featured" class="form-label">Featured</label>
                        <select name="featured" id="featured" class="form-select">
                            <option value="">Semua</option>
                            <option value="1" {{ request('featured') == '1' ? 'selected' : '' }}>Ya</option>
                            <option value="0" {{ request('featured') == '0' ? 'selected' : '' }}>Tidak</option>
                        </select>
                    </div>
                </div>
                <div class="d-flex gap-2">
                    <button type="submit" class="btn btn-primary btn-sm">
                        <i class="fas fa-search"></i> Filter
                    </button>
                    <a href="{{ route('layanan-jasa.index') }}" class="btn btn-outline-secondary btn-sm">
                        <i class="fas fa-times"></i> Reset
                    </a>
                </div>
            </form>
        </div>
    </div>

    <!-- Statistics Cards -->
    <div class="row mb-4">
        <div class="col-md-3">
            <div class="card border-0 shadow-sm stat-card-primary">
                <div class="card-body d-flex align-items-center">
                    <div class="stat-icon">
                        <i class="fas fa-tools"></i>
                    </div>
                    <div class="ms-3">
                        <div class="stat-number">{{ $layananJasa->total() }}</div>
                        <div class="stat-label">Total Layanan</div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card border-0 shadow-sm stat-card-success">
                <div class="card-body d-flex align-items-center">
                    <div class="stat-icon">
                        <i class="fas fa-check-circle"></i>
                    </div>
                    <div class="ms-3">
                        <div class="stat-number">{{ $layananJasa->where('status', 'aktif')->count() }}</div>
                        <div class="stat-label">Aktif</div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card border-0 shadow-sm stat-card-warning">
                <div class="card-body d-flex align-items-center">
                    <div class="stat-icon">
                        <i class="fas fa-star"></i>
                    </div>
                    <div class="ms-3">
                        <div class="stat-number">{{ $layananJasa->where('is_featured', true)->count() }}</div>
                        <div class="stat-label">Featured</div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card border-0 shadow-sm stat-card-info">
                <div class="card-body d-flex align-items-center">
                    <div class="stat-icon">
                        <i class="fas fa-chart-line"></i>
                    </div>
                    <div class="ms-3">
                        <div class="stat-number">{{ $layananJasa->where('tersedia', true)->count() }}</div>
                        <div class="stat-label">Tersedia</div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Table -->
    <div class="card border-0 shadow-sm">
        <div class="card-header bg-white border-bottom">
            <div class="d-flex justify-content-between align-items-center">
                <h6 class="card-title mb-0">
                    <i class="fas fa-list me-2"></i>Daftar Layanan Jasa
                </h6>
                <div class="d-flex align-items-center gap-2">
                    <small class="text-muted">
                        Menampilkan {{ $layananJasa->firstItem() ?? 0 }} - {{ $layananJasa->lastItem() ?? 0 }} 
                        dari {{ $layananJasa->total() }} layanan
                    </small>
                    <div class="dropdown">
                        <button class="btn btn-outline-secondary btn-sm dropdown-toggle" type="button" data-bs-toggle="dropdown">
                            <i class="fas fa-sort"></i> Urutkan
                        </button>
                        <ul class="dropdown-menu">
                            <li><a class="dropdown-item" href="{{ request()->fullUrlWithQuery(['sort_by' => 'nama_layanan', 'sort_direction' => 'asc']) }}">Nama A-Z</a></li>
                            <li><a class="dropdown-item" href="{{ request()->fullUrlWithQuery(['sort_by' => 'nama_layanan', 'sort_direction' => 'desc']) }}">Nama Z-A</a></li>
                            <li><a class="dropdown-item" href="{{ request()->fullUrlWithQuery(['sort_by' => 'harga_dasar', 'sort_direction' => 'asc']) }}">Harga Terendah</a></li>
                            <li><a class="dropdown-item" href="{{ request()->fullUrlWithQuery(['sort_by' => 'harga_dasar', 'sort_direction' => 'desc']) }}">Harga Tertinggi</a></li>
                            <li><a class="dropdown-item" href="{{ request()->fullUrlWithQuery(['sort_by' => 'rating_rata', 'sort_direction' => 'desc']) }}">Rating Tertinggi</a></li>
                            <li><a class="dropdown-item" href="{{ request()->fullUrlWithQuery(['sort_by' => 'created_at', 'sort_direction' => 'desc']) }}">Terbaru</a></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
        <div class="card-body p-0">
            @if($layananJasa->count() > 0)
                <div class="table-responsive">
                    <table class="table table-hover mb-0">
                        <thead class="table-light">
                            <tr>
                                <th style="width: 5%;">#</th>
                                <th style="width: 8%;">Gambar</th>
                                <th style="width: 20%;">Layanan</th>
                                <th style="width: 12%;">Kategori</th>
                                <th style="width: 10%;">Harga</th>
                                <th style="width: 8%;">Rating</th>
                                <th style="width: 8%;">Status</th>
                                <th style="width: 10%;">Ketersediaan</th>
                                <th style="width: 8%;">Featured</th>
                                <th style="width: 11%;">Aksi</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($layananJasa as $index => $layanan)
                                <tr>
                                    <td>{{ $layananJasa->firstItem() + $index }}</td>
                                    <td>
                                        @if($layanan->gambar_layanan)
                                            <img src="{{ asset("storage/" . $layanan->gambar_layanan) }}" 
                                                 alt="{{ $layanan->nama_layanan }}" 
                                                 class="img-thumbnail" 
                                                 style="width: 50px; height: 50px; object-fit: cover;">
                                        @else
                                            <div class="d-flex align-items-center justify-content-center bg-light rounded" 
                                                 style="width: 50px; height: 50px;">
                                                <i class="fas fa-tools text-muted"></i>
                                            </div>
                                        @endif
                                    </td>
                                    <td>
                                        <div>
                                            <h6 class="mb-1 fw-bold">{{ $layanan->nama_layanan }}</h6>
                                            <small class="text-muted">{{ $layanan->kode_layanan }}</small>
                                            @if($layanan->tipe_layanan)
                                                <br>{!! $layanan->tipe_layanan_badge !!}
                                            @endif
                                        </div>
                                    </td>
                                    <td>
                                        <span class="badge bg-secondary">{{ ucfirst($layanan->kategori) }}</span>
                                    </td>
                                    <td>
                                        <div>
                                            @if($layanan->is_promo)
                                                <div class="text-decoration-line-through text-muted small">
                                                    {{ $layanan->harga_dasar_format }}
                                                </div>
                                                <div class="fw-bold text-success">
                                                    {{ $layanan->harga_promo_format }}
                                                    <span class="badge bg-danger small">-{{ $layanan->diskon_persen }}%</span>
                                                </div>
                                            @else
                                                <div class="fw-bold">{{ $layanan->harga_format }}</div>
                                            @endif
                                            <small class="text-muted">per {{ $layanan->satuan_harga }}</small>
                                        </div>
                                    </td>
                                    <td>
                                        <div class="d-flex align-items-center">
                                            <span class="badge bg-warning text-dark me-1">{{ $layanan->rating_rata }}</span>
                                            <i class="fas fa-star text-warning small"></i>
                                            @if($layanan->jumlah_rating > 0)
                                                <small class="text-muted ms-1">({{ $layanan->jumlah_rating }})</small>
                                            @endif
                                        </div>
                                    </td>
                                    <td>{!! $layanan->status_badge !!}</td>
                                    <td>{!! $layanan->ketersediaan_badge !!}</td>
                                    <td>
                                        @if($layanan->is_featured)
                                            <span class="badge bg-warning text-dark">
                                                <i class="fas fa-star"></i> Featured
                                            </span>
                                        @else
                                            <span class="badge bg-light text-dark">Normal</span>
                                        @endif
                                    </td>
                                    <td>
                                        <div class="dropdown">
                                            <button class="btn btn-outline-secondary btn-sm dropdown-toggle" 
                                                    type="button" data-bs-toggle="dropdown">
                                                <i class="fas fa-ellipsis-v"></i>
                                            </button>
                                            <ul class="dropdown-menu">
                                                <li>
                                                    <a class="dropdown-item" href="{{ route('layanan-jasa.show', $layanan) }}">
                                                        <i class="fas fa-eye text-info"></i> Detail
                                                    </a>
                                                </li>
                                                <li>
                                                    <a class="dropdown-item" href="{{ route('layanan-jasa.edit', $layanan) }}">
                                                        <i class="fas fa-edit text-warning"></i> Edit
                                                    </a>
                                                </li>
                                                <li><hr class="dropdown-divider"></li>
                                                <li>
                                                    <form action="{{ route('layanan-jasa.toggle-status', $layanan) }}" method="POST" class="d-inline">
                                                        @csrf
                                                        <button type="submit" class="dropdown-item">
                                                            <i class="fas fa-power-off text-{{ $layanan->status === 'aktif' ? 'danger' : 'success' }}"></i>
                                                            {{ $layanan->status === 'aktif' ? 'Non-aktifkan' : 'Aktifkan' }}
                                                        </button>
                                                    </form>
                                                </li>
                                                <li>
                                                    <form action="{{ route('layanan-jasa.toggle-featured', $layanan) }}" method="POST" class="d-inline">
                                                        @csrf
                                                        <button type="submit" class="dropdown-item">
                                                            <i class="fas fa-star text-warning"></i>
                                                            {{ $layanan->is_featured ? 'Unfeature' : 'Feature' }}
                                                        </button>
                                                    </form>
                                                </li>
                                                <li>
                                                    <form action="{{ route('layanan-jasa.duplicate', $layanan) }}" method="POST" class="d-inline">
                                                        @csrf
                                                        <button type="submit" class="dropdown-item">
                                                            <i class="fas fa-copy text-info"></i> Duplikasi
                                                        </button>
                                                    </form>
                                                </li>
                                                <li><hr class="dropdown-divider"></li>
                                                <li>
                                                    <form action="{{ route('layanan-jasa.destroy', $layanan) }}" method="POST" 
                                                          class="d-inline" onsubmit="return confirm('Yakin ingin menghapus layanan ini?')">
                                                        @csrf
                                                        @method('DELETE')
                                                        <button type="submit" class="dropdown-item text-danger">
                                                            <i class="fas fa-trash"></i> Hapus
                                                        </button>
                                                    </form>
                                                </li>
                                            </ul>
                                        </div>
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>

                <!-- Pagination -->
                @if($layananJasa->hasPages())
                    <div class="card-footer bg-white border-top">
                        {{ $layananJasa->links() }}
                    </div>
                @endif
            @else
                <div class="text-center py-5">
                    <i class="fas fa-tools fa-3x text-muted mb-3"></i>
                    <h5 class="text-muted">Belum Ada Layanan Jasa</h5>
                    <p class="text-muted mb-4">Mulai tambahkan layanan jasa pertama Anda</p>
                    <a href="{{ route('layanan-jasa.create') }}" class="btn btn-primary">
                        <i class="fas fa-plus"></i> Tambah Layanan Pertama
                    </a>
                </div>
            @endif
        </div>
    </div>
</div>

@push('scripts')
<script>
$(document).ready(function() {
    // Auto submit filter form when dropdown changes
    $('#status, #kategori, #tipe_layanan, #tersedia, #featured').change(function() {
        $('#filterForm').submit();
    });
    
    // Search with delay
    let searchTimeout;
    $('#search').on('input', function() {
        clearTimeout(searchTimeout);
        searchTimeout = setTimeout(function() {
            $('#filterForm').submit();
        }, 500);
    });
});
</script>
@endpush
@endsection