@extends('layouts.app')

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

@section('content')
<div class="container-fluid">
    <div class="row">
        <div class="col-12">
            <!-- Header -->
            <div class="card border-0 shadow-sm mb-4">
                <div class="card-header bg-primary text-white">
                    <div class="d-flex justify-content-between align-items-center">
                        <div>
                            <h4 class="mb-1"><i class="fas fa-tools"></i> {{ $layananJasa->nama_layanan }}</h4>
                            <p class="mb-0 opacity-75">{{ $layananJasa->kode_layanan ?? 'Kode: Otomatis' }}</p>
                        </div>
                        <div class="btn-group">
                            <a href="{{ route('layanan-jasa.index') }}" class="btn btn-light">
                                <i class="fas fa-arrow-left"></i> Kembali
                            </a>
                            <a href="{{ route('layanan-jasa.edit', $layananJasa->id) }}" class="btn btn-warning">
                                <i class="fas fa-edit"></i> Edit
                            </a>
                            <div class="dropdown">
                                <button class="btn btn-light dropdown-toggle" type="button" data-bs-toggle="dropdown">
                                    <i class="fas fa-cog"></i> Aksi
                                </button>
                                <ul class="dropdown-menu">
                                    <li>
                                        <form action="{{ route('layanan-jasa.toggle-status', $layananJasa->id) }}" method="POST" class="d-inline">
                                            @csrf
                                            <button type="submit" class="dropdown-item">
                                                <i class="fas fa-toggle-{{ $layananJasa->status === 'aktif' ? 'off' : 'on' }}"></i>
                                                {{ $layananJasa->status === 'aktif' ? 'Non-aktifkan' : 'Aktifkan' }}
                                            </button>
                                        </form>
                                    </li>
                                    <li>
                                        <form action="{{ route('layanan-jasa.toggle-featured', $layananJasa->id) }}" method="POST" class="d-inline">
                                            @csrf
                                            <button type="submit" class="dropdown-item">
                                                <i class="fas fa-star"></i>
                                                {{ $layananJasa->is_featured ? 'Hapus dari Featured' : 'Jadikan Featured' }}
                                            </button>
                                        </form>
                                    </li>
                                    <li><hr class="dropdown-divider"></li>
                                    <li>
                                        <a href="{{ route('layanan-jasa.duplicate', $layananJasa->id) }}" class="dropdown-item">
                                            <i class="fas fa-copy"></i> Duplikasi
                                        </a>
                                    </li>
                                    <li>
                                        <form action="{{ route('layanan-jasa.destroy', $layananJasa->id) }}" method="POST" 
                                              onsubmit="return confirm('Yakin ingin menghapus layanan ini?')" class="d-inline">
                                            @csrf
                                            @method('DELETE')
                                            <button type="submit" class="dropdown-item text-danger">
                                                <i class="fas fa-trash"></i> Hapus
                                            </button>
                                        </form>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="row">
                <!-- Main Content -->
                <div class="col-lg-8">
                    <!-- Informasi Dasar -->
                    <div class="card border-0 shadow-sm mb-4">
                        <div class="card-header bg-white border-bottom">
                            <h5 class="mb-0"><i class="fas fa-info-circle text-primary"></i> Informasi Dasar</h5>
                        </div>
                        <div class="card-body">
                            <div class="row">
                                <div class="col-md-6">
                                    <table class="table table-borderless">
                                        <tr>
                                            <td width="40%" class="text-muted">Nama Layanan:</td>
                                            <td><strong>{{ $layananJasa->nama_layanan }}</strong></td>
                                        </tr>
                                        <tr>
                                            <td class="text-muted">Kategori:</td>
                                            <td>
                                                <span class="badge bg-secondary">{{ ucfirst($layananJasa->kategori) }}</span>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td class="text-muted">Tipe Layanan:</td>
                                            <td>
                                                @switch($layananJasa->tipe_layanan)
                                                    @case('one_time')
                                                        <span class="badge bg-info">Sekali Pakai</span>
                                                        @break
                                                    @case('recurring')
                                                        <span class="badge bg-warning">Berulang</span>
                                                        @break
                                                    @case('subscription')
                                                        <span class="badge bg-success">Berlangganan</span>
                                                        @break
                                                @endswitch
                                            </td>
                                        </tr>
                                        <tr>
                                            <td class="text-muted">Status:</td>
                                            <td>
                                                @switch($layananJasa->status)
                                                    @case('aktif')
                                                        <span class="badge bg-success">Aktif</span>
                                                        @break
                                                    @case('non_aktif')
                                                        <span class="badge bg-danger">Non Aktif</span>
                                                        @break
                                                    @case('draft')
                                                        <span class="badge bg-secondary">Draft</span>
                                                        @break
                                                @endswitch
                                            </td>
                                        </tr>
                                    </table>
                                </div>
                                <div class="col-md-6">
                                    <table class="table table-borderless">
                                        <tr>
                                            <td width="40%" class="text-muted">Ketersediaan:</td>
                                            <td>
                                                @if($layananJasa->tersedia)
                                                    <span class="badge bg-success"><i class="fas fa-check"></i> Tersedia</span>
                                                @else
                                                    <span class="badge bg-danger"><i class="fas fa-times"></i> Tidak Tersedia</span>
                                                @endif
                                            </td>
                                        </tr>
                                        <tr>
                                            <td class="text-muted">Featured:</td>
                                            <td>
                                                @if($layananJasa->is_featured)
                                                    <span class="badge bg-warning"><i class="fas fa-star"></i> Ya</span>
                                                @else
                                                    <span class="badge bg-light text-dark">Tidak</span>
                                                @endif
                                            </td>
                                        </tr>
                                        <tr>
                                            <td class="text-muted">Lead Time:</td>
                                            <td><strong>{{ $layananJasa->lead_time_hari }} hari</strong></td>
                                        </tr>
                                        @if($layananJasa->kapasitas_maksimal)
                                        <tr>
                                            <td class="text-muted">Kapasitas Maks:</td>
                                            <td><strong>{{ $layananJasa->kapasitas_maksimal }} unit</strong></td>
                                        </tr>
                                        @endif
                                    </table>
                                </div>
                            </div>

                            @if($layananJasa->deskripsi)
                            <div class="mt-3">
                                <h6 class="text-muted mb-2">Deskripsi:</h6>
                                <p class="mb-0">{{ $layananJasa->deskripsi }}</p>
                            </div>
                            @endif
                        </div>
                    </div>

                    <!-- Harga & Durasi -->
                    <div class="card border-0 shadow-sm mb-4">
                        <div class="card-header bg-white border-bottom">
                            <h5 class="mb-0"><i class="fas fa-dollar-sign text-success"></i> Harga & Durasi</h5>
                        </div>
                        <div class="card-body">
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="pricing-card">
                                        <h6 class="text-muted mb-2">Harga Dasar</h6>
                                        <h3 class="text-success mb-0">Rp {{ number_format($layananJasa->harga_dasar, 0, ',', '.') }}</h3>
                                        <small class="text-muted">{{ ucfirst(str_replace('_', ' ', $layananJasa->satuan_harga)) }}</small>
                                    </div>
                                </div>
                                @if($layananJasa->harga_promo)
                                <div class="col-md-6">
                                    <div class="pricing-card">
                                        <h6 class="text-muted mb-2">Harga Promo</h6>
                                        <h3 class="text-warning mb-0">Rp {{ number_format($layananJasa->harga_promo, 0, ',', '.') }}</h3>
                                        <small class="text-success">
                                            Hemat {{ number_format((($layananJasa->harga_dasar - $layananJasa->harga_promo) / $layananJasa->harga_dasar) * 100, 1) }}%
                                        </small>
                                    </div>
                                </div>
                                @endif
                            </div>

                            @if($layananJasa->durasi_estimasi)
                            <div class="row mt-3">
                                <div class="col-md-6">
                                    <h6 class="text-muted mb-2">Durasi Estimasi</h6>
                                    <p class="mb-0"><strong>{{ $layananJasa->durasi_estimasi }} {{ $layananJasa->durasi_satuan }}</strong></p>
                                </div>
                            </div>
                            @endif
                        </div>
                    </div>

                    <!-- Media & Galeri -->
                    @if($layananJasa->gambar_layanan || ($layananJasa->galeri_gambar && count($layananJasa->galeri_gambar) > 0))
                    <div class="card border-0 shadow-sm mb-4">
                        <div class="card-header bg-white border-bottom">
                            <h5 class="mb-0"><i class="fas fa-images text-info"></i> Media & Galeri</h5>
                        </div>
                        <div class="card-body">
                            @if($layananJasa->gambar_layanan)
                            <div class="mb-3">
                                <h6 class="text-muted mb-2">Gambar Utama</h6>
                                <div class="text-center">
                                    <img src="{{ asset('storage/' . $layananJasa->gambar_layanan) }}" 
                                         alt="{{ $layananJasa->nama_layanan }}" 
                                         class="img-fluid rounded shadow" 
                                         style="max-height: 300px; cursor: pointer;"
                                         data-bs-toggle="modal" 
                                         data-bs-target="#imageModal"
                                         data-image="{{ asset('storage/' . $layananJasa->gambar_layanan) }}">
                                </div>
                            </div>
                            @endif

                            @if($layananJasa->galeri_gambar && count($layananJasa->galeri_gambar) > 0)
                            <div class="mb-3">
                                <h6 class="text-muted mb-2">Galeri ({{ count($layananJasa->galeri_gambar) }} gambar)</h6>
                                <div class="row">
                                    @foreach($layananJasa->galeri_gambar as $index => $gambar)
                                    <div class="col-md-3 mb-2">
                                        <img src="{{ asset('storage/' . $gambar) }}" 
                                             alt="Gallery {{ $index + 1 }}" 
                                             class="img-fluid rounded shadow-sm" 
                                             style="height: 120px; object-fit: cover; cursor: pointer;"
                                             data-bs-toggle="modal" 
                                             data-bs-target="#imageModal"
                                             data-image="{{ asset('storage/' . $gambar) }}">
                                    </div>
                                    @endforeach
                                </div>
                            </div>
                            @endif
                        </div>
                    </div>
                    @endif

                    <!-- Detail Teknis -->
                    @if($layananJasa->persyaratan || $layananJasa->spesifikasi_teknis || $layananJasa->peralatan_dibutuhkan || $layananJasa->catatan_khusus)
                    <div class="card border-0 shadow-sm mb-4">
                        <div class="card-header bg-white border-bottom">
                            <h5 class="mb-0"><i class="fas fa-cogs text-warning"></i> Detail Teknis</h5>
                        </div>
                        <div class="card-body">
                            <div class="row">
                                @if($layananJasa->persyaratan && count($layananJasa->persyaratan) > 0)
                                <div class="col-md-6 mb-3">
                                    <h6 class="text-muted mb-2">Persyaratan</h6>
                                    <ul class="list-unstyled">
                                        @foreach($layananJasa->persyaratan as $persyaratan)
                                        <li><i class="fas fa-check text-success me-2"></i>{{ $persyaratan }}</li>
                                        @endforeach
                                    </ul>
                                </div>
                                @endif

                                @if($layananJasa->spesifikasi_teknis && count($layananJasa->spesifikasi_teknis) > 0)
                                <div class="col-md-6 mb-3">
                                    <h6 class="text-muted mb-2">Spesifikasi Teknis</h6>
                                    <ul class="list-unstyled">
                                        @foreach($layananJasa->spesifikasi_teknis as $spek)
                                        <li><i class="fas fa-cog text-primary me-2"></i>{{ $spek }}</li>
                                        @endforeach
                                    </ul>
                                </div>
                                @endif

                                @if($layananJasa->peralatan_dibutuhkan && count($layananJasa->peralatan_dibutuhkan) > 0)
                                <div class="col-md-6 mb-3">
                                    <h6 class="text-muted mb-2">Peralatan Dibutuhkan</h6>
                                    <ul class="list-unstyled">
                                        @foreach($layananJasa->peralatan_dibutuhkan as $alat)
                                        <li><i class="fas fa-tools text-warning me-2"></i>{{ $alat }}</li>
                                        @endforeach
                                    </ul>
                                </div>
                                @endif

                                @if($layananJasa->catatan_khusus)
                                <div class="col-12">
                                    <h6 class="text-muted mb-2">Catatan Khusus</h6>
                                    <div class="alert alert-info">
                                        <i class="fas fa-info-circle me-2"></i>{{ $layananJasa->catatan_khusus }}
                                    </div>
                                </div>
                                @endif
                            </div>
                        </div>
                    </div>
                    @endif
                </div>

                <!-- Sidebar -->
                <div class="col-lg-4">
                    <!-- Status Card -->
                    <div class="card border-0 shadow-sm mb-4">
                        <div class="card-header bg-white border-bottom">
                            <h6 class="mb-0"><i class="fas fa-chart-line text-success"></i> Status & Statistik</h6>
                        </div>
                        <div class="card-body">
                            <div class="row text-center">
                                <div class="col-6 mb-3">
                                    <div class="stat-item">
                                        <h4 class="text-primary mb-1">{{ $layananJasa->rating_rata ?? '0.0' }}</h4>
                                        <small class="text-muted">Rating</small>
                                        <div class="mt-1">
                                            @for($i = 1; $i <= 5; $i++)
                                                @if($i <= ($layananJasa->rating_rata ?? 0))
                                                    <i class="fas fa-star text-warning"></i>
                                                @else
                                                    <i class="far fa-star text-muted"></i>
                                                @endif
                                            @endfor
                                        </div>
                                    </div>
                                </div>
                                <div class="col-6 mb-3">
                                    <div class="stat-item">
                                        <h4 class="text-info mb-1">{{ $layananJasa->total_pesanan ?? 0 }}</h4>
                                        <small class="text-muted">Total Pesanan</small>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Pengaturan Lanjutan -->
                    <div class="card border-0 shadow-sm mb-4">
                        <div class="card-header bg-white border-bottom">
                            <h6 class="mb-0"><i class="fas fa-sliders-h text-info"></i> Pengaturan Lanjutan</h6>
                        </div>
                        <div class="card-body">
                            <table class="table table-borderless table-sm">
                                @if($layananJasa->area_layanan && count($layananJasa->area_layanan) > 0)
                                <tr>
                                    <td class="text-muted">Area Layanan:</td>
                                    <td>
                                        @foreach($layananJasa->area_layanan as $area)
                                            <span class="badge bg-light text-dark me-1">{{ $area }}</span>
                                        @endforeach
                                    </td>
                                </tr>
                                @endif
                                
                                <tr>
                                    <td class="text-muted">Luar Kota:</td>
                                    <td>
                                        @if($layananJasa->layanan_luar_kota)
                                            <span class="badge bg-success">Ya</span>
                                            @if($layananJasa->biaya_transport_luar_kota)
                                                <br><small class="text-muted">+Rp {{ number_format($layananJasa->biaya_transport_luar_kota, 0, ',', '.') }}</small>
                                            @endif
                                        @else
                                            <span class="badge bg-secondary">Tidak</span>
                                        @endif
                                    </td>
                                </tr>
                                
                                <tr>
                                    <td class="text-muted">Emergency:</td>
                                    <td>
                                        @if($layananJasa->layanan_emergency)
                                            <span class="badge bg-danger">Ya</span>
                                            @if($layananJasa->biaya_emergency)
                                                <br><small class="text-muted">+Rp {{ number_format($layananJasa->biaya_emergency, 0, ',', '.') }}</small>
                                            @endif
                                        @else
                                            <span class="badge bg-secondary">Tidak</span>
                                        @endif
                                    </td>
                                </tr>
                                
                                @if($layananJasa->masa_garansi_hari)
                                <tr>
                                    <td class="text-muted">Garansi:</td>
                                    <td><strong>{{ $layananJasa->masa_garansi_hari }} hari</strong></td>
                                </tr>
                                @endif
                                
                                <tr>
                                    <td class="text-muted">Maintenance:</td>
                                    <td>
                                        @if($layananJasa->include_maintenance)
                                            <span class="badge bg-success">Termasuk</span>
                                            @if($layananJasa->maintenance_periode_bulan)
                                                <br><small class="text-muted">Setiap {{ $layananJasa->maintenance_periode_bulan }} bulan</small>
                                            @endif
                                        @else
                                            <span class="badge bg-secondary">Tidak</span>
                                        @endif
                                    </td>
                                </tr>
                            </table>
                        </div>
                    </div>

                    <!-- Informasi Sistem -->
                    <div class="card border-0 shadow-sm">
                        <div class="card-header bg-white border-bottom">
                            <h6 class="mb-0"><i class="fas fa-info-circle text-muted"></i> Informasi Sistem</h6>
                        </div>
                        <div class="card-body">
                            <table class="table table-borderless table-sm">
                                <tr>
                                    <td class="text-muted">Dibuat:</td>
                                    <td>{{ $layananJasa->created_at->format('d/m/Y H:i') }}</td>
                                </tr>
                                <tr>
                                    <td class="text-muted">Diupdate:</td>
                                    <td>{{ $layananJasa->updated_at->format('d/m/Y H:i') }}</td>
                                </tr>
                                <tr>
                                    <td class="text-muted">Oleh:</td>
                                    <td>{{ $layananJasa->createdBy->name ?? 'System' }}</td>
                                </tr>
                                @if($layananJasa->tags && count($layananJasa->tags) > 0)
                                <tr>
                                    <td class="text-muted">Tags:</td>
                                    <td>
                                        @foreach($layananJasa->tags as $tag)
                                            <span class="badge bg-primary me-1">#{{ $tag }}</span>
                                        @endforeach
                                    </td>
                                </tr>
                                @endif
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Image Modal -->
<div class="modal fade" id="imageModal" tabindex="-1">
    <div class="modal-dialog modal-lg modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Preview Gambar</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body text-center">
                <img id="modalImage" src="" alt="Preview" class="img-fluid">
            </div>
        </div>
    </div>
