@extends('layouts.app')

@section('content')
<div class="content-wrapper">
    <div class="content-header">
        <div class="container-fluid">
            <div class="row mb-2">
                <div class="col-sm-6">
                    <h1 class="m-0">App Settings</h1>
                </div>
                <div class="col-sm-6">
                    <ol class="breadcrumb float-sm-right">
                        <li class="breadcrumb-item"><a href="{{ route('dashboard') }}">Dashboard</a></li>
                        <li class="breadcrumb-item active">Settings</li>
                    </ol>
                </div>
            </div>
        </div>
    </div>

    <section class="content">
        <div class="container-fluid">
            @if ($message = Session::get('success'))
                <div class="alert alert-success alert-dismissible fade show" role="alert">
                    <i class="fas fa-check-circle"></i> {{ $message }}
                    <button type="button" class="close" data-dismiss="alert">
                        <span>&times;</span>
                    </button>
                </div>
            @endif

            <form action="{{ route('admin.settings.update') }}" method="POST" enctype="multipart/form-data">
                @csrf
                @method('PUT')

                <!-- General Settings -->
                <div class="card card-primary mb-3">
                    <div class="card-header">
                        <h3 class="card-title">General Settings</h3>
                    </div>
                    <div class="card-body">
                        <div class="form-group">
                            <label for="app_name">Application Name <span class="text-danger">*</span></label>
                            <input type="text" class="form-control @error('app_name') is-invalid @enderror" 
                                id="app_name" name="app_name" 
                                value="{{ old('app_name', $settings->app_name ?? 'HappyiMart Billing') }}" required>
                            @error('app_name')
                                <span class="invalid-feedback">{{ $message }}</span>
                            @enderror
                        </div>

                        <div class="form-group">
                            <label for="app_description">Description</label>
                            <textarea class="form-control @error('app_description') is-invalid @enderror" 
                                id="app_description" name="app_description" rows="2">{{ old('app_description', $settings->app_description ?? '') }}</textarea>
                            @error('app_description')
                                <span class="invalid-feedback">{{ $message }}</span>
                            @enderror
                        </div>

                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="timezone">Timezone <span class="text-danger">*</span></label>
                                    <select class="form-control @error('timezone') is-invalid @enderror" 
                                        id="timezone" name="timezone" required>
                                        <option value="">-- Select Timezone --</option>
                                        @foreach(timezone_identifiers_list() as $tz)
                                            <option value="{{ $tz }}" 
                                                {{ old('timezone', $settings->timezone ?? 'Asia/Manila') === $tz ? 'selected' : '' }}>
                                                {{ $tz }}
                                            </option>
                                        @endforeach
                                    </select>
                                    @error('timezone')
                                        <span class="invalid-feedback">{{ $message }}</span>
                                    @enderror
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="currency_code">Default Currency</label>
                                    <input type="text" class="form-control @error('currency_code') is-invalid @enderror" 
                                        id="currency_code" name="currency_code" maxlength="3"
                                        value="{{ old('currency_code', $settings->currency_code ?? 'PHP') }}" 
                                        placeholder="PHP">
                                    @error('currency_code')
                                        <span class="invalid-feedback">{{ $message }}</span>
                                    @enderror
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Contact Information -->
                <div class="card card-info mb-3">
                    <div class="card-header">
                        <h3 class="card-title">Contact Information</h3>
                    </div>
                    <div class="card-body">
                        <div class="form-group">
                            <label for="app_email">Email Address <span class="text-danger">*</span></label>
                            <input type="email" class="form-control @error('app_email') is-invalid @enderror" 
                                id="app_email" name="app_email" 
                                value="{{ old('app_email', $settings->app_email ?? '') }}" required>
                            @error('app_email')
                                <span class="invalid-feedback">{{ $message }}</span>
                            @enderror
                        </div>

                        <div class="form-group">
                            <label for="support_email">Support Email</label>
                            <input type="email" class="form-control @error('support_email') is-invalid @enderror" 
                                id="support_email" name="support_email" 
                                value="{{ old('support_email', $settings->support_email ?? '') }}">
                            @error('support_email')
                                <span class="invalid-feedback">{{ $message }}</span>
                            @enderror
                        </div>

                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="app_phone">Phone Number</label>
                                    <input type="tel" class="form-control @error('app_phone') is-invalid @enderror" 
                                        id="app_phone" name="app_phone" 
                                        value="{{ old('app_phone', $settings->app_phone ?? '') }}">
                                    @error('app_phone')
                                        <span class="invalid-feedback">{{ $message }}</span>
                                    @enderror
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="support_phone">Support Phone</label>
                                    <input type="tel" class="form-control @error('support_phone') is-invalid @enderror" 
                                        id="support_phone" name="support_phone" 
                                        value="{{ old('support_phone', $settings->support_phone ?? '') }}">
                                    @error('support_phone')
                                        <span class="invalid-feedback">{{ $message }}</span>
                                    @enderror
                                </div>
                            </div>
                        </div>

                        <div class="form-group">
                            <label for="app_address">Address</label>
                            <textarea class="form-control @error('app_address') is-invalid @enderror" 
                                id="app_address" name="app_address" rows="2">{{ old('app_address', $settings->app_address ?? '') }}</textarea>
                            @error('app_address')
                                <span class="invalid-feedback">{{ $message }}</span>
                            @enderror
                        </div>

                        <div class="row">
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label for="app_province">Province</label>
                                    <select class="form-control @error('app_province') is-invalid @enderror"
                                        id="app_province" name="app_province">
                                        <option value="">-- Select Province --</option>
                                        @foreach($provinces as $province)
                                            <option value="{{ $province }}"
                                                {{ old('app_province', $settings->app_province) === $province ? 'selected' : '' }}>
                                                {{ $province }}
                                            </option>
                                        @endforeach
                                    </select>
                                    @error('app_province')
                                        <span class="invalid-feedback">{{ $message }}</span>
                                    @enderror
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label for="app_city">City / Municipality</label>
                                    <select class="form-control @error('app_city') is-invalid @enderror"
                                        id="app_city" name="app_city">
                                        <option value="">-- Select City --</option>
                                        @foreach($cities as $city)
                                            <option value="{{ $city }}"
                                                {{ old('app_city', $settings->app_city) === $city ? 'selected' : '' }}>
                                                {{ $city }}
                                            </option>
                                        @endforeach
                                    </select>
                                    @error('app_city')
                                        <span class="invalid-feedback">{{ $message }}</span>
                                    @enderror
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label for="app_barangay">Barangay</label>
                                    <select class="form-control @error('app_barangay') is-invalid @enderror"
                                        id="app_barangay" name="app_barangay">
                                        <option value="">-- Select Barangay --</option>
                                        @foreach($barangays as $barangay)
                                            <option value="{{ $barangay }}"
                                                {{ old('app_barangay', $settings->app_barangay) === $barangay ? 'selected' : '' }}>
                                                {{ $barangay }}
                                            </option>
                                        @endforeach
                                    </select>
                                    @error('app_barangay')
                                        <span class="invalid-feedback">{{ $message }}</span>
                                    @enderror
                                </div>
                            </div>
                        </div>

                        <div class="form-group">
                            <label for="app_country">Country</label>
                            <input type="text" class="form-control @error('app_country') is-invalid @enderror" 
                                id="app_country" name="app_country" 
                                value="{{ old('app_country', $settings->app_country ?? 'Philippines') }}">
                            @error('app_country')
                                <span class="invalid-feedback">{{ $message }}</span>
                            @enderror
                        </div>
                    </div>
                </div>

                <!-- Branding -->
                <div class="card card-warning mb-3">
                    <div class="card-header">
                        <h3 class="card-title">Branding</h3>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="app_logo">Logo</label>
                                    @if($settings->app_logo && Storage::disk('public')->exists($settings->app_logo))
                                        <div class="mb-2">
                                            <img src="{{ asset('storage/' . $settings->app_logo) }}" alt="Logo" style="max-width: 150px; max-height: 100px;">
                                        </div>
                                    @endif
                                    <input type="file" class="form-control @error('app_logo') is-invalid @enderror" 
                                        id="app_logo" name="app_logo" accept="image/*">
                                    <small class="form-text text-muted">Max 2MB. Accepted: JPG, PNG, GIF, SVG</small>
                                    @error('app_logo')
                                        <span class="invalid-feedback">{{ $message }}</span>
                                    @enderror
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="app_favicon">Favicon</label>
                                    @if($settings->app_favicon && Storage::disk('public')->exists($settings->app_favicon))
                                        <div class="mb-2">
                                            <img src="{{ asset('storage/' . $settings->app_favicon) }}" alt="Favicon" style="max-width: 64px; max-height: 64px;">
                                        </div>
                                    @endif
                                    <input type="file" class="form-control @error('app_favicon') is-invalid @enderror" 
                                        id="app_favicon" name="app_favicon" accept="image/*">
                                    <small class="form-text text-muted">Max 512KB. Accepted: JPG, PNG, ICO</small>
                                    @error('app_favicon')
                                        <span class="invalid-feedback">{{ $message }}</span>
                                    @enderror
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- SMS Configuration -->
                <div class="card card-success mb-3">
                    <div class="card-header">
                        <h3 class="card-title">SMS Provider</h3>
                    </div>
                    <div class="card-body">
                        <div class="form-group">
                            <label for="sms_provider">Provider</label>
                            <select class="form-control @error('sms_provider') is-invalid @enderror" 
                                id="sms_provider" name="sms_provider">
                                <option value="none" {{ (old('sms_provider', $settings->sms_provider ?? 'none') === 'none') ? 'selected' : '' }}>None</option>
                                <option value="twilio" {{ (old('sms_provider', $settings->sms_provider ?? 'none') === 'twilio') ? 'selected' : '' }}>Twilio</option>
                                <option value="nexmo" {{ (old('sms_provider', $settings->sms_provider ?? 'none') === 'nexmo') ? 'selected' : '' }}>Nexmo</option>
                            </select>
                            @error('sms_provider')
                                <span class="invalid-feedback">{{ $message }}</span>
                            @enderror
                        </div>

                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="sms_api_key">API Key</label>
                                    <input type="password" class="form-control @error('sms_api_key') is-invalid @enderror" 
                                        id="sms_api_key" name="sms_api_key" 
                                        value="{{ old('sms_api_key', $settings->sms_api_key ?? '') }}">
                                    @error('sms_api_key')
                                        <span class="invalid-feedback">{{ $message }}</span>
                                    @enderror
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="sms_api_secret">API Secret</label>
                                    <input type="password" class="form-control @error('sms_api_secret') is-invalid @enderror" 
                                        id="sms_api_secret" name="sms_api_secret" 
                                        value="{{ old('sms_api_secret', $settings->sms_api_secret ?? '') }}">
                                    @error('sms_api_secret')
                                        <span class="invalid-feedback">{{ $message }}</span>
                                    @enderror
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Payment Gateway Configuration -->
                <div class="card card-danger mb-3">
                    <div class="card-header">
                        <h3 class="card-title">Payment Gateway</h3>
                    </div>
                    <div class="card-body">
                        <div class="form-group">
                            <label for="payment_gateway">Gateway</label>
                            <select class="form-control @error('payment_gateway') is-invalid @enderror" 
                                id="payment_gateway" name="payment_gateway">
                                <option value="none" {{ (old('payment_gateway', $settings->payment_gateway ?? 'none') === 'none') ? 'selected' : '' }}>None</option>
                                <option value="stripe" {{ (old('payment_gateway', $settings->payment_gateway ?? 'none') === 'stripe') ? 'selected' : '' }}>Stripe</option>
                                <option value="paypal" {{ (old('payment_gateway', $settings->payment_gateway ?? 'none') === 'paypal') ? 'selected' : '' }}>PayPal</option>
                            </select>
                            @error('payment_gateway')
                                <span class="invalid-feedback">{{ $message }}</span>
                            @enderror
                        </div>

                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="payment_api_key">API Key</label>
                                    <input type="password" class="form-control @error('payment_api_key') is-invalid @enderror" 
                                        id="payment_api_key" name="payment_api_key" 
                                        value="{{ old('payment_api_key', $settings->payment_api_key ?? '') }}">
                                    @error('payment_api_key')
                                        <span class="invalid-feedback">{{ $message }}</span>
                                    @enderror
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="payment_api_secret">API Secret</label>
                                    <input type="password" class="form-control @error('payment_api_secret') is-invalid @enderror" 
                                        id="payment_api_secret" name="payment_api_secret" 
                                        value="{{ old('payment_api_secret', $settings->payment_api_secret ?? '') }}">
                                    @error('payment_api_secret')
                                        <span class="invalid-feedback">{{ $message }}</span>
                                    @enderror
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="card-footer">
                    <button type="submit" class="btn btn-primary">
                        <i class="fas fa-save"></i> Save Settings
                    </button>
                    <a href="{{ route('dashboard') }}" class="btn btn-secondary">
                        <i class="fas fa-times"></i> Cancel
                    </a>
                </div>
            </form>
        </div>
    </section>
