@extends('layout.temp')

@section('title', 'Riwayat Pesanan - Jasa Printer')

@section('styles')
<style>
    :root {
        --hs-primary: #2563eb;
        --hs-slate-900: #0f172a;
        --hs-slate-800: #1e293b;
        --hs-slate-600: #475569;
        --hs-slate-400: #94a3b8;
        --hs-slate-100: #f1f5f9;
        --hs-radius: 28px;
    }

    body {
        background: #f8fafc;
        font-family: 'Plus Jakarta Sans', sans-serif;
    }

    .history-wrapper {
        padding: 40px 0 100px;
    }

    .page-header {
        margin-bottom: 40px;
    }

    .page-title {
        font-size: 2.2rem;
        font-weight: 800;
        color: var(--hs-slate-900);
        letter-spacing: -1.5px;
    }

    .page-subtitle {
        color: var(--hs-slate-600);
        font-weight: 500;
    }

    /* Modern Tabs */
    .modern-tabs {
        background: white;
        padding: 8px;
        border-radius: 20px;
        display: inline-flex;
        border: 1px solid var(--hs-slate-100);
        box-shadow: 0 4px 15px rgba(0,0,0,0.03);
        margin-bottom: 40px;
    }

    .modern-tabs .nav-link {
        border-radius: 14px;
        padding: 12px 24px;
        font-weight: 700;
        color: var(--hs-slate-600);
        transition: 0.3s;
        border: none;
    }

    .modern-tabs .nav-link.active {
        background: var(--hs-primary);
        color: white;
        box-shadow: 0 10px 20px rgba(37, 99, 235, 0.2);
    }

    /* Order Card */
    .order-pro-card {
        background: white;
        border-radius: var(--hs-radius);
        border: 1px solid var(--hs-slate-100);
        margin-bottom: 30px;
        overflow: hidden;
        transition: 0.3s;
        box-shadow: 0 10px 30px rgba(15, 23, 42, 0.03);
    }

    .order-pro-card:hover {
        box-shadow: 0 15px 45px rgba(15, 23, 42, 0.06);
        transform: translateY(-3px);
    }

    .order-card-header {
        padding: 24px 35px;
        background: #fafbfc;
        border-bottom: 1px solid var(--hs-slate-100);
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .order-id-label {
        font-size: 0.75rem;
        font-weight: 800;
        color: var(--hs-slate-400);
        text-transform: uppercase;
        letter-spacing: 1px;
        margin-bottom: 2px;
        display: block;
    }

    .order-id-val {
        font-weight: 800;
        color: var(--hs-slate-900);
        font-size: 1.1rem;
    }

    .order-status-badge {
        padding: 8px 16px;
        border-radius: 12px;
        font-size: 0.75rem;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

    .status-menunggu { background: #fef3c7; color: #92400e; }
    .status-diproses { background: #dbeafe; color: #1e40af; }
    .status-dikirim { background: #e0f2fe; color: #075985; }
    .status-selesai { background: #d1fae5; color: #065f46; }
    .status-dibatalkan { background: #fee2e2; color: #991b1b; }

    .order-card-body {
        padding: 35px;
    }

    .item-row {
        display: flex;
        gap: 20px;
        margin-bottom: 20px;
        padding-bottom: 20px;
        border-bottom: 1px dashed var(--hs-slate-100);
    }

    .item-row:last-child {
        margin-bottom: 0;
        padding-bottom: 0;
        border-bottom: none;
    }

    .item-img-pro {
        width: 70px;
        height: 70px;
        border-radius: 16px;
        background: white;
        border: 1px solid var(--hs-slate-100);
        padding: 8px;
        flex-shrink: 0;
    }

    .item-img-pro img {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }

    .item-info-pro {
        flex-grow: 1;
    }

    .item-name-pro {
        font-weight: 800;
        color: var(--hs-slate-900);
        margin-bottom: 4px;
        display: block;
    }

    .item-meta-pro {
        font-size: 0.8rem;
        font-weight: 700;
        color: var(--hs-slate-400);
    }

    .item-price-pro {
        font-weight: 950;
        color: var(--hs-slate-900);
        text-align: right;
    }

    .order-card-footer {
        padding: 24px 35px;
        background: var(--hs-slate-900);
        color: white;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .footer-total-label {
        font-size: 0.75rem;
        font-weight: 700;
        color: var(--hs-slate-400);
        text-transform: uppercase;
        letter-spacing: 1px;
    }

    .footer-total-val {
        font-size: 1.4rem;
        font-weight: 900;
    }

    .btn-detail-pro {
        background: white;
        color: var(--hs-slate-900);
        border: none;
        border-radius: 12px;
        padding: 10px 24px;
        font-weight: 800;
        font-size: 0.9rem;
        transition: 0.2s;
        text-decoration: none;
        display: inline-flex;
        align-items: center;
        gap: 8px;
    }

    .btn-detail-pro:hover {
        background: var(--hs-primary);
        color: white;
        transform: translateY(-2px);
    }

    /* Empty State */
    .empty-history-box {
        text-align: center;
        padding: 100px 40px;
        background: white;
        border-radius: var(--hs-radius);
        border: 1px solid var(--hs-slate-100);
    }

    .empty-history-icon {
        font-size: 70px;
        color: var(--hs-slate-100);
        margin-bottom: 25px;
    }

    @media (max-width: 768px) {
        .history-wrapper { padding: 20px 0 80px; }
        .page-title { font-size: 1.6rem; }
        .modern-tabs { flex-direction: column; width: 100%; border-radius: 20px; }
        .nav-pills .nav-item { width: 100%; }
        .nav-pills .nav-link { width: 100%; text-align: left; }
        
        .order-card-header, .order-card-body, .order-card-footer { padding: 20px; }
        .order-card-header { flex-direction: column; align-items: flex-start; gap: 10px; }
        .order-card-header .text-end { text-align: left !important; }
        .order-card-footer { flex-direction: column; gap: 15px; align-items: stretch; text-align: left; }
        
        .item-row { flex-direction: column; align-items: flex-start; gap: 12px; }
        .item-price-pro { text-align: left; margin-top: 5px; }
        
        .btn-detail-pro, .btn-outline-light, .btn-success, .btn-warning { width: 100%; justify-content: center; margin-top: 5px; margin-bottom: 5px;}
        .col-lg-4.text-lg-end.mt-4.mt-lg-0 { margin-top: 20px; }
    }

    /* ===== CRITICAL: FIX MODAL STACKING CONTEXT ===== */
    /* backdrop-filter on .topbar-pro creates a z-index stacking context
       that traps Bootstrap modals. These rules force correct layering. */
    .modal { z-index: 1055 !important; }
    .modal-backdrop { z-index: 1050 !important; }
    .modal-dialog { z-index: 1056 !important; position: relative; }
    
    /* Ensure topbar does NOT trap the modal inside its stacking context */
    .topbar-pro {
        transform: none !important;
        backdrop-filter: blur(25px);
        -webkit-backdrop-filter: blur(25px);
        will-change: auto;
    }
</style>
@endsection

@section('content')
<div class="history-wrapper">
    <div class="container animate__animated animate__fadeInUp">
        <div class="page-header">
            <h1 class="page-title">Riwayat Pesanan</h1>
            <p class="page-subtitle">Kelola pesanan produk dan pemantauan transaksi Anda.</p>
        </div>

        <!-- Modern Tabs -->
        <ul class="nav nav-pills modern-tabs" id="pills-tab" role="tablist">
            <li class="nav-item">
                <button class="nav-link active" id="pills-produk-tab" data-bs-toggle="pill" data-bs-target="#pills-produk" type="button" role="tab">
                    <i class="lni lni-cart-full me-2"></i> Belanja Produk
                </button>
            </li>
            <li class="nav-item">
                <button class="nav-link" id="pills-jasa-tab" data-bs-toggle="pill" data-bs-target="#pills-jasa" type="button" role="tab">
                    <i class="lni lni-customer me-2"></i> Layanan Service
                </button>
            </li>
        </ul>

        <div class="tab-content" id="pills-tabContent">
            <!-- TAB 1: Pesanan Produk -->
            <div class="tab-pane fade show active" id="pills-produk" role="tabpanel">
                @forelse($orders as $order)
                <div class="order-pro-card">
                    <div class="order-card-header">
                        <div>
                            <span class="order-id-label">NOMOR PESANAN</span>
                            <span class="order-id-val">#ORD-{{ $order->id }}</span>
                        </div>
                        <div class="text-end">
                            <div class="small fw-700 text-muted mb-2">{{ $order->created_at->format('d M Y, H:i') }}</div>
                            <span class="order-status-badge status-{{ $order->status }}">
                                {{ $order->status }}
                            </span>
                        </div>
                    </div>
                    <div class="order-card-body">
                        @foreach($order->items as $item)
                        <div class="item-row">
                            <div class="item-img-pro">
                                <img src="{{ asset('storage/'.$item->product->image) }}" alt="{{ $item->product->name }}">
                            </div>
                            <div class="item-info-pro">
                                <span class="item-name-pro">{{ $item->product->name }}</span>
                                <span class="item-meta-pro">{{ $item->jumlah }} Unit &bull; {{ $item->product->category->name ?? 'Sparepart' }}</span>
                                
                                {{-- Rating Button for Completed Items --}}
                                @if($order->status == 'selesai')
                                    @php
                                        $hasReview = $order->reviews->where('product_id', $item->product_id)->first();
                                    @endphp
                                    
                                    @if($hasReview)
                                        <div class="mt-2 text-warning fw-800 small">
                                            <i class="lni lni-star-fill"></i> Rating: {{ $hasReview->rating }}/5
                                        </div>
                                    @else
                                        <button class="btn btn-sm btn-warning rounded-pill px-3 fw-800 mt-2" 
                                                style="font-size: 10px;"
                                                data-bs-toggle="modal" 
                                                data-bs-target="#modalRatingProduct{{ $order->id }}-{{ $item->product_id }}">
                                            Beri Rating <i class="lni lni-star ml-1"></i>
                                        </button>
                                    @endif
                                @endif
                            </div>
                            <div class="item-price-pro">
                                Rp {{ number_format($item->subtotal, 0, ',', '.') }}
                            </div>
                        </div>
                        @endforeach
                    </div>
                    <div class="order-card-footer">
                        <div>
                            <span class="footer-total-label">TOTAL PEMBAYARAN</span>
                            <div class="footer-total-val text-white">Rp {{ number_format($order->total_harga, 0, ',', '.') }}</div>
                        </div>
                        <div class="d-flex gap-2">
                             @if(in_array($order->status, ['menunggu', 'diproses']))
                                <button class="btn btn-outline-light border-0 fw-800 small" data-bs-toggle="modal" data-bs-target="#modalBatal{{ $order->id }}">Batalkan</button>
                             @endif
                             <a href="{{ route('orders.detail', $order->id) }}" class="btn-detail-pro">
                                Lihat Detail <i class="lni lni-arrow-right"></i>
                            </a>
                        </div>
                    </div>
                </div>
                
                {{-- Modal Cancel --}}
                @if(in_array($order->status, ['menunggu', 'diproses']))
                <div class="modal fade" id="modalBatal{{ $order->id }}" tabindex="-1" aria-hidden="true">
                    <div class="modal-dialog modal-dialog-centered">
                        <div class="modal-content" style="border-radius: 30px;">
                            <div class="modal-header border-0 p-4 pb-0">
                                <h5 class="fw-800">Batalkan Pesanan?</h5>
                                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                            </div>
                            <form action="{{ route('orders.cancel', $order->id) }}" method="POST">
                                @csrf
                                <div class="modal-body p-4">
                                    <p class="text-muted small mb-4">Silakan pilih alasan pembatalan pesanan Anda.</p>
                                    <select name="cancel_reason" class="form-select rounded-4 py-3 border-light bg-light fw-700" required>
                                        <option value="">Pilih Alasan...</option>
                                        <option value="Ingin mengubah detail pesanan">Ubah detail pesanan</option>
                                        <option value="Menemukan harga lebih murah">Harga lebih murah di tempat lain</option>
                                        <option value="Tidak jadi membeli">Tidak jadi membeli</option>
                                    </select>
                                </div>
                                <div class="modal-footer border-0 p-4 pt-0">
                                    <button type="submit" class="btn btn-danger w-100 py-3 rounded-pill fw-800 shadow">YA, BATALKAN SEKARANG</button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
                @endif
                
                {{-- Modals Rating Produk (di luar card yang overflow: hidden) --}}
                @if($order->status == 'selesai')
                    @foreach($order->items as $item)
                        @php
                            $hasReview = $order->reviews->where('product_id', $item->product_id)->first();
                        @endphp
                        @if(!$hasReview)
                            <div class="modal fade" id="modalRatingProduct{{ $order->id }}-{{ $item->product_id }}" tabindex="-1" aria-hidden="true">
                                <div class="modal-dialog modal-dialog-centered">
                                    <div class="modal-content text-dark" style="border-radius: 30px;">
                                        <div class="modal-header border-0 p-4 pb-0">
                                            <h5 class="fw-800">Ulas Produk</h5>
                                            <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                                        </div>
                                        <form action="{{ route('reviews.store') }}" method="POST">
                                            @csrf
                                            <input type="hidden" name="order_id" value="{{ $order->id }}">
                                            <input type="hidden" name="product_id" value="{{ $item->product_id }}">
                                            
                                            <div class="modal-body p-4 text-center">
                                                <div class="mb-3">
                                                    <img src="{{ asset('storage/'.$item->product->image) }}" style="width: 80px; height: 80px; object-fit: contain; border-radius: 15px; border: 1px solid #f1f5f9; padding: 5px;">
                                                    <div class="fw-800 small mt-2">{{ $item->product->name }}</div>
                                                </div>
                                                
                                                <p class="text-muted small mb-4">Bagaimana kualitas produk yang Anda terima?</p>
                                                
                                                <div class="premium-star-rating mb-4">
                                                    @for($i = 5; $i >= 1; $i--)
                                                        <input type="radio" name="rating" value="{{ $i }}" id="pstar{{ $order->id }}-{{ $item->product_id }}-{{ $i }}" class="d-none" required>
                                                        <label for="pstar{{ $order->id }}-{{ $item->product_id }}-{{ $i }}" class="pro-star"><i class="lni lni-star-fill"></i></label>
                                                    @endfor
                                                </div>
                                                
                                                <textarea name="komentar" class="form-control rounded-4 bg-light border-0 p-3 fw-700" rows="3" placeholder="Bagikan ulasan Anda tentang produk ini..."></textarea>
                                            </div>
                                            <div class="modal-footer border-0 p-4 pt-0">
                                                <button type="submit" class="btn btn-primary w-100 py-3 rounded-pill fw-800 shadow">KIRIM ULASAN</button>
                                            </div>
                                        </form>
                                    </div>
                                </div>
                            </div>
                        @endif
                    @endforeach
                @endif
                @empty
                <div class="empty-history-box">
                    <i class="lni lni-package empty-history-icon"></i>
                    <h3 class="fw-800 text-dark mb-3">Belum Ada Pesanan</h3>
                    <p class="text-muted mb-4">Anda belum memiliki riwayat pembelian produk sparepart.</p>
                    <a href="/#pricing" class="btn btn-primary px-5 py-3 rounded-pill fw-800 shadow-sm">Jelajahi Produk</a>
                </div>
                @endforelse
            </div>

            <!-- TAB 2: Layanan Service -->
            <div class="tab-pane fade" id="pills-jasa" role="tabpanel">
                @forelse($jasas as $j)
                <div class="order-pro-card">
                    <div class="order-card-header">
                        <div>
                            <span class="order-id-label">TIKET SERVICE</span>
                            <span class="order-id-val">#SVR-{{ $j->id }}</span>
                        </div>
                        <div class="text-end">
                            <div class="small fw-700 text-muted mb-2">{{ $j->created_at->format('d M Y') }}</div>
                            <span class="order-status-badge status-{{ strtolower($j->status) }}">
                                {{ $j->status }}
                            </span>
                        </div>
                    </div>
                    <div class="order-card-body">
                         <div class="row align-items-center">
                            @if($j->foto_video_kondisi)
                            <div class="col-md-3 mb-4 mb-md-0">
                                @php
                                    $ext = pathinfo($j->foto_video_kondisi, PATHINFO_EXTENSION);
                                    $isImage = in_array(strtolower($ext), ['jpg', 'jpeg', 'png', 'gif', 'webp']);
                                @endphp
                                @if($isImage)
                                    <a href="{{ asset('storage/service/'.$j->foto_video_kondisi) }}" target="_blank">
                                        <img src="{{ asset('storage/service/'.$j->foto_video_kondisi) }}" class="rounded-4 img-fluid border shadow-sm" style="height: 130px; object-fit: cover; width: 100%; border-radius: 18px;" alt="Lampiran">
                                    </a>
                                @else
                                    <a href="{{ asset('storage/service/'.$j->foto_video_kondisi) }}" target="_blank" class="text-decoration-none">
                                        <div class="bg-light rounded-4 border shadow-sm d-flex flex-column align-items-center justify-content-center" style="height: 130px; width: 100%; border-radius: 18px;">
                                            <i class="lni lni-video fs-2 text-primary mb-2"></i>
                                            <span class="fw-bold text-primary small">Lihat Video</span>
                                        </div>
                                    </a>
                                @endif
                            </div>
                            @endif
                            <div class="col-lg-{{ $j->foto_video_kondisi ? '5' : '8' }}">
                                <h4 class="fw-800 text-dark mb-1">{{ $j->merek_printer }} - {{ $j->tipe_printer }}</h4>
                                <p class="text-primary fw-bold small mb-4"><i class="lni lni-warning me-1"></i> {{ $j->kategori_keluhan }}</p>
                                
                                <div class="row g-3">
                                    <div class="col-{{ $j->foto_video_kondisi ? '12' : 'md-4' }}">
                                        <div class="small fw-800 text-muted text-uppercase mb-1" style="font-size: 10px;">Metode</div>
                                        <div class="fw-800 text-dark">{{ $j->jenis_layanan }}</div>
                                    </div>
                                    <div class="col-{{ $j->foto_video_kondisi ? '12' : 'md-4' }}">
                                        <div class="small fw-800 text-muted text-uppercase mb-1" style="font-size: 10px;">Kondisi</div>
                                        <div class="fw-800 text-dark">{{ $j->pernah_diservis }}</div>
                                    </div>
                                    @if(!$j->foto_video_kondisi)
                                    <div class="col-md-4">
                                        <div class="small fw-800 text-muted text-uppercase mb-1" style="font-size: 10px;">Lampiran</div>
                                        <div class="fw-800 text-dark">0 File</div>
                                    </div>
                                    @endif
                                </div>
                            </div>
                            <div class="col-lg-4 text-lg-end mt-4 mt-lg-0">
                                @if(strtolower($j->status) == 'selesai' && is_null($j->rating))
                                    <button class="btn btn-warning rounded-pill px-4 fw-800 shadow-sm mb-2" data-bs-toggle="modal" data-bs-target="#modalRatingJasa{{ $j->id }}">
                                        Beri Rating <i class="lni lni-star ml-2"></i>
                                    </button>
                                @endif
                                <a href="https://wa.me/{{ $shop_settings['shop_wa'] ?? '' }}" target="_blank" class="btn btn-success rounded-pill px-4 fw-800 shadow-sm">
                                    Chat Teknisi <i class="ti ti-brand-whatsapp ml-2"></i>
                                </a>
                            </div>
                         </div>
                    </div>
                </div>
                
                {{-- Modal Rating Jasa (Simplified Premium) --}}
                @if(strtolower($j->status) == 'selesai' && is_null($j->rating))
                <div class="modal fade" id="modalRatingJasa{{ $j->id }}" tabindex="-1" aria-hidden="true">
                    <div class="modal-dialog modal-dialog-centered">
                        <div class="modal-content" style="border-radius: 30px;">
                            <div class="modal-header border-0 p-4 pb-0">
                                <h5 class="fw-800">Penilaian Layanan</h5>
                                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                            </div>
                            <form action="{{ route('jasa.rating', $j->id) }}" method="POST">
                                @csrf
                                <div class="modal-body p-4 text-center">
                                    <p class="text-muted small mb-4">Bagaimana kualitas layanan kami untuk unit {{ $j->merek_printer }} Anda?</p>
                                    <div class="premium-star-rating mb-4">
                                        @for($i = 5; $i >= 1; $i--)
                                            <input type="radio" name="rating" value="{{ $i }}" id="jstar{{ $j->id }}-{{ $i }}" class="d-none" required>
                                            <label for="jstar{{ $j->id }}-{{ $i }}" class="pro-star"><i class="lni lni-star-fill"></i></label>
                                        @endfor
                                    </div>
                                    <textarea name="testimoni" class="form-control rounded-4 bg-light border-0 p-3 fw-700" rows="3" placeholder="Bagikan pengalaman singkat Anda..."></textarea>
                                </div>
                                <div class="modal-footer border-0 p-4 pt-0">
                                    <button type="submit" class="btn btn-primary w-100 py-3 rounded-pill fw-800 shadow">KIRIM PENILAIAN</button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
                @endif

                @empty
                <div class="empty-history-box">
                    <i class="lni lni-hammer empty-history-icon"></i>
                    <h3 class="fw-800 text-dark mb-3">Belum Ada Layanan</h3>
                    <p class="text-muted mb-4">Anda belum pernah mengajukan order jasa service printer.</p>
                    <a href="{{ route('jasa.create') }}" class="btn btn-primary px-5 py-3 rounded-pill fw-800 shadow-sm">Order Service</a>
                </div>
                @endforelse
            </div>
        </div>
    </div>
</div>

<style>
    /* Star Rating CSS */
    .premium-star-rating { display: flex; flex-direction: row-reverse; justify-content: center; gap: 10px; }
    .pro-star { font-size: 40px; color: #e2e8f0; cursor: pointer; transition: 0.2s; }
    .pro-star:hover, .pro-star:hover ~ .pro-star { color: #f59e0b; transform: scale(1.1); }
    .premium-star-rating input:checked ~ .pro-star { color: #f59e0b; }
</style>

@push('scripts')
<script>
    // ===== MODAL TELEPORT FIX =====
    // backdrop-filter and animation on ancestor elements create new CSS stacking
    // contexts that trap Bootstrap modals. The fix: move ALL modals to <body>
    // directly so they are completely free from any parent stacking context.
    document.addEventListener('DOMContentLoaded', function () {
        document.querySelectorAll('.modal').forEach(function (modal) {
            document.body.appendChild(modal);
        });
    });
</script>
@endpush

@endsection