@extends('Front.layout')

@push('front-styles')
    <style>
        body {
            font-family: 'Inter', sans-serif;
            background-color: #f8f9fa;
        }

        .container {
            max-width: 800px;
        }

        .tracking-card {
            border: none;
            border-radius: 0.75rem;
        }



        .status-header {
            background-color: #e9ecef;
            border-bottom: 1px solid #dee2e6;
            font-weight: 600;
        }

        /* Styling for the progress tracker */
        .progress-timeline {
            display: flex;
            justify-content: space-between;
            list-style: none;
            padding: 0;
            margin: 2rem 0;
            position: relative;
        }

        .progress-timeline::before {
            content: '';
            position: absolute;
            top: 50%;
            left: 0;
            right: 0;
            height: 3px;
            background-color: #e9ecef;
            transform: translateY(-50%);
            z-index: 1;
        }

        .progress-step {
            position: relative;
            z-index: 2;
            text-align: center;
        }

        .progress-marker {
            width: 24px;
            height: 24px;
            border-radius: 50%;
            background-color: #e9ecef;
            border: 3px solid #e9ecef;
            display: inline-block;
            transition: all 0.3s ease;
        }

        .progress-step.completed .progress-marker {
            background-color: #198754;
            /* Green for completed */
            border-color: #198754;
        }

        .progress-step.active .progress-marker {
            background-color: #0d6efd;
            /* Blue for active */
            border-color: #0d6efd;
            transform: scale(1.2);
        }

        .progress-step-label {
            margin-top: 0.5rem;
            font-size: 0.85rem;
            color: #6c757d;
            font-weight: 500;
        }

        .progress-step.completed .progress-step-label,
        .progress-step.active .progress-step-label {
            color: #212529;
            font-weight: 600;
        }
    </style>
@endpush

@push('front-scripts')
    <script>
        var pixels = @json($metaPixels->where('target_page', 'status-perbaikan.index')->where('target_element', 'button#cek-button')->toArray());
        console.log(pixels);
        document.querySelector("button#cek-button").addEventListener('click', function(event) {
            event.preventDefault();
            for (const p in pixels) {
                if (Object.prototype.hasOwnProperty.call(pixels, p)) {
                    const pixel = pixels[p];
                    if (pixel.source == "meta") {
                        //fbq('init', `${pixel.pixel_id}`);
                        fbq('trackCustom', `${pixel.pixel_event}`);
                    } else if (pixel.source == "tiktok") {
                        //ttq.load(`${pixel.pixel_id}`);
                        ttq.track(`${pixel.pixel_event}`);
                    } else if (pixel.source == "gtm") {
                        dataLayer.push({
                            'event': `${pixel.pixel_event}`
                        });
                    }
                }
            }

            setTimeout(function() {
                document.getElementById('trackingForm').submit();
            }, 200);

        });
    </script>
@endpush

