@extends('layouts.app')

@section('content')
    <div class="w-100" style="height: 50px;"></div>
    <div class="page-header d-print-none">
        <div class="container-xl">
            <div class="row g-2 align-items-center">
                <div class="col">
                    <h2 class="page-title">
                        Riwayat Booking Saya
                    </h2>
                    <div class="text-muted mt-1">Lihat semua booking yang telah Anda lakukan</div>
                </div>
                <div class="col-auto ms-auto d-print-none">
                    <div class="btn-list">
                        <a href="{{ route('user.bookings.artists') }}" class="btn btn-primary d-none d-sm-inline-block">
                            <i class="ti ti-plus me-2"></i>Booking Artist Baru
                        </a>
                        <a href="{{ route('user.dashboard') }}" class="btn btn-outline-primary d-none d-sm-inline-block">
                            <i class="ti ti-arrow-left me-2"></i>
                            Kembali ke Dashboard
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="page-body">
        <div class="container-xl">
            <div class="row row-cards">
                <div class="col-lg-12">
                    <div class="card">
                        <div class="card-header">
                            <h3 class="card-title">Daftar Booking</h3>
                            <div class="card-actions">
                                <div class="btn-group">
                                    <button class="btn btn-outline-primary btn-sm active" data-filter="all">Semua</button>
                                    <button class="btn btn-outline-warning btn-sm" data-filter="pending">Pending</button>
                                    <button class="btn btn-outline-success btn-sm" data-filter="approved">Approved</button>
                                    <button class="btn btn-outline-danger btn-sm" data-filter="rejected">Rejected</button>
                                    <button class="btn btn-outline-info btn-sm" data-filter="completed">Completed</button>
                                </div>
                            </div>
                        </div>
                        <div class="card-body">
                            @php
                                // Dummy booking data for current user
                                $myBookings = [
                                    [
                                        'id' => 1,
                                        'artist_name' => 'Sarah Melody',
                                        'artist_avatar' => 'https://picsum.photos/200/200?random=1',
                                        'event_type' => 'Recording Studio',
                                        'datetime' => '2024-01-15 14:00:00',
                                        'duration' => 2,
                                        'total_cost' => 1000000,
                                        'notes' => 'Perlu vocalist untuk recording lagu pop',
                                        'status' => 'pending',
                                        'created_at' => '2024-01-10 10:30:00',
                                        'booking_code' => 'BK-2024-001',
                                    ],
                                    [
                                        'id' => 2,
                                        'artist_name' => 'Ahmad Rhythm',
                                        'artist_avatar' => 'https://picsum.photos/200/200?random=2',
                                        'event_type' => 'Live Performance',
                                        'datetime' => '2024-01-18 19:00:00',
                                        'duration' => 3,
                                        'total_cost' => 1350000,
                                        'notes' => 'Acara wedding, perlu 3 lagu',
                                        'status' => 'approved',
                                        'created_at' => '2024-01-08 15:20:00',
                                        'booking_code' => 'BK-2024-002',
                                    ],
                                    [
                                        'id' => 3,
                                        'artist_name' => 'Budi Bass',
                                        'artist_avatar' => 'https://picsum.photos/200/200?random=4',
                                        'event_type' => 'Rehearsal',
                                        'datetime' => '2024-01-20 16:00:00',
                                        'duration' => 1,
                                        'total_cost' => 400000,
                                        'notes' => 'Rehearsal untuk acara corporate',
                                        'status' => 'completed',
                                        'created_at' => '2024-01-12 09:15:00',
                                        'booking_code' => 'BK-2024-003',
                                    ],
                                    [
                                        'id' => 4,
                                        'artist_name' => 'Diana Voice',
                                        'artist_avatar' => 'https://picsum.photos/200/200?random=5',
                                        'event_type' => 'Collaboration',
                                        'datetime' => '2024-01-22 13:00:00',
                                        'duration' => 4,
                                        'total_cost' => 3000000,
                                        'notes' => 'Kolaborasi untuk project album baru',
                                        'status' => 'rejected',
                                        'created_at' => '2024-01-09 14:45:00',
                                        'booking_code' => 'BK-2024-004',
                                    ],
                                    [
                                        'id' => 5,
                                        'artist_name' => 'Rizky Drums',
                                        'artist_avatar' => 'https://picsum.photos/200/200?random=6',
                                        'event_type' => 'Recording Studio',
                                        'datetime' => '2024-01-25 10:00:00',
                                        'duration' => 2,
                                        'total_cost' => 700000,
                                        'notes' => 'Recording untuk single baru',
                                        'status' => 'approved',
                                        'created_at' => '2024-01-11 11:30:00',
                                        'booking_code' => 'BK-2024-005',
                                    ],
                                ];
                            @endphp

                            @foreach ($myBookings as $booking)
                                <div class="booking-item mb-4 p-4 border rounded" data-status="{{ $booking['status'] }}">
                                    <div class="d-flex align-items-start">
                                        <span class="avatar avatar-lg me-3"
                                            style="background-image: url('{{ $booking['artist_avatar'] }}')"></span>
                                        <div class="flex-grow-1">
                                            <div class="d-flex justify-content-between align-items-start mb-3">
                                                <div>
                                                    <h4 class="mb-1">{{ $booking['artist_name'] }}</h4>
                                                    <div class="text-muted">
                                                        <i class="ti ti-tag me-1"></i>
                                                        {{ ucfirst(str_replace('_', ' ', $booking['event_type'])) }}
                                                        <span class="mx-2">•</span>
                                                        <i class="ti ti-calendar me-1"></i>
                                                        {{ \Carbon\Carbon::parse($booking['datetime'])->format('d M Y H:i') }}
                                                        <span class="mx-2">•</span>
                                                        <i class="ti ti-clock me-1"></i>
                                                        {{ $booking['duration'] }} jam
                                                    </div>
                                                    <div class="mt-1">
                                                        <span
                                                            class="badge bg-secondary">{{ $booking['booking_code'] }}</span>
                                                    </div>
                                                </div>
                                                <div class="text-end">
                                                    <div class="fw-bold text-primary fs-5">Rp
                                                        {{ number_format($booking['total_cost']) }}</div>
                                                    <span
                                                        class="badge bg-{{ $booking['status'] == 'pending'
                                                            ? 'warning'
                                                            : ($booking['status'] == 'approved'
                                                                ? 'success'
                                                                : ($booking['status'] == 'rejected'
                                                                    ? 'danger'
                                                                    : 'info')) }} fs-6">
                                                        {{ ucfirst($booking['status']) }}
                                                    </span>
                                                </div>
                                            </div>

                                            @if ($booking['notes'])
                                                <div class="mb-3">
                                                    <small class="text-muted">Catatan:</small>
                                                    <div class="small">{{ $booking['notes'] }}</div>
                                                </div>
                                            @endif

                                            <div class="d-flex justify-content-between align-items-center">
                                                <div class="text-muted small">
                                                    <i class="ti ti-calendar-time me-1"></i>
                                                    Booked on:
                                                    {{ \Carbon\Carbon::parse($booking['created_at'])->format('d M Y H:i') }}
                                                </div>

                                                <div class="btn-group">
                                                    @if ($booking['status'] == 'pending')
                                                        <button class="btn btn-outline-warning btn-sm" disabled>
                                                            <i class="ti ti-clock me-1"></i>Menunggu Konfirmasi
                                                        </button>
                                                        <button class="btn btn-outline-danger btn-sm"
                                                            onclick="cancelBooking({{ $booking['id'] }})">
                                                            <i class="ti ti-x me-1"></i>Cancel
                                                        </button>
                                                    @elseif($booking['status'] == 'approved')
                                                        <button class="btn btn-outline-success btn-sm" disabled>
                                                            <i class="ti ti-check me-1"></i>Confirmed
                                                        </button>
                                                        <button class="btn btn-outline-primary btn-sm"
                                                            onclick="viewDetails({{ $booking['id'] }})">
                                                            <i class="ti ti-eye me-1"></i>Details
                                                        </button>
                                                    @elseif($booking['status'] == 'completed')
                                                        <button class="btn btn-outline-info btn-sm" disabled>
                                                            <i class="ti ti-check me-1"></i>Completed
                                                        </button>
                                                        <button class="btn btn-outline-primary btn-sm"
                                                            onclick="viewDetails({{ $booking['id'] }})">
                                                            <i class="ti ti-eye me-1"></i>Details
                                                        </button>
                                                    @else
                                                        <button class="btn btn-outline-danger btn-sm" disabled>
                                                            <i class="ti ti-x me-1"></i>Rejected
                                                        </button>
                                                        <button class="btn btn-outline-primary btn-sm"
                                                            onclick="viewDetails({{ $booking['id'] }})">
                                                            <i class="ti ti-eye me-1"></i>Details
                                                        </button>
                                                    @endif
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('script')
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // Filter functionality
            const filterButtons = document.querySelectorAll('[data-filter]');
            const bookingItems = document.querySelectorAll('.booking-item');

            filterButtons.forEach(button => {
                button.addEventListener('click', function() {
                    const filter = this.getAttribute('data-filter');

                    // Update active button
                    filterButtons.forEach(btn => btn.classList.remove('active'));
                    this.classList.add('active');

                    // Filter items
                    bookingItems.forEach(item => {
                        if (filter === 'all' || item.getAttribute('data-status') ===
                            filter) {
                            item.style.display = 'block';
                        } else {
                            item.style.display = 'none';
                        }
                    });
                });
            });
        });

        function cancelBooking(bookingId) {
            Swal.fire({
                title: 'Cancel Booking?',
                text: 'Apakah Anda yakin ingin membatalkan booking ini?',
                icon: 'warning',
                showCancelButton: true,
                confirmButtonText: 'Ya, Cancel',
                cancelButtonText: 'Batal'
            }).then((result) => {
                if (result.isConfirmed) {
                    // Simulate API call
                    setTimeout(() => {
                        Swal.fire({
                            icon: 'success',
                            title: 'Booking Cancelled',
                            text: 'Booking berhasil dibatalkan',
                            showConfirmButton: false,
                            timer: 1500
                        }).then(() => {
                            location.reload();
                        });
                    }, 500);
                }
            });
        }

        function viewDetails(bookingId) {
            Swal.fire({
                title: 'Detail Booking',
                html: `
            <div class="text-start">
                <p><strong>Booking ID:</strong> BK-2024-00${bookingId}</p>
                <p><strong>Status:</strong> <span class="badge bg-success">Approved</span></p>
                <p><strong>Tanggal:</strong> 15 Januari 2024</p>
                <p><strong>Waktu:</strong> 14:00 - 16:00</p>
                <p><strong>Durasi:</strong> 2 jam</p>
                <p><strong>Total:</strong> Rp 1,000,000</p>
            </div>
        `,
                icon: 'info',
                confirmButtonText: 'Tutup'
            });
        }
    </script>
@endpush