@extends('layouts.main')

@section('content')
    <div class="pagetitle">
        <h1>Detail Customer</h1>
        <nav>
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="/">Home</a></li>
                <li class="breadcrumb-item"><a href="{{ route('data-customer.index') }}">Data Customer</a></li>
                <li class="breadcrumb-item active">{{ $customer->name }}</li>
            </ol>
        </nav>
    </div><!-- End Page Title -->

    <section class="section">
        @if (session()->has('success'))
            <div class="alert alert-success alert-dismissible fade show" role="alert">
                <i class="bi bi-check-circle me-1"></i>
                {{ session('success') }}
                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
            </div>
        @endif

        <div class="row">
            <!-- Profile Card -->
            <div class="col-xl-4">
                <div class="card">
                    <div class="card-body pt-4 d-flex flex-column align-items-center">
                        @if($customer->profile)
                            <img src="{{ $customer->profile_url }}" 
                                 alt="Profile" class="rounded-circle" 
                                 style="width: 120px; height: 120px; object-fit: cover;">
                        @else
                            <div class="bg-secondary rounded-circle d-flex align-items-center justify-content-center" 
                                 style="width: 120px; height: 120px;">
                                <i class="bi bi-person text-white" style="font-size: 3rem;"></i>
                            </div>
                        @endif

                        <h2 class="mt-3">{{ $customer->name }}</h2>
                        <!-- <h3 class="text-muted">@{{ $customer->username }}</h3> -->
                        
                        <div class="mt-2">
                            <span class="badge bg-{{ $customer->status === 'active' ? 'success' : 'danger' }} fs-6">
                                {{ $customer->status === 'active' ? 'Customer Aktif' : 'Customer Nonaktif' }}
                            </span>
                        </div>

                        <div class="social-links mt-3">
                            <a href="mailto:{{ $customer->email }}" class="btn btn-outline-primary btn-sm me-2">
                                <i class="bi bi-envelope"></i> Email
                            </a>
                            <a href="tel:{{ $customer->phone }}" class="btn btn-outline-success btn-sm">
                                <i class="bi bi-telephone"></i> Call
                            </a>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Details Card -->
            <div class="col-xl-8">
                <div class="card">
                    <div class="card-body pt-3">
                        <ul class="nav nav-tabs nav-tabs-bordered">
                            <li class="nav-item">
                                <button class="nav-link active" data-bs-toggle="tab" data-bs-target="#customer-details">
                                    Detail Customer
                                </button>
                            </li>
                            <li class="nav-item">
                                <button class="nav-link" data-bs-toggle="tab" data-bs-target="#customer-orders">
                                    Riwayat Order
                                </button>
                            </li>
                        </ul>

                        <div class="tab-content pt-3">
                            <!-- Customer Details Tab -->
                            <div class="tab-pane fade show active" id="customer-details">
                                <h5 class="mb-3">Informasi Customer</h5>
                                
                                <div class="row mb-3">
                                    <div class="col-lg-3 col-md-4 label"><strong>Nama Lengkap:</strong></div>
                                    <div class="col-lg-9 col-md-8">{{ $customer->name }}</div>
                                </div>

                                <div class="row mb-3">
                                    <div class="col-lg-3 col-md-4 label"><strong>Username:</strong></div>
                                    <div class="col-lg-9 col-md-8">{{ $customer->username }}</div>
                                </div>

                                <div class="row mb-3">
                                    <div class="col-lg-3 col-md-4 label"><strong>Email:</strong></div>
                                    <div class="col-lg-9 col-md-8">
                                        <a href="mailto:{{ $customer->email }}">{{ $customer->email }}</a>
                                    </div>
                                </div>

                                <div class="row mb-3">
                                    <div class="col-lg-3 col-md-4 label"><strong>Nomor Telepon:</strong></div>
                                    <div class="col-lg-9 col-md-8">
                                        <a href="tel:{{ $customer->phone }}">{{ $customer->phone }}</a>
                                    </div>
                                </div>

                                @if($customer->province_name || $customer->regency_name)
                                <div class="row mb-3">
                                    <div class="col-lg-3 col-md-4 label"><strong>Wilayah:</strong></div>
                                    <div class="col-lg-9 col-md-8">
                                        <div class="d-flex flex-column gap-1">
                                            @if($customer->province_name)
                                                <span><i class="bi bi-geo-alt text-primary"></i> <strong>Provinsi:</strong> {{ $customer->province_name }}</span>
                                            @endif
                                            @if($customer->regency_name)
                                                <span><i class="bi bi-building text-success"></i> <strong>Kab/Kota:</strong> {{ $customer->regency_name }}</span>
                                            @endif
                                            @if($customer->district_name)
                                                <span><i class="bi bi-signpost text-info"></i> <strong>Kecamatan:</strong> {{ $customer->district_name }}</span>
                                            @endif
                                            @if($customer->village_name)
                                                <span><i class="bi bi-house-door text-warning"></i> <strong>Desa/Kel:</strong> {{ $customer->village_name }}</span>
                                            @endif
                                        </div>
                                    </div>
                                </div>
                                @endif

                                <div class="row mb-3">
                                    <div class="col-lg-3 col-md-4 label"><strong>Alamat Detail:</strong></div>
                                    <div class="col-lg-9 col-md-8">{{ $customer->address }}</div>
                                </div>

                                <div class="row mb-3">
                                    <div class="col-lg-3 col-md-4 label"><strong>Status:</strong></div>
                                    <div class="col-lg-9 col-md-8">
                                        <span class="badge bg-{{ $customer->status === 'active' ? 'success' : 'danger' }}">
                                            {{ $customer->status === 'active' ? 'Aktif' : 'Nonaktif' }}
                                        </span>
                                    </div>
                                </div>

                                <div class="row mb-3">
                                    <div class="col-lg-3 col-md-4 label"><strong>Bergabung:</strong></div>
                                    <div class="col-lg-9 col-md-8">{{ $customer->created_at->format('d M Y H:i') }}</div>
                                </div>

                                <div class="row mb-3">
                                    <div class="col-lg-3 col-md-4 label"><strong>Terakhir Update:</strong></div>
                                    <div class="col-lg-9 col-md-8">{{ $customer->updated_at->format('d M Y H:i') }}</div>
                                </div>

                                @if($customer->rumah_tampak_depan)
                                <div class="row mb-3">
                                    <div class="col-lg-3 col-md-4 label"><strong>Foto Rumah Tampak Depan:</strong></div>
                                    <div class="col-lg-9 col-md-8">
                                        <a href="{{ $customer->rumah_tampak_depan_url }}" target="_blank">
                                            <img src="{{ $customer->rumah_tampak_depan_url }}" 
                                                 alt="Rumah Tampak Depan" class="rounded" 
                                                 style="max-width: 300px; height: auto; cursor: pointer;"
                                                 title="Klik untuk melihat ukuran penuh">
                                        </a>
                                        <br>
                                        <small class="text-muted">Klik foto untuk melihat ukuran penuh</small>
                                    </div>
                                </div>
                                @endif
                            </div>

                            <!-- Customer Orders Tab -->
                            <div class="tab-pane fade" id="customer-orders">
                                <h5 class="mb-3">Riwayat Order Customer</h5>
                                
                                @php
                                    // Get orders for this customer (assuming we have orders relationship)
                                    $orders = \App\Models\Order::where('client_name', $customer->name)
                                                              ->orWhere('client_email', $customer->email)
                                                              ->orWhere('client_phone', $customer->phone)
                                                              ->orderBy('created_at', 'desc')
                                                              ->get();
                                @endphp

                                @if($orders->count() > 0)
                                    <div class="table-responsive">
                                        <table class="table table-striped">
                                            <thead>
                                                <tr>
                                                    <th>Order Number</th>
                                                    <th>Type</th>
                                                    <th>Title</th>
                                                    <th>Status</th>
                                                    <th>Created</th>
                                                    <th>Action</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                @foreach($orders as $order)
                                                    <tr>
                                                        <td>{{ $order->order_number }}</td>
                                                        <td>{!! $order->type_badge !!}</td>
                                                        <td>{{ Str::limit($order->title, 30) }}</td>
                                                        <td>{!! $order->status_badge !!}</td>
                                                        <td>{{ $order->created_at->format('d M Y') }}</td>
                                                        <td>
                                                            <a href="{{ route('orders.show', $order->id) }}" 
                                                               class="btn btn-sm btn-primary">
                                                                <i class="bi bi-eye"></i>
                                                            </a>
                                                        </td>
                                                    </tr>
                                                @endforeach
                                            </tbody>
                                        </table>
                                    </div>
                                @else
                                    <div class="text-center py-4">
                                        <i class="bi bi-clipboard-x display-4 text-muted"></i>
                                        <h6 class="mt-2">Belum Ada Order</h6>
                                        <p class="text-muted">Customer ini belum pernah membuat order</p>
                                    </div>
                                @endif
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Action Buttons -->
                <div class="card">
                    <div class="card-body">
                        <div class="d-flex justify-content-between align-items-center">
                            <a href="{{ route('data-customer.index') }}" class="btn btn-secondary">
                                <i class="bi bi-arrow-left"></i> Kembali ke Daftar
                            </a>
                            
                            <div>
                                <a href="{{ route('data-customer.edit', $customer->id) }}" class="btn btn-warning me-2">
                                    <i class="bi bi-pencil"></i> Edit Customer
                                </a>
                                
                                <form action="{{ route('data-customer.toggle-status', $customer->id) }}" 
                                      method="POST" class="d-inline">
                                    @csrf
                                    @method('PUT')
                                    <button type="submit" class="btn btn-info me-2">
                                        <i class="bi bi-toggle-{{ $customer->status === 'active' ? 'on' : 'off' }}"></i>
                                        {{ $customer->status === 'active' ? 'Nonaktifkan' : 'Aktifkan' }}
                                    </button>
                                </form>
                                
                                <a href="{{ route('orders.create') }}?customer_id={{ $customer->id }}" class="btn btn-primary">
                                    <i class="bi bi-plus-circle"></i> Buat Order untuk Customer Ini
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
@endsection