@extends('layout.app')

@section('title', 'Manajemen Jasa Service')

@section('content')
<div class="row animate-pro">
    <div class="col-12">
        <div class="card border-0 shadow-sm rounded-4 overflow-hidden">
            <div class="card-body p-4 p-md-5">
                
                <div class="d-flex justify-content-between align-items-center mb-5">
                    <div>
                        <h4 class="fw-800 mb-1">Daftar Order Service Printer</h4>
                        <p class="text-muted small mb-0">Total {{ $jasas->total() }} pesanan perbaikan printer masuk.</p>
                    </div>
                </div>

                <div class="table-responsive">
                    <table class="table table-hover align-middle border-light">
                        <thead class="bg-light">
                            <tr>
                                <th class="border-0 rounded-start px-4 py-3 text-muted small fw-800">PELANGGAN</th>
                                <th class="border-0 py-3 text-muted small fw-800">DETAIL UNIT</th>
                                <th class="border-0 py-3 text-muted small fw-800">WILAYAH</th>
                                <th class="border-0 py-3 text-muted small fw-800">METODE</th>
                                <th class="border-0 py-3 text-muted small fw-800">STATUS SEKARANG</th>
                                <th class="border-0 rounded-end px-4 py-3 text-muted small fw-800 text-end">AKSI</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse($jasas as $j)
                            <tr>
                                <td class="px-4 py-4">
                                    <div class="d-flex align-items-center gap-3">
                                        <div class="avatar-mini-pro">{{ substr($j->user->name, 0, 1) }}</div>
                                        <div>
                                            <div class="fw-bold text-dark">{{ $j->user->name }}</div>
                                            <div class="text-muted" style="font-size: 11px;">{{ $j->user->phone ?? 'WA N/A' }}</div>
                                        </div>
                                    </div>
                                </td>
                                <td>
                                    <div class="fw-bold text-dark">{{ $j->merek_printer }} - {{ $j->tipe_printer }}</div>
                                    <div class="text-primary small fw-semibold">{{ $j->kategori_keluhan }}</div>
                                </td>
                                <td>
                                    @if($j->address)
                                        <div class="fw-800 text-dark" style="font-size: 13px;">{{ $j->address->regency->name ?? '-' }}</div>
                                        <div class="text-muted small">{{ $j->address->province->name ?? '-' }}</div>
                                    @else
                                        <div class="text-muted small fst-italic">Antar ke Toko</div>
                                    @endif
                                </td>
                                <td>
                                    @if($j->jenis_layanan == 'Panggilan Teknisi')
                                        <div class="d-flex align-items-center gap-2">
                                            <span class="badge bg-soft-info text-info rounded-pill px-3 py-1 fw-bold" style="font-size: 10px;">🏠 TEKNISI DATANG</span>
                                            @if($j->address)
                                                @php
                                                    $queryMapTable = urlencode(
                                                        ($j->address->alamat_lengkap ?? '') . ', ' . 
                                                        ($j->address->village->name ?? '') . ', ' . 
                                                        ($j->address->district->name ?? '') . ', ' . 
                                                        ($j->address->regency->name ?? '') . ', ' . 
                                                        ($j->address->province->name ?? '')
                                                    );
                                                @endphp
                                                <a href="https://www.google.com/maps?q={{ $queryMapTable }}" target="_blank" class="text-info" title="Lacak Lokasi">
                                                    <i class="ti ti-map-2 fs-5"></i>
                                                </a>
                                            @endif
                                        </div>
                                    @else
                                        <span class="badge bg-soft-warning text-warning rounded-pill px-3 py-1 fw-bold" style="font-size: 10px;">🏪 ANTAR KE TOKO</span>
                                    @endif
                                </td>
                                <td>
                                    <select class="form-select status-changer-admin border-0 bg-light rounded-pill px-3 py-2 fw-bold" 
                                            data-id="{{ $j->id }}" style="font-size: 12px; min-width: 130px; cursor: pointer;">
                                        <option value="pending" {{ $j->status == 'pending' ? 'selected' : '' }}>🟡 Pending</option>
                                        <option value="proses" {{ $j->status == 'proses' ? 'selected' : '' }}>🔵 Proses</option>
                                        <option value="selesai" {{ $j->status == 'selesai' ? 'selected' : '' }}>🟢 Selesai</option>
                                        <option value="batal" {{ $j->status == 'batal' ? 'selected' : '' }}>🔴 Batal</option>
                                    </select>
                                </td>
                                <td class="px-4 text-end">
                                    <button class="btn btn-sm btn-light rounded-3 px-3 py-2 fw-bold" type="button" data-bs-toggle="modal" data-bs-target="#detailModal{{ $j->id }}">
                                        Detail
                                    </button>
                                </td>
                            </tr>
                            @empty
                            <tr>
                                <td colspan="6" class="text-center py-5 text-muted">Belum ada order service masuk.</td>
                            </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>

                <div class="mt-4">
                    {{ $jasas->links() }}
                </div>

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