</div>

<script>
document.addEventListener('DOMContentLoaded', function () {
    const provinceSelect = document.getElementById('app_province');
    const citySelect = document.getElementById('app_city');
    const barangaySelect = document.getElementById('app_barangay');

    // Province changed -> load cities (and reset barangay)
    if (provinceSelect) {
        provinceSelect.addEventListener('change', function () {
            const province = this.value;
            citySelect.innerHTML = '<option value="">-- Select City --</option>';
            barangaySelect.innerHTML = '<option value="">-- Select Barangay --</option>';

            if (!province) return;

            fetch(`/api/provinces/${encodeURIComponent(province)}/cities`)
                .then(response => response.json())
                .then(data => {
                    let html = '<option value="">-- Select City --</option>';
                    Object.entries(data).forEach(([key, city]) => {
                        html += `<option value="${city}">${city}</option>`;
                    });
                    citySelect.innerHTML = html;
                })
                .catch(error => {
                    console.error('Error loading cities:', error);
                    citySelect.innerHTML = '<option value="">-- Error loading cities --</option>';
                });
        });
    }

    // City changed -> load barangays
    if (citySelect) {
        citySelect.addEventListener('change', function () {
            const city = this.value;
            barangaySelect.innerHTML = '<option value="">-- Select Barangay --</option>';

            if (!city) return;

            fetch(`/api/cities/${encodeURIComponent(city)}/barangays`)
                .then(response => response.json())
                .then(data => {
                    let html = '<option value="">-- Select Barangay --</option>';
                    Object.entries(data).forEach(([key, barangay]) => {
                        html += `<option value="${barangay}">${barangay}</option>`;
                    });
                    barangaySelect.innerHTML = html;
                })
                .catch(error => {
                    console.error('Error loading barangays:', error);
                    barangaySelect.innerHTML = '<option value="">-- Error loading barangays --</option>';
                });
        });
    }
});
</script>
@endsection