@section('frontcontent')

    <div class="container my-5" style="min-height: 70vh;">
        <!-- Page Header -->
        <div class="text-center mb-5">

            <h1 class="fw-bold">Lacak Status Perbaikan</h1>
            <p class="text-muted">Masukkan Nomor Servis Anda di bawah ini untuk melihat progres perbaikan perangkat Anda.
            </p>
        </div>

        <!-- Tracking Form Card -->
        <div class="card shadow-sm tracking-card">
            <div class="card-body p-4">
                <form id="trackingForm" method="POST" action="{{ route('status-perbaikan.cek') }}">
                    @csrf
                    <div class="row align-items-center">
                        <div class="col-md-9 mb-3 mb-md-0">
                            <label for="serviceNumber" class="form-label visually-hidden">Nomor Servis</label>
                            <input type="text" class="form-control form-control-lg" name="no_service" id="serviceNumber"
                                placeholder="Masukan nomor service..." required
                                value="{{ old('no_service', @$no_service) }}">
                        </div>
                        <div class="col-md-3">
                            <button type="submit" class="btn btn-lg btn-primary w-100"
                                style="background-color: {{ $landing->primary_color }};color: {{ $landing->secondary_color }};"
                                id="cek-button">
                                Cek
                            </button>
                        </div>
                    </div>
                </form>
            </div>
        </div>

        @if (isset($service))
            @if ($service)
                <!-- Divider for better visual separation -->
                <hr class="my-4 " id="resultDivider">

                <!-- Result Display Area (Initially Hidden) -->
                <div id="statusResult">
                    <div class="card shadow-sm tracking-card">
                        <div class="card-header status-header d-flex justify-content-between align-items-center p-3">
                            <span id="resultHeader">Status Perbaikan untuk Nomor Servis:</span>
                            <span id="resultServiceNumber" class="badge bg-secondary">{{ $service->no_service }}</span>
                        </div>
                        <div class="card-body p-4 p-md-5">

                            {{-- <!-- Progress Timeline -->
                            <div class="progress-timeline">
                                <div class="progress-step" id="step1">
                                    <div class="progress-marker"></div>
                                    <div class="progress-step-label">Diterima</div>
                                </div>
                                <div class="progress-step" id="step2">
                                    <div class="progress-marker"></div>
                                    <div class="progress-step-label">Diagnosa</div>
                                </div>
                                <div class="progress-step" id="step3">
                                    <div class="progress-marker"></div>
                                    <div class="progress-step-label">Pengerjaan</div>
                                </div>
                                <div class="progress-step" id="step4">
                                    <div class="progress-marker"></div>
                                    <div class="progress-step-label">Selesai</div>
                                </div>
                                <div class="progress-step" id="step5">
                                    <div class="progress-marker"></div>
                                    <div class="progress-step-label">Siap Diambil</div>
                                </div>
                            </div>
                            <!-- End of Progress Timeline -->

                            <hr> --}}

                            <div class="row">
                                <div class="col-md-12 text-center">
                                    @switch($service->status)
                                        @case('pending')
                                            <span class="fs-2 badge bg-danger">{{ $service->status }}</span>
                                        @break

                                        @case('tidak_deal')
                                            <span class="fs-2 badge bg-danger"
                                                style="text-transform: capitalize;">{{ str_replace('_', ' ', $service->status) }}</span>
                                        @break

                                        @case('konfirmasi')
                                            <span class="fs-2 badge bg-warning"
                                                style="text-transform: capitalize;">{{ $service->status }}</span>
                                        @break

                                        @case('pending_perbaikan')
                                            <span class="label bg-cyan"
                                                style="text-transform: capitalize;">{{ str_replace('_', ' ', $service->status) }}</span>
                                        @break

                                        @case('tidak_bisa_diperbaiki')
                                            <span class="fs-2 badge bg-danger text-center "
                                                style="text-transform: capitalize;">{{ str_replace('_', ' ', $service->status) }}</span>
                                        @break

                                        @case('hp_bisa_diperbaiki')
                                            <span class="label bg-light-green text-center "
                                                style="text-transform: capitalize;">{{ str_replace('_', ' ', $service->status) }}
                                            </span>
                                        @break

                                        @case('hp_normal')
                                            <span class="label bg-indigo text-center "
                                                style="text-transform: capitalize;">{{ str_replace('_', ' ', $service->status) }}</span>
                                        @break

                                        @case('gagal_perbaikan')
                                            <span class="fs-2 badge bg-danger text-center " style="text-transform: capitalize;">
                                                {{ str_replace('_', ' ', $service->status) }}</span>
                                        @break

                                        @case('pengecekan')
                                            <span class="fs-2 badge bg-info">{{ $service->status }}</span>
                                        @break

                                        @case('indent')
                                            <span class="fs-2 badge bg-info">{{ $service->status }}</span>
                                        @break

                                        @case('proses_perbaikan')
                                            <span class="fs-2 badge bg-primary"
                                                style="text-transform: capitalize;">{{ str_replace('_', ' ', $service->status) }}</span>
                                        @break

                                        @case('selesai')
                                            <span class="fs-2 badge bg-success">Selesai Perbaikan</span>
                                        @break

                                        @case('batal')
                                            <span class="fs-2 badge bg-danger">{{ $service->status }}</span>
                                        @break

                                        @default
                                            <span class="fs-2 badge bg-success">{{ $service->status }}</span>
                                    @endswitch

                                </div>
                            </div>

                            <!-- Details Section -->
                            {{-- <div class="row mt-4">
                                <div class="col-md-6">
                                    <h5 class="fw-semibold">Informasi Perangkat</h5>
                                    <ul class="list-unstyled text-muted">
                                        <li><strong>Perangkat:</strong> {{ $service->merk }}</li>
                                        <li><strong>Model:</strong> {{ $service->tipe }}</li>
                                        <li><strong>Warna:</strong> {{ $service->color }}</li>
                                    </ul>
                                </div>
                                <div class="col-md-6">
                                    <h5 class="fw-semibold">Informasi Pelanggan</h5>
                                    <ul class="list-unstyled text-muted">
                                        <li><strong>Nama:</strong> {{$service->pelanggan->nama_pelanggan}}</li>
                                        <li><strong>Tanggal Masuk:</strong> {{$service->tanggal}}</li>
                                        <li><strong>Tanggal Selesai:</strong> {{$service->tanggal_selesai ?? "-"}}</li>
                                    </ul>
                                </div>
                            </div> --}}

                            {{-- <!-- History Log Section -->
                            <div class="mt-4">
                                <h5 class="fw-semibold">Riwayat Status</h5>
                                <ul class="list-group" id="statusHistory">
                                    <!-- History items will be populated by JavaScript -->
                                </ul>
                            </div> --}}
                        </div>
                        <div class="card-footer text-center text-muted p-3">
                            Ada pertanyaan? Hubungi kami di {{ $profil->kontak }}.
                        </div>
                    </div>
                </div>
            @else
                <!-- Not Found Alert (Initially Hidden) -->
                <div id="notFoundAlert" class="alert alert-danger mt-4" role="alert">
                    <h5 class="alert-heading">Tidak Ditemukan!</h5>
                    <p>Nomor servis yang Anda masukkan tidak ditemukan. Mohon periksa kembali nomor Anda dan coba lagi.</p>
                </div>
            @endif
        @endif




    </div>






@endsection