@push('modals')
@foreach($jasas as $j)
    {{-- Modal Detail Service Terlengkap --}}
    <div class="modal fade" id="detailModal{{ $j->id }}" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-xl"> {{-- Menggunakan XL agar data bisa tampil luas --}}
            <div class="modal-content border-0 shadow-lg" style="border-radius: 28px; overflow: hidden;">
                
                {{-- TOP HEADER: Fokus pada Status & ID --}}
                <div class="modal-header border-0 p-4 bg-dark text-white d-flex align-items-center justify-content-between">
                    <div>
                        <span class="badge bg-primary px-3 py-2 rounded-pill fw-800 mb-2" style="font-size: 10px;">ID ORDER: #{{ $j->id }}</span>
                        <h4 class="fw-800 mb-0">Rincian Lengkap Permintaan Service</h4>
                    </div>
                    <div class="text-end">
                        <div class="small opacity-75 mb-1 fw-bold">STATUS PENGERJAAN:</div>
                        @php
                            $statusMap = match($j->status) {
                                'pending' => ['PENDING - Menunggu Konfirmasi', 'warning'],
                                'proses'  => ['PROSES - Sedang Dikerjakan', 'info'],
                                'selesai' => ['SELESAI - Sudah Diambil', 'success'],
                                'batal'   => ['BATAL - Pesanan Dibatalkan', 'danger'],
                                default   => ['Unknown', 'secondary']
                            };
                        @endphp
                        <div class="h5 mb-0 fw-800 text-{{ $statusMap[1] }} bg-white px-4 py-2 rounded-pill shadow-sm d-inline-block">
                            {{ strtoupper($statusMap[0]) }}
                        </div>
                    </div>
                </div>

                <div class="modal-body p-0">
                    <div class="row g-0">
                        {{-- KOLOM KIRI: Identitas & Diagnosis --}}
                        <div class="col-md-4 bg-light p-4 border-end">
                            {{-- 1. PROFIL PELANGGAN --}}
                            <div class="mb-5">
                                <label class="small text-muted fw-800 d-block mb-3 text-uppercase"><i class="ti ti-user-circle me-1"></i> Identitas Pelanggan:</label>
                                <div class="bg-white p-3 rounded-4 shadow-sm">
                                    <div class="fw-800 fs-5 text-dark mb-1">{{ $j->user->name }}</div>
                                    <div class="text-muted small fw-600 mb-2">{{ $j->user->email }}</div>
                                    <div class="d-flex align-items-center gap-2 mt-3 pt-3 border-top">
                                        <div class="bg-success text-white px-3 py-2 rounded-pill small fw-bold">
                                            <i class="ti ti-phone me-1"></i> {{ $j->user->phone ?? 'Tidak ada No WA' }}
                                        </div>
                                    </div>
                                </div>
                            </div>

                            {{-- 2. METODE LAYANAN --}}
                            <div class="mb-5">
                                <label class="small text-muted fw-800 d-block mb-3 text-uppercase"><i class="ti ti-truck-delivery me-1"></i> Metode Layanan:</label>
                                @if($j->jenis_layanan == 'Panggilan Teknisi')
                                    <div class="bg-soft-info p-3 rounded-4 border border-info">
                                        <div class="fw-800 text-info fs-6"><i class="ti ti-home-check me-2"></i>PANGGILAN TEKNISI</div>
                                        <div class="small text-info opacity-75 mt-1 font-italic">"Pelanggan meminta teknisi datang ke lokasi alamat yang tertera."</div>
                                    </div>
                                @else
                                    <div class="bg-soft-warning p-3 rounded-4 border border-warning">
                                        <div class="fw-800 text-warning fs-6"><i class="ti ti-building-store me-2"></i>ANTAR KE TOKO</div>
                                        <div class="small text-warning opacity-75 mt-1 font-italic">"Pelanggan akan membawa unit printernya langsung ke workshop Anda."</div>
                                    </div>
                                @endif
                            </div>

                            {{-- 3. RIWAYAT UNIT --}}
                            <div>
                                <label class="small text-muted fw-800 d-block mb-3 text-uppercase"><i class="ti ti-history me-1"></i> Riwayat Unit:</label>
                                <div class="bg-white p-3 rounded-4 border shadow-sm">
                                    <div class="text-muted small fw-bold mb-1">PERNAH DISERVIS?</div>
                                    <div class="fw-800 text-dark">{{ strtoupper($j->pernah_diservis) }}</div>
                                </div>
                            </div>
                        </div>

                        {{-- KOLOM TENGAH: Alasan Utama & Masalah --}}
                        <div class="col-md-5 p-4 bg-white">
                            {{-- 4. DIAGNOSIS KERUSAKAN --}}
                            <div class="mb-4">
                                <label class="small text-muted fw-800 d-block mb-3 text-uppercase text-primary"><i class="ti ti-search me-1"></i> Diagnosis Diagnosis:</label>
                                <div class="p-4 bg-soft-primary rounded-4">
                                    <div class="row align-items-center">
                                        <div class="col-3">
                                            <div class="bg-white p-3 rounded-4 text-center shadow-sm">
                                                <i class="ti ti-printer fs-1 text-primary"></i>
                                            </div>
                                        </div>
                                        <div class="col-9">
                                            <div class="h4 fw-800 text-primary mb-0">{{ $j->merek_printer }}</div>
                                            <div class="text-primary fw-600 fs-6">{{ $j->tipe_printer }}</div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="p-3 bg-danger rounded-4 text-white shadow-sm mb-4">
                                <div class="small fw-800 opacity-75 mb-1 text-center">KATEGORI KERUSAKAN:</div>
                                <div class="h5 text-center fw-800 mb-0">{{ strtoupper($j->kategori_keluhan) }}</div>
                            </div>

                            {{-- 5. ALASAN / DESKRIPSI (PUSAT PERHATIAN) --}}
                            <div class="mb-4">
                                <label class="small text-muted fw-800 d-block mb-3 text-uppercase text-dark"><i class="ti ti-file-description me-1"></i> Alasan Detail & Keluhan Pelanggan:</label>
                                <div class="bg-light p-4 rounded-4 border-start border-5 border-primary position-relative">
                                    <i class="ti ti-quote fs-huge position-absolute opacity-10" style="right: 15px; bottom: 10px; font-size: 60px;"></i>
                                    <p class="h5 fw-bold text-dark mb-0" style="line-height: 1.6; letter-spacing: -0.2px;">
                                        "{{ $j->deskripsi_masalah }}"
                                    </p>
                                </div>
                                <div class="small text-muted mt-3 fw-600 fst-italic">
                                    *Isi keluhan di atas adalah alasan utama pelanggan meminta perbaikan segera.
                                </div>
                            </div>

                            {{-- 6. ALAMAT (Jika Ada) --}}
                            @if($j->address)
                                <div class="mt-5 p-4 border rounded-4 bg-white shadow-sm">
                                    <label class="small text-muted fw-800 d-block mb-3 text-uppercase"><i class="ti ti-map-pin me-1"></i> Titik Lokasi:</label>
                                    <div class="fw-800 text-dark mb-1">{{ $j->address->regency->name }}, {{ $j->address->province->name }}</div>
                                    <div class="small text-muted mb-4">{{ $j->address->alamat_lengkap }}</div>
                                    
                                    @php
                                        $queryMapFull = urlencode(
                                            ($j->address->alamat_lengkap ?? '') . ', ' . 
                                            ($j->address->village->name ?? '') . ', ' . 
                                            ($j->address->district->name ?? '') . ', ' . 
                                            ($j->address->regency->name ?? '') . ', ' . 
                                            ($j->address->province->name ?? '')
                                        );
                                    @endphp
                                    <a href="https://www.google.com/maps?q={{ $queryMapFull }}" target="_blank" class="btn btn-primary w-100 rounded-pill py-3 fw-bold shadow-sm">
                                        <i class="ti ti-location-share me-2"></i> BUKA NAVIGASI GOOGLE MAPS
                                    </a>
                                </div>
                            @endif
                        </div>

                        {{-- KOLOM KANAN: Visual --}}
                        <div class="col-md-3 bg-light p-4">
                            <label class="small text-muted fw-800 d-block mb-3 text-uppercase text-center"><i class="ti ti-camera me-1"></i> Kondisi Visual Unit:</label>
                            @if($j->foto_video_kondisi)
                                <div class="card border-0 shadow-sm rounded-4 overflow-hidden">
                                    <img src="{{ asset('storage/service/'.$j->foto_video_kondisi) }}" class="img-fluid" style="width: 100%; height: 350px; object-fit: cover;">
                                    <div class="card-footer bg-white border-0 text-center p-3">
                                        <a href="{{ asset('storage/service/'.$j->foto_video_kondisi) }}" target="_blank" class="btn btn-sm btn-outline-dark rounded-pill fw-bold">
                                            <i class="ti ti-maximize me-1"></i> Lihat Foto Penuh
                                        </a>
                                    </div>
                                </div>
                            @else
                                <div class="bg-white rounded-4 border border-dashed p-5 text-center d-flex flex-column align-items-center justify-content-center" style="min-height: 350px;">
                                    <i class="ti ti-photo-off fs-1 text-muted opacity-25 mb-4"></i>
                                    <div class="small fw-800 text-muted px-4">Tidak ada data visual yang dilampirkan pelanggan.</div>
                                </div>
                            @endif

                            <div class="mt-4 p-4 text-center">
                                <div class="text-muted small mb-2 fw-600">Dibuat Pada:</div>
                                <div class="fw-800 text-dark">{{ $j->created_at->format('d/m/Y') }}</div>
                                <div class="text-muted small fw-bold mt-1">{{ $j->created_at->format('H:i') }} WIB</div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="modal-footer border-0 p-4 bg-light d-flex gap-3">
                    <button type="button" class="btn btn-dark rounded-pill px-5 py-3 fw-800 shadow-sm" data-bs-dismiss="modal">TUTUP DETAIL</button>
                    <a href="https://wa.me/{{ preg_replace('/[^0-9]/', '', $j->user->phone) }}" target="_blank" class="btn btn-success rounded-pill px-5 py-3 fw-800 flex-grow-1 shadow-sm">
                        <i class="ti ti-brand-whatsapp me-2"></i> HUBUNGI {{ strtoupper($j->user->name) }} VIA WHATSAPP
                    </a>
                </div>

            </div>
        </div>
    </div>