</div>
@endsection

@push('styles')
<style>
    .pricing-card {
        padding: 1rem;
        border: 1px solid #e9ecef;
        border-radius: 8px;
        background: #f8f9fa;
    }
    
    .stat-item {
        padding: 0.5rem;
    }
    
    .badge {
        font-size: 0.75em;
    }
    
    .card {
        border-radius: 10px;
    }
    
    .card-header {
        border-radius: 10px 10px 0 0 !important;
    }
    
    .shadow-sm {
        box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075) !important;
    }
    
    .img-fluid:hover {
        transform: scale(1.02);
        transition: transform 0.2s ease;
    }
    
    .list-unstyled li {
        padding: 0.25rem 0;
    }
    
    .alert {
        border-radius: 8px;
    }
    
    .btn-group .btn {
        border-radius: 0;
    }
    
    .btn-group .btn:first-child {
        border-radius: 6px 0 0 6px;
    }
    
    .btn-group .btn:last-child {
        border-radius: 0 6px 6px 0;
    }
</style>
@endpush

@push('scripts')
<script>
    // Image modal functionality
    document.addEventListener('DOMContentLoaded', function() {
        const imageModal = document.getElementById('imageModal');
        const modalImage = document.getElementById('modalImage');
        
        imageModal.addEventListener('show.bs.modal', function(event) {
            const trigger = event.relatedTarget;
            const imageSrc = trigger.getAttribute('data-image');
            modalImage.src = imageSrc;
        });
    });

    // Confirm actions
    document.querySelectorAll('form[onsubmit]').forEach(form => {
        form.addEventListener('submit', function(e) {
            if (!confirm('Yakin ingin melakukan aksi ini?')) {
                e.preventDefault();
            }
        });
    });
</script>
@endpush