@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">
                        Pengaturan Booking
                    </h2>
                    <div class="text-muted mt-1">Kelola ketersediaan dan preferensi booking Anda</div>
                </div>
                <div class="col-auto ms-auto d-print-none">
                    <div class="btn-list">
                        <a href="{{ route('user.bookings.artist-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">
                <!-- Pricing Settings -->
                <div class="col-lg-6">
                    <div class="card">
                        <div class="card-header">
                            <h3 class="card-title">
                                <i class="ti ti-currency-dollar me-2"></i>
                                Pengaturan Harga
                            </h3>
                        </div>
                        <div class="card-body">
                            <form id="pricingForm">
                                <div class="mb-3">
                                    <label class="form-label">Harga per Jam (Rp)</label>
                                    <input type="number" class="form-control" id="pricePerHour" value="500000"
                                        min="0">
                                    <div class="form-hint">Harga dasar untuk booking per jam</div>
                                </div>

                                <div class="mb-3">
                                    <label class="form-label">Diskon untuk Booking 2+ Jam (%)</label>
                                    <input type="number" class="form-control" id="bulkDiscount" value="10"
                                        min="0" max="50">
                                    <div class="form-hint">Diskon untuk booking durasi panjang</div>
                                </div>

                                <div class="mb-3">
                                    <label class="form-label">Deposit yang Diperlukan (%)</label>
                                    <input type="number" class="form-control" id="depositPercentage" value="25"
                                        min="0" max="100">
                                    <div class="form-hint">Persentase deposit untuk konfirmasi booking</div>
                                </div>

                                <div class="d-grid">
                                    <button type="submit" class="btn btn-primary">
                                        <i class="ti ti-device-floppy me-2"></i>Simpan Pengaturan Harga
                                    </button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>

                <!-- Availability Settings -->
                <div class="col-lg-6">
                    <div class="card">
                        <div class="card-header">
                            <h3 class="card-title">
                                <i class="ti ti-calendar me-2"></i>
                                Pengaturan Ketersediaan
                            </h3>
                        </div>
                        <div class="card-body">
                            <form id="availabilityForm">
                                <div class="mb-3">
                                    <label class="form-label">Jam Kerja</label>
                                    <div class="row">
                                        <div class="col-6">
                                            <label class="form-label small">Dari</label>
                                            <input type="time" class="form-control" id="workStart" value="09:00">
                                        </div>
                                        <div class="col-6">
                                            <label class="form-label small">Sampai</label>
                                            <input type="time" class="form-control" id="workEnd" value="17:00">
                                        </div>
                                    </div>
                                </div>

                                <div class="mb-3">
                                    <label class="form-label">Hari Kerja</label>
                                    <div class="row g-2">
                                        <div class="col-6">
                                            <label class="form-check">
                                                <input class="form-check-input" type="checkbox" id="monday" checked>
                                                <span class="form-check-label">Senin</span>
                                            </label>
                                        </div>
                                        <div class="col-6">
                                            <label class="form-check">
                                                <input class="form-check-input" type="checkbox" id="tuesday" checked>
                                                <span class="form-check-label">Selasa</span>
                                            </label>
                                        </div>
                                        <div class="col-6">
                                            <label class="form-check">
                                                <input class="form-check-input" type="checkbox" id="wednesday" checked>
                                                <span class="form-check-label">Rabu</span>
                                            </label>
                                        </div>
                                        <div class="col-6">
                                            <label class="form-check">
                                                <input class="form-check-input" type="checkbox" id="thursday" checked>
                                                <span class="form-check-label">Kamis</span>
                                            </label>
                                        </div>
                                        <div class="col-6">
                                            <label class="form-check">
                                                <input class="form-check-input" type="checkbox" id="friday" checked>
                                                <span class="form-check-label">Jumat</span>
                                            </label>
                                        </div>
                                        <div class="col-6">
                                            <label class="form-check">
                                                <input class="form-check-input" type="checkbox" id="saturday">
                                                <span class="form-check-label">Sabtu</span>
                                            </label>
                                        </div>
                                        <div class="col-6">
                                            <label class="form-check">
                                                <input class="form-check-input" type="checkbox" id="sunday">
                                                <span class="form-check-label">Minggu</span>
                                            </label>
                                        </div>
                                    </div>
                                </div>

                                <div class="mb-3">
                                    <label class="form-label">Durasi Booking Minimum (Jam)</label>
                                    <input type="number" class="form-control" id="minDuration" value="1"
                                        min="1" max="24">
                                </div>

                                <div class="mb-3">
                                    <label class="form-label">Durasi Booking Maksimum (Jam)</label>
                                    <input type="number" class="form-control" id="maxDuration" value="8"
                                        min="1" max="24">
                                </div>

                                <div class="d-grid">
                                    <button type="submit" class="btn btn-primary">
                                        <i class="ti ti-device-floppy me-2"></i>Simpan Pengaturan Ketersediaan
                                    </button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>

                <!-- Booking Preferences -->
                <div class="col-lg-12">
                    <div class="card">
                        <div class="card-header">
                            <h3 class="card-title">
                                <i class="ti ti-settings me-2"></i>
                                Preferensi Booking
                            </h3>
                        </div>
                        <div class="card-body">
                            <form id="preferencesForm">
                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="mb-3">
                                            <label class="form-label">Jenis Event yang Diterima</label>
                                            <div class="form-check">
                                                <input class="form-check-input" type="checkbox" id="recordingStudio"
                                                    checked>
                                                <label class="form-check-label">Recording Studio</label>
                                            </div>
                                            <div class="form-check">
                                                <input class="form-check-input" type="checkbox" id="livePerformance"
                                                    checked>
                                                <label class="form-check-label">Live Performance</label>
                                            </div>
                                            <div class="form-check">
                                                <input class="form-check-input" type="checkbox" id="musicVideo" checked>
                                                <label class="form-check-label">Music Video</label>
                                            </div>
                                            <div class="form-check">
                                                <input class="form-check-input" type="checkbox" id="rehearsal" checked>
                                                <label class="form-check-label">Rehearsal</label>
                                            </div>
                                            <div class="form-check">
                                                <input class="form-check-input" type="checkbox" id="workshop" checked>
                                                <label class="form-check-label">Workshop</label>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="col-md-6">
                                        <div class="mb-3">
                                            <label class="form-label">Pengaturan Notifikasi</label>
                                            <div class="form-check">
                                                <input class="form-check-input" type="checkbox" id="emailNotifications"
                                                    checked>
                                                <label class="form-check-label">Notifikasi Email</label>
                                            </div>
                                            <div class="form-check">
                                                <input class="form-check-input" type="checkbox" id="smsNotifications">
                                                <label class="form-check-label">Notifikasi SMS</label>
                                            </div>
                                            <div class="form-check">
                                                <input class="form-check-input" type="checkbox" id="pushNotifications"
                                                    checked>
                                                <label class="form-check-label">Notifikasi Push</label>
                                            </div>
                                        </div>

                                        <div class="mb-3">
                                            <label class="form-label">Auto-Response untuk Booking</label>
                                            <textarea class="form-control" id="autoResponse" rows="3"
                                                placeholder="Pesan otomatis yang akan dikirim ke pelanggan...">Terima kasih atas booking Anda. Saya akan segera memproses permintaan Anda.</textarea>
                                        </div>
                                    </div>
                                </div>

                                <div class="d-grid">
                                    <button type="submit" class="btn btn-primary">
                                        <i class="ti ti-device-floppy me-2"></i>Simpan Preferensi
                                    </button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>

                <!-- Status Toggle -->
                <div class="col-lg-12">
                    <div class="card">
                        <div class="card-header">
                            <h3 class="card-title">
                                <i class="ti ti-toggle-left me-2"></i>
                                Status Booking
                            </h3>
                        </div>
                        <div class="card-body">
                            <div class="row align-items-center">
                                <div class="col-md-8">
                                    <h4>Terima Booking Baru</h4>
                                    <p class="text-muted">Aktifkan untuk menerima booking baru dari pelanggan</p>
                                </div>
                                <div class="col-md-4 text-end">
                                    <label class="form-check form-switch form-switch-lg">
                                        <input class="form-check-input" type="checkbox" id="acceptBookings" checked>
                                        <span class="form-check-label"></span>
                                    </label>
                                </div>
                            </div>

                            <div class="row align-items-center mt-3">
                                <div class="col-md-8">
                                    <h4>Mode Maintenance</h4>
                                    <p class="text-muted">Aktifkan untuk sementara menolak booking baru</p>
                                </div>
                                <div class="col-md-4 text-end">
                                    <label class="form-check form-switch form-switch-lg">
                                        <input class="form-check-input" type="checkbox" id="maintenanceMode">
                                        <span class="form-check-label"></span>
                                    </label>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('script')
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // Pricing Form
            document.getElementById('pricingForm').addEventListener('submit', function(e) {
                e.preventDefault();

                const formData = {
                    pricePerHour: document.getElementById('pricePerHour').value,
                    bulkDiscount: document.getElementById('bulkDiscount').value,
                    depositPercentage: document.getElementById('depositPercentage').value
                };

                // Simulate saving
                Swal.fire({
                    icon: 'success',
                    title: 'Berhasil!',
                    text: 'Pengaturan harga telah disimpan',
                    showConfirmButton: false,
                    timer: 2000
                });
            });

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

                const formData = {
                    workStart: document.getElementById('workStart').value,
                    workEnd: document.getElementById('workEnd').value,
                    workDays: {
                        monday: document.getElementById('monday').checked,
                        tuesday: document.getElementById('tuesday').checked,
                        wednesday: document.getElementById('wednesday').checked,
                        thursday: document.getElementById('thursday').checked,
                        friday: document.getElementById('friday').checked,
                        saturday: document.getElementById('saturday').checked,
                        sunday: document.getElementById('sunday').checked
                    },
                    minDuration: document.getElementById('minDuration').value,
                    maxDuration: document.getElementById('maxDuration').value
                };

                // Simulate saving
                Swal.fire({
                    icon: 'success',
                    title: 'Berhasil!',
                    text: 'Pengaturan ketersediaan telah disimpan',
                    showConfirmButton: false,
                    timer: 2000
                });
            });

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

                const formData = {
                    eventTypes: {
                        recordingStudio: document.getElementById('recordingStudio').checked,
                        livePerformance: document.getElementById('livePerformance').checked,
                        musicVideo: document.getElementById('musicVideo').checked,
                        rehearsal: document.getElementById('rehearsal').checked,
                        workshop: document.getElementById('workshop').checked
                    },
                    notifications: {
                        email: document.getElementById('emailNotifications').checked,
                        sms: document.getElementById('smsNotifications').checked,
                        push: document.getElementById('pushNotifications').checked
                    },
                    autoResponse: document.getElementById('autoResponse').value
                };

                // Simulate saving
                Swal.fire({
                    icon: 'success',
                    title: 'Berhasil!',
                    text: 'Preferensi booking telah disimpan',
                    showConfirmButton: false,
                    timer: 2000
                });
            });

            // Status Toggles
            document.getElementById('acceptBookings').addEventListener('change', function(e) {
                const isChecked = e.target.checked;
                const maintenanceMode = document.getElementById('maintenanceMode');

                if (!isChecked) {
                    maintenanceMode.checked = true;
                }

                Swal.fire({
                    icon: 'success',
                    title: 'Status Diperbarui!',
                    text: isChecked ? 'Sekarang menerima booking baru' :
                        'Tidak menerima booking baru',
                    showConfirmButton: false,
                    timer: 2000
                });
            });

            document.getElementById('maintenanceMode').addEventListener('change', function(e) {
                const isChecked = e.target.checked;
                const acceptBookings = document.getElementById('acceptBookings');

                if (isChecked) {
                    acceptBookings.checked = false;
                }

                Swal.fire({
                    icon: 'warning',
                    title: 'Mode Maintenance!',
                    text: isChecked ? 'Mode maintenance diaktifkan' :
                        'Mode maintenance dinonaktifkan',
                    showConfirmButton: false,
                    timer: 2000
                });
            });
        });
    </script>
@endpush