@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">
                        Booking Artist
                    </h2>
                    <div class="text-muted mt-1">Pilih tanggal dan waktu untuk booking</div>
                </div>
                <div class="col-auto ms-auto d-print-none">
                    <div class="btn-list">
                        <a href="{{ route('user.bookings.artists') }}"
                            class="btn btn-outline-primary d-none d-sm-inline-block">
                            <i class="ti ti-arrow-left me-2"></i>
                            Kembali ke Daftar Artist
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="page-body">
        <div class="container-xl">
            <div class="row row-cards">
                <div class="col-lg-8">
                    <div class="card">
                        <div class="card-header">
                            <h3 class="card-title">Pilih Jadwal</h3>
                        </div>
                        <div class="card-body">
                            @php
                                // Dummy artist data
                                $artist = [
                                    'id' => $artistId ?? 1,
                                    'name' => 'Sarah Melody',
                                    'avatar' => 'https://picsum.photos/200/200?random=1',
                                    'genre' => 'Pop, R&B',
                                    'rating' => 4.8,
                                    'price_per_hour' => 500000,
                                    'description' =>
                                        'Vocalist dengan suara merdu dan pengalaman 5 tahun di industri musik.',
                                ];

                                // Generate available time slots for next 7 days
                                $availableSlots = [];
                                $currentDate = now();

                                for ($day = 0; $day < 7; $day++) {
                                    $date = $currentDate->copy()->addDays($day);
                                    $daySlots = [];

                                    // Generate time slots from 9 AM to 9 PM
                                    for ($hour = 9; $hour <= 21; $hour++) {
                                        $timeSlot = $date->copy()->setTime($hour, 0);

                                        // Randomly make some slots unavailable
                                        $isAvailable = rand(0, 10) > 3; // 70% chance of being available

                                        $daySlots[] = [
                                            'time' => $timeSlot->format('H:i'),
                                            'datetime' => $timeSlot->format('Y-m-d H:i:s'),
                                            'available' => $isAvailable,
                                            'booked' => !$isAvailable,
                                        ];
                                    }

                                    $availableSlots[$date->format('Y-m-d')] = [
                                        'date' => $date,
                                        'formatted_date' => $date->format('d M Y'),
                                        'day_name' => $date->format('l'),
                                        'slots' => $daySlots,
                                    ];
                                }
                            @endphp

                            <!-- Artist Info -->
                            <div class="card mb-4">
                                <div class="card-body">
                                    <div class="d-flex align-items-center">
                                        <span class="avatar avatar-lg me-3"
                                            style="background-image: url('{{ $artist['avatar'] }}')"></span>
                                        <div>
                                            <h4 class="mb-1">{{ $artist['name'] }}</h4>
                                            <div class="text-muted">{{ $artist['genre'] }}</div>
                                            <div class="d-flex align-items-center mt-1">
                                                <div class="text-warning me-1">
                                                    @for ($i = 1; $i <= 5; $i++)
                                                        <i
                                                            class="ti ti-star{{ $i <= $artist['rating'] ? '-filled' : '' }}"></i>
                                                    @endfor
                                                </div>
                                                <span class="text-muted small">({{ $artist['rating'] }})</span>
                                            </div>
                                            <div class="mt-2">
                                                <span class="badge bg-primary">Rp
                                                    {{ number_format($artist['price_per_hour']) }}/jam</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!-- Calendar -->
                            <div class="calendar-container">
                                @foreach ($availableSlots as $dateKey => $dayData)
                                    <div class="day-schedule mb-4">
                                        <h5 class="mb-3">
                                            <i class="ti ti-calendar me-2"></i>
                                            {{ $dayData['day_name'] }}, {{ $dayData['formatted_date'] }}
                                        </h5>

                                        <div class="row">
                                            @foreach ($dayData['slots'] as $slot)
                                                <div class="col-md-3 col-sm-4 col-6 mb-2">
                                                    <button
                                                        class="btn w-100 time-slot {{ $slot['available'] ? 'btn-outline-primary' : 'btn-outline-secondary' }}"
                                                        data-datetime="{{ $slot['datetime'] }}"
                                                        data-time="{{ $slot['time'] }}"
                                                        data-date="{{ $dayData['formatted_date'] }}"
                                                        {{ !$slot['available'] ? 'disabled' : '' }}
                                                        onclick="selectTimeSlot(this, '{{ $slot['datetime'] }}', '{{ $slot['time'] }}', '{{ $dayData['formatted_date'] }}')">
                                                        {{ $slot['time'] }}
                                                        @if (!$slot['available'])
                                                            <i class="ti ti-x ms-1"></i>
                                                        @endif
                                                    </button>
                                                </div>
                                            @endforeach
                                        </div>
                                    </div>
                                @endforeach
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-lg-4">
                    <div class="card">
                        <div class="card-header">
                            <h3 class="card-title">Detail Booking</h3>
                        </div>
                        <div class="card-body">
                            <form id="bookingForm" action="{{ route('user.bookings.store') }}" method="POST">
                                @csrf
                                <input type="hidden" name="artist_id" value="{{ $artist['id'] }}">
                                <input type="hidden" name="booking_datetime" id="booking_datetime">

                                <div class="mb-3">
                                    <label class="form-label">Artist</label>
                                    <div class="form-control-plaintext">{{ $artist['name'] }}</div>
                                </div>

                                <div class="mb-3">
                                    <label class="form-label">Tanggal & Waktu</label>
                                    <div class="form-control-plaintext" id="selected_datetime">Pilih waktu di kalender</div>
                                </div>

                                <div class="mb-3">
                                    <label class="form-label">Durasi (Jam)</label>
                                    <select class="form-select" name="duration" id="duration" required>
                                        <option value="">Pilih durasi</option>
                                        <option value="1">1 Jam</option>
                                        <option value="2">2 Jam</option>
                                        <option value="3">3 Jam</option>
                                        <option value="4">4 Jam</option>
                                    </select>
                                </div>

                                <div class="mb-3">
                                    <label class="form-label">Tipe Acara</label>
                                    <select class="form-select" name="event_type" required>
                                        <option value="">Pilih tipe acara</option>
                                        <option value="recording">Recording Studio</option>
                                        <option value="live_performance">Live Performance</option>
                                        <option value="rehearsal">Rehearsal</option>
                                        <option value="collaboration">Collaboration</option>
                                        <option value="other">Lainnya</option>
                                    </select>
                                </div>

                                <div class="mb-3">
                                    <label class="form-label">Catatan (Opsional)</label>
                                    <textarea class="form-control" name="notes" rows="3" placeholder="Tambahkan catatan khusus untuk artist..."></textarea>
                                </div>

                                <div class="mb-3">
                                    <label class="form-label">Total Biaya</label>
                                    <div class="form-control-plaintext" id="total_cost">Rp 0</div>
                                </div>

                                <div class="d-grid">
                                    <button type="submit" class="btn btn-primary" id="submitBtn" disabled>
                                        <i class="ti ti-calendar-check me-2"></i>Submit Booking
                                    </button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('script')
    <script>
        let selectedSlot = null;
        const pricePerHour = {{ $artist['price_per_hour'] }};

        function selectTimeSlot(element, datetime, time, date) {
            // Remove previous selection
            document.querySelectorAll('.time-slot').forEach(btn => {
                btn.classList.remove('btn-primary');
                btn.classList.add('btn-outline-primary');
            });

            // Add selection to current button
            element.classList.remove('btn-outline-primary');
            element.classList.add('btn-primary');

            // Update form
            document.getElementById('booking_datetime').value = datetime;
            document.getElementById('selected_datetime').textContent = `${date} - ${time}`;

            selectedSlot = {
                datetime,
                time,
                date
            };
            updateTotalCost();
            checkFormValidity();
        }

        function updateTotalCost() {
            const duration = document.getElementById('duration').value;
            const total = duration * pricePerHour;
            document.getElementById('total_cost').textContent = `Rp ${total.toLocaleString('id-ID')}`;
        }

        function checkFormValidity() {
            const datetime = document.getElementById('booking_datetime').value;
            const duration = document.getElementById('duration').value;
            const eventType = document.querySelector('select[name="event_type"]').value;

            const isValid = datetime && duration && eventType;
            document.getElementById('submitBtn').disabled = !isValid;
        }

        document.addEventListener('DOMContentLoaded', function() {
            const durationSelect = document.getElementById('duration');
            const eventTypeSelect = document.querySelector('select[name="event_type"]');

            durationSelect.addEventListener('change', function() {
                updateTotalCost();
                checkFormValidity();
            });

            eventTypeSelect.addEventListener('change', checkFormValidity);

            // Form submission
            document.getElementById('bookingForm').addEventListener('submit', function(e) {
                e.preventDefault();

                if (!selectedSlot) {
                    Swal.fire({
                        icon: 'warning',
                        title: 'Pilih Waktu',
                        text: 'Silakan pilih waktu booking terlebih dahulu'
                    });
                    return;
                }

                // Show confirmation
                Swal.fire({
                    title: 'Konfirmasi Booking',
                    text: `Apakah Anda yakin ingin melakukan booking untuk ${selectedSlot.date} pukul ${selectedSlot.time}?`,
                    icon: 'question',
                    showCancelButton: true,
                    confirmButtonText: 'Ya, Booking Sekarang',
                    cancelButtonText: 'Batal'
                }).then((result) => {
                    if (result.isConfirmed) {
                        // Submit form
                        this.submit();
                    }
                });
            });
        });
    </script>
@endpush