@extends('layouts.app')
@section('title', 'Hotel Settings')
@section('page-title', 'Hotel Settings')

@section('content')
<div class="page-header">
    <div>
        <div class="breadcrumb"><a href="{{ route('hotel.dashboard') }}">Dashboard</a><span>/</span>Settings</div>
        <h1>Hotel Settings</h1>
        <p>Manage your hotel profile, branding, and receipt preferences.</p>
    </div>
</div>

<div class="row">
    <div class="col-md-8">
        <form method="POST" action="{{ route('hotel.settings.update') }}" enctype="multipart/form-data">
            @csrf
            <div class="card">
                <div class="card-header"><span class="card-title">Basic Information</span></div>
                <div class="card-body">
                    <div class="form-group">
                        <label class="form-label">Hotel Name</label>
                        <input type="text" name="name" class="form-control" value="{{ old('name', $hotel->name) }}" required>
                    </div>
                    <div class="form-row">
                        <div class="form-group">
                            <label class="form-label">Phone</label>
                            <input type="text" name="phone" class="form-control" value="{{ old('phone', $hotel->phone) }}">
                        </div>
                        <div class="form-group">
                            <label class="form-label">Email</label>
                            <input type="email" name="email" class="form-control" value="{{ old('email', $hotel->email) }}">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="form-label">Address</label>
                        <input type="text" name="address" class="form-control" value="{{ old('address', $hotel->address) }}">
                    </div>
                    <div class="form-row">
                        <div class="form-group">
                            <label class="form-label">City</label>
                            <input type="text" name="city" class="form-control" value="{{ old('city', $hotel->city) }}">
                        </div>
                        <div class="form-group">
                            <label class="form-label">State</label>
                            <input type="text" name="state" class="form-control" value="{{ old('state', $hotel->state) }}">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="form-label">Website</label>
                        <input type="url" name="website" class="form-control" value="{{ old('website', $hotel->website) }}" placeholder="https://yourhotel.com">
                    </div>
                </div>
            </div>

            <div class="card">
                <div class="card-header"><span class="card-title">Branding & Receipt</span></div>
                <div class="card-body">
                    <div class="form-group">
                        <label class="form-label">Hotel Logo</label>
                        <input type="file" name="logo" class="form-control" accept="image/*">
                        @if($hotel->logo)
                            <div class="mt-2">
                                <img src="{{ asset('storage/' . $hotel->logo) }}" alt="Logo" style="max-height:60px;">
                                <small class="text-muted d-block">Current logo</small>
                            </div>
                        @endif
                    </div>
                    <div class="form-group">
                        <label class="form-label">Favicon</label>
                        <input type="file" name="favicon" class="form-control" accept="image/*">
                        @if($hotel->favicon)
                            <div class="mt-2">
                                <small class="text-muted">Current favicon uploaded</small>
                            </div>
                        @endif
                    </div>
                    <div class="form-row">
                        <div class="form-group">
                            <label class="form-label">Receipt Template</label>
                            <select name="receipt_template" class="form-control">
                                <option value="standard" {{ ($hotel->receipt_template ?? 'standard') == 'standard' ? 'selected' : '' }}>Standard (80mm)</option>
                                <option value="compact" {{ ($hotel->receipt_template ?? 'standard') == 'compact' ? 'selected' : '' }}>Compact (58mm)</option>
                                <option value="mini" {{ ($hotel->receipt_template ?? 'standard') == 'mini' ? 'selected' : '' }}>Mini (40mm)</option>
                            </select>
                        </div>
                        <div class="form-group">
                            <label class="form-label">WhatsApp Receipt</label>
                            <select name="whatsapp_enabled" class="form-control">
                                <option value="1" {{ ($hotel->whatsapp_enabled ?? true) ? 'selected' : '' }}>Enabled</option>
                                <option value="0" {{ ($hotel->whatsapp_enabled ?? true) ? '' : 'selected' }}>Disabled</option>
                            </select>
                        </div>
                    </div>
                </div>
            </div>

            <div class="card">
                <div class="card-header"><span class="card-title">Receipt Footer Message</span></div>
                <div class="card-body">
                    <div class="form-group">
                        <label class="form-label">Thank You Message</label>
                        <textarea name="receipt_footer" class="form-control" rows="2" placeholder="Thank you for choosing {{ $hotel->name }}">{{ $settings['receipt_footer']->value ?? 'Thank you for choosing our hotel.' }}</textarea>
                        <small class="text-muted">This appears at the bottom of every receipt.</small>
                    </div>
                </div>
            </div>

            <div style="display:flex;gap:8px;justify-content:flex-end;margin-bottom:30px;">
                <button type="submit" class="btn btn-primary"><i class="fas fa-save"></i> Save Settings</button>
            </div>
        </form>
    </div>

    <div class="col-md-4">
        <div class="card">
            <div class="card-header"><span class="card-title">Your Plan</span></div>
            <div class="card-body">
                @php
                    $subscription = $hotel->activeSubscription;
                    $plan = $subscription->plan ?? null;
                @endphp
                @if($plan)
                    <h3>{{ $plan->name }}</h3>
                    <p><strong>Features:</strong></p>
                    <ul>
                        <li>Staff: {{ $plan->max_staff == 999 ? 'Unlimited' : $plan->max_staff }}</li>
                        <li>Commission: {{ $plan->commission_rate }}%</li>
                        <li>Reports: {{ $plan->report_days == 9999 ? 'Unlimited' : $plan->report_days }} days</li>
                    </ul>
                @else
                    <p>No active subscription. <a href="{{ route('hotel.subscription.plans') }}">Subscribe now</a></p>
                @endif
            </div>
        </div>

        <div class="card mt-3">
            <div class="card-header"><span class="card-title">Need Help?</span></div>
            <div class="card-body">
                <p>Contact support: support@hotelmanagementboard.com</p>
                <p>Or upgrade your plan for priority support.</p>
            </div>
        </div>

        <div class="card mt-3">
            <div class="card-header"><span class="card-title">📱 Booking Widget</span></div>
            <div class="card-body">
                <p>Embed this code on your website to accept online bookings:</p>
                <div style="background:#1f2937;color:#10b981;padding:12px;border-radius:8px;font-family:monospace;font-size:12px;overflow-x:auto;">
                    <code id="widgetCode">&lt;script src="{{ url('/widget/' . $hotel->slug . '/script.js') }}"&gt;&lt;/script&gt;</code>
                </div>
                <button onclick="copyWidgetCode()" class="btn btn-primary btn-sm" style="margin-top:10px;">
                    <i class="fas fa-copy"></i> Copy Code
                </button>
                <div class="mt-3">
                    <a href="{{ url('/widget/' . $hotel->slug . '/embed') }}" target="_blank" class="btn btn-outline btn-sm">
                        <i class="fas fa-eye"></i> Preview Widget
                    </a>
                </div>
                <p class="mt-3 text-muted" style="font-size:12px;">Paste this code anywhere on your website where you want the booking form to appear.</p>
            </div>
        </div>
    </div>
</div>

@push('scripts')
<script>
function copyWidgetCode() {
    var code = document.getElementById('widgetCode').innerText;
    navigator.clipboard.writeText(code);
    alert('Widget code copied to clipboard!');
}
</script>
@endpush
@endsection