@endforeach
@endpush

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script>
    $(document).ready(function() {
        $('.status-changer-admin').on('change', function() {
            const id = $(this).data('id');
            const status = $(this).val();
            const select = $(this);

            // Beri efek loading ringan
            select.addClass('opacity-50').prop('disabled', true);

            $.ajax({
                url: `/service/update-status/${id}`,
                type: "POST",
                data: {
                    _token: "{{ csrf_token() }}",
                    status: status
                },
                success: function(res) {
                    select.removeClass('opacity-50').prop('disabled', false);
                    if(res.success) {
                        Swal.fire({
                            icon: 'success',
                            title: 'Berhasil!',
                            text: res.message,
                            timer: 2000,
                            showConfirmButton: false,
                            toast: true,
                            position: 'top-end'
                        });
                        
                        // Opsional: Reload untuk update modal status (karena modal butuh data PHP terbaru)
                        setTimeout(() => { location.reload(); }, 1000);
                    }
                },
                error: function() {
                    select.removeClass('opacity-50').prop('disabled', false);
                    Swal.fire({
                        icon: 'error',
                        title: 'Oops...',
                        text: 'Gagal memperbarui status. Silakan coba lagi.'
                    });
                }
            });
        });
    });
</script>

<style>
    .bg-soft-info { background: #e0f2fe; color: #0369a1; }
    .bg-soft-warning { background: #fef3c7; color: #92400e; }
    .bg-soft-primary { background: #e0e7ff; color: #4338ca; }
    .fw-800 { font-weight: 800; }
    .avatar-mini-pro {
        width: 38px; height: 38px;
        border-radius: 12px;
        background: #2C6EEB;
        color: #fff;
        display: flex; align-items: center; justify-content: center;
        font-weight: 800; font-size: 14px;
    }
</style>
@endsection
