@extends('layouts.app')

@section('title', 'Detail Request: ' . $request->request_number)

@section('content')
    <style>
        /* Modern Vertical Timeline */
        .timeline-modern {
            position: relative;
            padding-left: 2rem;
            margin-bottom: 1rem;
        }

        .timeline-modern::before {
            content: '';
            position: absolute;
            left: 0.5rem;
            top: 0;
            bottom: 0;
            width: 2px;
            background-color: #e9ecef;
        }

        .timeline-item {
            position: relative;
            margin-bottom: 1.5rem;
        }

        .timeline-item:last-child {
            margin-bottom: 0;
        }

        .timeline-icon {
            position: absolute;
            left: -2.35rem;
            top: 0;
            width: 30px;
            height: 30px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: #fff;
            border: 2px solid #0d6efd;
            z-index: 1;
        }

        .timeline-content {
            background-color: #f8f9fa;
            padding: 1rem;
            border-radius: 0.75rem;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02);
        }
    </style>

    <div class="container py-4">
        <div class="row mb-4 align-items-center" data-aos="fade-down">
            <div class="col-md-8">
                <span
                    class="badge bg-primary bg-opacity-10 text-primary px-3 py-2 rounded-pill mb-2 fw-bold tracking-wide">DETAIL
                    PENGAJUAN</span>
                <h3 class="fw-bolder mb-0">No. <span class="text-primary">{{ $request->request_number }}</span></h3>
            </div>
            <div class="col-md-4 text-md-end mt-3 mt-md-0">
                <a href="{{ url()->previous() }}"
                    class="btn btn-outline-secondary rounded-pill shadow-sm hover-lift px-4 fw-bold">
                    <i class="bi bi-arrow-left me-2"></i> Kembali
                </a>
            </div>
        </div>

        @if (session('success'))
            <div class="alert alert-success alert-dismissible fade show border-0 shadow-sm rounded-4 border-start border-success border-5 mb-4"
                role="alert" data-aos="fade-in">
                <div class="d-flex align-items-center">
                    <i class="bi bi-check-circle-fill fs-4 text-success me-3"></i>
                    <div class="fw-medium text-dark">{{ session('success') }}</div>
                </div>
                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
            </div>
        @endif

        @if ($errors->any())
            <div class="alert alert-danger alert-dismissible fade show border-0 shadow-sm rounded-4 border-start border-danger border-5 mb-4"
                role="alert">
                <div class="fw-bold mb-1"><i class="bi bi-exclamation-triangle-fill me-2"></i>Terjadi Kesalahan:</div>
                <ul class="mb-0 small">
                    @foreach ($errors->all() as $error)
                        <li>{{ $error }}</li>
                    @endforeach
                </ul>
                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
            </div>
        @endif

        <div class="row g-4">
            <div class="col-lg-8" data-aos="fade-up" data-aos-delay="100">

                <div class="card border-0 shadow-sm rounded-4 mb-4 overflow-hidden">
                    <div style="height: 4px; background: linear-gradient(90deg, #0d6efd 0%, #0dcaf0 100%);"></div>
                    <div
                        class="card-header bg-white border-bottom pt-4 pb-3 px-4 d-flex justify-content-between align-items-center">
                        <h5 class="fw-bolder text-dark mb-0"><i
                                class="bi bi-info-square-fill text-primary me-2"></i>Informasi Sampel</h5>

                        @php
                            $badgeStyle = match ($request->status) {
                                'draft' => 'bg-secondary text-white',
                                'pending', 'qc_pending' => 'bg-warning text-dark',
                                'diperiksa' => 'bg-info text-dark',
                                'approved', 'qc_lulus' => 'bg-primary text-white',
                                'diproses' => 'bg-info text-dark',
                                'dikirim', 'diterima', 'selesai' => 'bg-success text-white',
                                'revisi', 'tolak', 'rework', 'qc_ditolak' => 'bg-danger text-white',
                                default => 'bg-secondary text-white',
                            };
                        @endphp
                        <span class="badge {{ $badgeStyle }} rounded-pill px-4 py-2 fs-6 shadow-sm">
                            {{ strtoupper($request->status) }}
                        </span>
                    </div>
                    <div class="card-body p-4 p-md-5">
                        <div class="row g-4">
                            <div class="col-sm-6">
                                <p class="text-muted small text-uppercase fw-bold mb-1"><i
                                        class="bi bi-person-badge me-1"></i> Dibuat Oleh (Sales)</p>
                                <h6 class="fw-bold text-dark">{{ $request->user->name ?? 'User Terhapus / Sistem' }}</h6>
                            </div>
                            <div class="col-sm-6">
                                <p class="text-muted small text-uppercase fw-bold mb-1"><i class="bi bi-box-seam me-1"></i>
                                    Jenis Produk</p>
                                <h6 class="fw-bold text-dark">{{ $request->product_type }}</h6>
                            </div>
                            <div class="col-12">
                                <p class="text-muted small text-uppercase fw-bold mb-2"><i class="bi bi-building me-1"></i>
                                    Customer / Prospek</p>
                                <div class="bg-light p-3 rounded-4 border">
                                    <h6 class="fw-bold text-primary mb-1">
                                        {{ $request->customer->company_name ?? 'Customer Terhapus' }}</h6>
                                    <p class="mb-1 text-dark small"><i class="bi bi-person me-1"></i> UP:
                                        {{ $request->customer->contact_person ?? '-' }} &bull; <i
                                            class="bi bi-telephone me-1"></i> {{ $request->customer->phone ?? '-' }}</p>
                                    <p class="mb-0 text-muted small"><i class="bi bi-geo-alt me-1"></i>
                                        {{ $request->customer->address ?? '-' }}</p>
                                </div>
                            </div>
                            <div class="col-12">
                                <p class="text-muted small text-uppercase fw-bold mb-1"><i class="bi bi-card-text me-1"></i>
                                    Keterangan Khusus</p>
                                <p class="text-dark bg-light p-3 rounded-4 mb-0">
                                    {{ $request->notes ?? 'Tidak ada catatan tambahan.' }}</p>
                            </div>

                            @if ($request->artwork_file)
                                <div class="col-12">
                                    <p class="text-muted small text-uppercase fw-bold mb-2"><i
                                            class="bi bi-palette me-1"></i> File Artwork Desain</p>
                                    <a href="{{ asset('storage/' . $request->artwork_file) }}" target="_blank"
                                        class="btn btn-outline-primary rounded-pill px-4 shadow-sm hover-lift">
                                        <i class="bi bi-eye me-2"></i> Lihat Lampiran Artwork
                                    </a>
                                </div>
                            @endif
                        </div>
                    </div>
                </div>

                <div class="card border-0 shadow-sm rounded-4 mb-4">
                    <div class="card-header bg-white border-bottom pt-4 pb-3 px-4">
                        <h5 class="fw-bolder text-dark mb-0"><i class="bi bi-clock-history text-secondary me-2"></i>Riwayat
                            Status (History)</h5>
                    </div>
                    <div class="card-body p-4">
                        <div class="timeline-modern">
                            @foreach ($request->histories as $index => $history)
                                <div class="timeline-item">
                                    <div
                                        class="timeline-icon text-white {{ $loop->last ? 'bg-primary border-primary' : 'bg-secondary border-secondary' }}">
                                        @if ($history->status_to == 'pending')
                                            <i class="bi bi-hourglass-split small"></i>
                                        @elseif($history->status_to == 'approved')
                                            <i class="bi bi-check-lg small"></i>
                                        @elseif($history->status_to == 'diproses')
                                            <i class="bi bi-gear-fill small"></i>
                                        @elseif($history->status_to == 'dikirim')
                                            <i class="bi bi-truck small"></i>
                                        @elseif($history->status_to == 'diterima' || $history->status_to == 'selesai')
                                            <i class="bi bi-patch-check-fill small"></i>
                                        @elseif($history->status_to == 'revisi' || $history->status_to == 'tolak')
                                            <i class="bi bi-x-circle-fill small"></i>
                                        @else
                                            <i class="bi bi-record-circle small"></i>
                                        @endif
                                    </div>

                                    <div
                                        class="timeline-content {{ $loop->last ? 'border border-primary bg-primary bg-opacity-10' : '' }}">
                                        <div class="d-flex justify-content-between align-items-center mb-1">
                                            <h6 class="fw-bold mb-0 {{ $loop->last ? 'text-primary' : 'text-dark' }}">
                                                {{ strtoupper($history->status_to) }}</h6>
                                            <small
                                                class="text-muted fw-bold">{{ $history->created_at->format('d/m/Y H:i') }}</small>
                                        </div>
                                        <div class="text-muted small mb-2"><i class="bi bi-person me-1"></i> Oleh:
                                            {{ $history->user->name ?? 'User Terhapus / Sistem' }}</div>
                                        @if ($history->notes)
                                            <div class="bg-white p-2 rounded border small text-secondary">
                                                <i class="bi bi-chat-left-text text-muted me-1"></i> {{ $history->notes }}
                                            </div>
                                        @endif
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-lg-4" data-aos="fade-left" data-aos-delay="200">

                @if (auth()->user()->hasRole('marketing') && in_array($request->status, ['pending', 'revisi', 'approved']))
                    <div class="card border-0 shadow-sm rounded-4 mb-4 overflow-hidden border-top border-primary border-4">
                        <div class="card-header bg-white border-bottom pt-4 pb-3 px-4 text-center">
                            <div class="bg-primary bg-opacity-10 text-primary rounded-circle d-inline-flex justify-content-center align-items-center mb-2"
                                style="width: 50px; height: 50px;">
                                <i class="bi bi-clipboard-check-fill fs-4"></i>
                            </div>
                            <h5 class="fw-bolder text-primary mb-0">Panel Marketing</h5>
                        </div>
                        <div class="card-body p-4">
                            <form action="{{ route('dashboard.requests.process_review', $request->id) }}" method="POST"
                                enctype="multipart/form-data">
                                @csrf
                                @method('PATCH')

                                @if (in_array($request->status, ['pending', 'revisi']))
                                    <div class="mb-4">
                                        <label class="form-label fw-bold text-secondary small">Keputusan Review</label>
                                        <select name="status" class="form-select border-primary shadow-sm" required>
                                            <option value="" disabled selected>-- Pilih Aksi Keputusan --</option>
                                            <option value="qc_pending">Approve (Setujui & Lanjut ke QC)</option>
                                            <option value="revisi">Minta Revisi</option>
                                            <option value="tolak">Tolak Request</option>
                                        </select>
                                    </div>
                                @endif

                                <div class="mb-4">
                                    <label class="form-label fw-bold text-secondary small">Upload Artwork
                                        (Opsional)</label>
                                    <input type="file" name="artwork_file" class="form-control"
                                        accept=".pdf,.ai,.jpg,.png">
                                    <small class="text-muted" style="font-size: 0.7rem;">Format: PDF, AI, JPG,
                                        PNG.</small>
                                </div>

                                <div class="mb-4">
                                    <label class="form-label fw-bold text-secondary small">Catatan / Instruksi</label>
                                    <textarea name="notes" class="form-control" rows="3"
                                        placeholder="Tulis instruksi revisi atau pesan produksi..."></textarea>
                                </div>

                                <button type="submit"
                                    class="btn btn-primary w-100 rounded-pill fw-bold shadow-sm hover-lift">
                                    Proses & Update Status
                                </button>
                            </form>
                        </div>
                    </div>
                @endif

                @if (auth()->user()->hasRole('pic') && in_array($request->status, ['qc_lulus', 'diproses', 'dikirim']))
                    <div class="card border-0 shadow-sm rounded-4 mb-4 overflow-hidden border-top border-success border-4">
                        <div class="card-header bg-white border-bottom pt-4 pb-3 px-4 text-center">
                            <div class="bg-success bg-opacity-10 text-success rounded-circle d-inline-flex justify-content-center align-items-center mb-2"
                                style="width: 50px; height: 50px;">
                                <i class="bi bi-truck fs-4"></i>
                            </div>
                            <h5 class="fw-bolder text-success mb-0">Panel Operasional (PIC)</h5>
                        </div>
                        <div class="card-body p-4">
                            <form action="{{ route('dashboard.deliveries.update_status', $request->id) }}"
                                method="POST">
                                @csrf
                                @method('PATCH')

                                <div class="mb-4">
                                    <label class="form-label fw-bold text-secondary small">Update Status Proses</label>
                                    <select name="status" id="pic_status" class="form-select border-success shadow-sm"
                                        required>
                                        @if ($request->status == 'qc_lulus')
                                            <option value="" disabled selected>-- Pilih Tindakan Pengiriman --
                                            </option>
                                        @endif
                                        <option value="diproses" {{ $request->status == 'diproses' ? 'selected' : '' }}>
                                            Sedang Diproses/Dibuat</option>
                                        <option value="dikirim" {{ $request->status == 'dikirim' ? 'selected' : '' }}>
                                            Dikirim (Dalam Perjalanan)</option>
                                        <option value="diterima" {{ $request->status == 'diterima' ? 'selected' : '' }}>
                                            Diterima Customer</option>
                                    </select>
                                </div>

                                <div id="shipping_info" class="p-3 bg-light rounded-4 border mb-4"
                                    style="display: {{ $request->status == 'dikirim' ? 'block' : 'none' }}; transition: all 0.3s;">
                                    <label class="form-label fw-bold text-secondary small">Ekspedisi / Kurir</label>
                                    <div class="input-group mb-3 shadow-sm rounded-3 overflow-hidden">
                                        <span class="input-group-text bg-white border-end-0"><i
                                                class="bi bi-shop"></i></span>
                                        <input type="text" name="courier" class="form-control border-start-0"
                                            placeholder="Cth: JNE, Kurir Internal"
                                            value="{{ $request->delivery->courier ?? '' }}">
                                    </div>

                                    <label class="form-label fw-bold text-secondary small">Nomor Resi</label>
                                    <div class="input-group shadow-sm rounded-3 overflow-hidden">
                                        <span class="input-group-text bg-white border-end-0"><i
                                                class="bi bi-upc-scan"></i></span>
                                        <input type="text" name="tracking_number" class="form-control border-start-0"
                                            placeholder="Input no. resi"
                                            value="{{ $request->delivery->tracking_number ?? '' }}">
                                    </div>
                                </div>

                                <button type="submit"
                                    class="btn btn-success text-white w-100 rounded-pill fw-bold shadow-sm hover-lift mb-3">
                                    <i class="bi bi-cloud-arrow-up me-1"></i> Update Pengiriman
                                </button>
                            </form>

                            @if ($request->status == 'dikirim' && auth()->user()->hasRole('sales'))
                                <form action="{{ route('dashboard.requests.report_received', $request->id) }}"
                                    method="POST" class="d-inline"
                                    onsubmit="return confirm('Laporkan ke PIC bahwa customer sudah menerima sampel ini?')">
                                    @csrf
                                    <button type="submit"
                                        class="btn btn-success fw-bold rounded-pill shadow-sm hover-lift">
                                        <i class="bi bi-check-circle me-1"></i> Laporkan Sudah Diterima
                                    </button>
                                </form>
                            @endif

                            @if ($request->status != 'draft' && $request->status != 'pending')
                                <div class="position-relative text-center mt-2 mb-3">
                                    <hr class="text-muted">
                                    <span
                                        class="position-absolute top-50 start-50 translate-middle bg-white px-2 small text-muted">Atau</span>
                                </div>

                                <a href="{{ route('dashboard.deliveries.print_docs', $request->id) }}" target="_blank"
                                    class="btn btn-outline-secondary w-100 rounded-pill fw-bold hover-lift">
                                    <i class="bi bi-printer me-2"></i> Cetak Surat Jalan
                                </a>
                            @endif
                        </div>
                    </div>
                @endif

                <!-- PANEL KHUSUS SALES: KONFIRMASI PENERIMAAN -->
                @if (auth()->user()->hasRole('sales') && $request->status == 'dikirim')
                    <div class="card border-0 shadow-sm rounded-4 mb-4 overflow-hidden border-top border-success border-4"
                        data-aos="fade-left" data-aos-delay="300">
                        <div class="card-body p-4 text-center">
                            <div class="bg-success bg-opacity-10 text-success rounded-circle d-inline-flex justify-content-center align-items-center mb-3"
                                style="width: 60px; height: 60px;">
                                <i class="bi bi-box2-heart-fill fs-3"></i>
                            </div>
                            <h5 class="fw-bolder text-dark mb-2">Konfirmasi Penerimaan</h5>
                            <p class="text-muted small mb-4">Apakah customer sudah mengonfirmasi bahwa sampel fisik telah
                                sampai dan diterima dengan baik?</p>

                            <form action="{{ route('dashboard.requests.report_received', $request->id) }}" method="POST"
                                onsubmit="return confirm('Anda yakin ingin melaporkan ke PIC Logistik bahwa customer sudah menerima sampel ini?')">
                                @csrf
                                <button type="submit"
                                    class="btn btn-success w-100 py-2 fw-bold rounded-pill shadow-sm hover-lift text-uppercase tracking-wide">
                                    <i class="bi bi-check-circle-fill me-2"></i> Laporkan Diterima
                                </button>
                            </form>
                        </div>
                    </div>
                @endif

            </div>


        </div>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const picStatus = document.getElementById('pic_status');
            const shippingInfo = document.getElementById('shipping_info');

            if (picStatus) {
                picStatus.addEventListener('change', function() {
                    if (this.value === 'dikirim') {
                        // Gunakan efek transisi sederhana
                        shippingInfo.style.opacity = '0';
                        shippingInfo.style.display = 'block';
                        setTimeout(() => {
                            shippingInfo.style.opacity = '1';
                        }, 50);
                    } else {
                        shippingInfo.style.opacity = '0';
                        setTimeout(() => {
                            shippingInfo.style.display = 'none';
                        }, 300);
                    }
                });
            }
        });
    </script>
@endsection