@extends('layouts.app')

@section('title', 'App Settings')

@section('content')
<div class="container-fluid">
    <!-- Breadcrumb and Search -->
    <div class="row mb-3">
        <div class="col-12">
            <div class="d-flex justify-content-between align-items-center" style="padding: 15px 0; border-bottom: 1px solid #e0e0e0;">
                <nav aria-label="breadcrumb" style="margin: 0;">
                    <ol class="breadcrumb mb-0" style="background: transparent; padding: 0;">
                        <li class="breadcrumb-item"><a href="{{ route('dashboard') }}" style="color: #666; text-decoration: none;">Settings</a></li>
                        <li class="breadcrumb-item active" aria-current="page" style="font-weight: bold; color: #333;">App Settings</li>
                    </ol>
                </nav>
                <div class="search-box" style="position: relative;">
                    <input type="text" class="form-control" placeholder="Search" style="border: 1px solid #ddd; border-radius: 4px; padding: 8px 35px 8px 12px; width: 300px;">
                    <i class="fas fa-search" style="position: absolute; right: 12px; top: 50%; transform: translateY(-50%); color: #999;"></i>
                </div>
            </div>
        </div>
    </div>

    <!-- App Settings Form -->
    <div class="row">
        <div class="col-12">
            <form method="POST" action="{{ route('settings.app.update') }}" id="appSettingsForm">
                @csrf
                
                <div class="settings-list" style="background: white; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1);">
                    <!-- Setting 1 -->
                    <div class="setting-item" style="padding: 20px; border-bottom: 1px solid #e0e0e0; display: flex; justify-content: space-between; align-items: center;">
                        <label style="margin: 0; font-size: 14px; color: #333; flex: 1;">When a customer is deleted from the software, remove them from Mikrotik</label>
                        <div style="display: flex; gap: 20px;">
                            <label style="display: flex; align-items: center; gap: 8px; cursor: pointer; margin: 0;">
                                <input type="radio" name="delete_from_mikrotik_on_customer_delete" value="yes" {{ $settings['delete_from_mikrotik_on_customer_delete'] === 'yes' ? 'checked' : '' }}>
                                <span>Yes</span>
                            </label>
                            <label style="display: flex; align-items: center; gap: 8px; cursor: pointer; margin: 0;">
                                <input type="radio" name="delete_from_mikrotik_on_customer_delete" value="no" {{ $settings['delete_from_mikrotik_on_customer_delete'] === 'no' ? 'checked' : '' }}>
                                <span>No</span>
                            </label>
                        </div>
                    </div>

                    <!-- Setting 2 -->
                    <div class="setting-item" style="padding: 20px; border-bottom: 1px solid #e0e0e0; display: flex; justify-content: space-between; align-items: center;">
                        <label style="margin: 0; font-size: 14px; color: #333; flex: 1;">Delete Customer Automatically That Are Not Active For 6 Months.</label>
                        <div style="display: flex; gap: 20px;">
                            <label style="display: flex; align-items: center; gap: 8px; cursor: pointer; margin: 0;">
                                <input type="radio" name="delete_inactive_customers_6_months" value="yes" {{ $settings['delete_inactive_customers_6_months'] === 'yes' ? 'checked' : '' }}>
                                <span>Yes</span>
                            </label>
                            <label style="display: flex; align-items: center; gap: 8px; cursor: pointer; margin: 0;">
                                <input type="radio" name="delete_inactive_customers_6_months" value="no" {{ $settings['delete_inactive_customers_6_months'] === 'no' ? 'checked' : '' }}>
                                <span>No</span>
                            </label>
                        </div>
                    </div>

                    <!-- Setting 3 -->
                    <div class="setting-item" style="padding: 20px; border-bottom: 1px solid #e0e0e0; display: flex; justify-content: space-between; align-items: center;">
                        <label style="margin: 0; font-size: 14px; color: #333; flex: 1;">Customers can buy internet time in minutes</label>
                        <div style="display: flex; gap: 20px;">
                            <label style="display: flex; align-items: center; gap: 8px; cursor: pointer; margin: 0;">
                                <input type="radio" name="customers_can_buy_internet_time_minutes" value="yes" {{ $settings['customers_can_buy_internet_time_minutes'] === 'yes' ? 'checked' : '' }}>
                                <span>Yes</span>
                            </label>
                            <label style="display: flex; align-items: center; gap: 8px; cursor: pointer; margin: 0;">
                                <input type="radio" name="customers_can_buy_internet_time_minutes" value="no" {{ $settings['customers_can_buy_internet_time_minutes'] === 'no' ? 'checked' : '' }}>
                                <span>No</span>
                            </label>
                        </div>
                    </div>

                    <!-- Setting 4 -->
                    <div class="setting-item" style="padding: 20px; border-bottom: 1px solid #e0e0e0; display: flex; justify-content: space-between; align-items: center;">
                        <label style="margin: 0; font-size: 14px; color: #333; flex: 1;">Show customer complaints from resellers and sub resellers in the admin panel.</label>
                        <div style="display: flex; gap: 20px;">
                            <label style="display: flex; align-items: center; gap: 8px; cursor: pointer; margin: 0;">
                                <input type="radio" name="show_reseller_complaints_in_admin" value="yes" {{ $settings['show_reseller_complaints_in_admin'] === 'yes' ? 'checked' : '' }}>
                                <span>Yes</span>
                            </label>
                            <label style="display: flex; align-items: center; gap: 8px; cursor: pointer; margin: 0;">
                                <input type="radio" name="show_reseller_complaints_in_admin" value="no" {{ $settings['show_reseller_complaints_in_admin'] === 'no' ? 'checked' : '' }}>
                                <span>No</span>
                            </label>
                        </div>
                    </div>

                    <!-- Setting 5 -->
                    <div class="setting-item" style="padding: 20px; border-bottom: 1px solid #e0e0e0; display: flex; justify-content: space-between; align-items: center;">
                        <label style="margin: 0; font-size: 14px; color: #333; flex: 1;">Generate monthly bills for suspended customers.</label>
                        <div style="display: flex; gap: 20px;">
                            <label style="display: flex; align-items: center; gap: 8px; cursor: pointer; margin: 0;">
                                <input type="radio" name="generate_bills_for_suspended_customers" value="yes" {{ $settings['generate_bills_for_suspended_customers'] === 'yes' ? 'checked' : '' }}>
                                <span>Yes</span>
                            </label>
                            <label style="display: flex; align-items: center; gap: 8px; cursor: pointer; margin: 0;">
                                <input type="radio" name="generate_bills_for_suspended_customers" value="no" {{ $settings['generate_bills_for_suspended_customers'] === 'no' ? 'checked' : '' }}>
                                <span>No</span>
                            </label>
                        </div>
                    </div>

                    <!-- Setting 6 -->
                    <div class="setting-item" style="padding: 20px; border-bottom: 1px solid #e0e0e0; display: flex; justify-content: space-between; align-items: center;">
                        <label style="margin: 0; font-size: 14px; color: #333; flex: 1;">Generate monthly bills for disabled customers.</label>
                        <div style="display: flex; gap: 20px;">
                            <label style="display: flex; align-items: center; gap: 8px; cursor: pointer; margin: 0;">
                                <input type="radio" name="generate_bills_for_disabled_customers" value="yes" {{ $settings['generate_bills_for_disabled_customers'] === 'yes' ? 'checked' : '' }}>
                                <span>Yes</span>
                            </label>
                            <label style="display: flex; align-items: center; gap: 8px; cursor: pointer; margin: 0;">
                                <input type="radio" name="generate_bills_for_disabled_customers" value="no" {{ $settings['generate_bills_for_disabled_customers'] === 'no' ? 'checked' : '' }}>
                                <span>No</span>
                            </label>
                        </div>
                    </div>

                    <!-- Setting 7 -->
                    <div class="setting-item" style="padding: 20px; border-bottom: 1px solid #e0e0e0; display: flex; justify-content: space-between; align-items: center;">
                        <label style="margin: 0; font-size: 14px; color: #333; flex: 1;">Customers can edit profile</label>
                        <div style="display: flex; gap: 20px;">
                            <label style="display: flex; align-items: center; gap: 8px; cursor: pointer; margin: 0;">
                                <input type="radio" name="customers_can_edit_profile" value="yes" {{ $settings['customers_can_edit_profile'] === 'yes' ? 'checked' : '' }}>
                                <span>Yes</span>
                            </label>
                            <label style="display: flex; align-items: center; gap: 8px; cursor: pointer; margin: 0;">
                                <input type="radio" name="customers_can_edit_profile" value="no" {{ $settings['customers_can_edit_profile'] === 'no' ? 'checked' : '' }}>
                                <span>No</span>
                            </label>
                        </div>
                    </div>

                    <!-- Setting 8 -->
                    <div class="setting-item" style="padding: 20px; border-bottom: 1px solid #e0e0e0; display: flex; justify-content: space-between; align-items: center;">
                        <label style="margin: 0; font-size: 14px; color: #333; flex: 1;">Allow resellers to create customer without recharge</label>
                        <div style="display: flex; gap: 20px;">
                            <label style="display: flex; align-items: center; gap: 8px; cursor: pointer; margin: 0;">
                                <input type="radio" name="allow_resellers_create_customer_without_recharge" value="yes" {{ $settings['allow_resellers_create_customer_without_recharge'] === 'yes' ? 'checked' : '' }}>
                                <span>Yes</span>
                            </label>
                            <label style="display: flex; align-items: center; gap: 8px; cursor: pointer; margin: 0;">
                                <input type="radio" name="allow_resellers_create_customer_without_recharge" value="no" {{ $settings['allow_resellers_create_customer_without_recharge'] === 'no' ? 'checked' : '' }}>
                                <span>No</span>
                            </label>
                        </div>
                    </div>

                    <!-- Setting 9 -->
                    <div class="setting-item" style="padding: 20px; border-bottom: 1px solid #e0e0e0; display: flex; justify-content: space-between; align-items: center;">
                        <label style="margin: 0; font-size: 14px; color: #333; flex: 1;">Reseller can downgrade customer package.</label>
                        <div style="display: flex; gap: 20px;">
                            <label style="display: flex; align-items: center; gap: 8px; cursor: pointer; margin: 0;">
                                <input type="radio" name="reseller_can_downgrade_package" value="yes" {{ $settings['reseller_can_downgrade_package'] === 'yes' ? 'checked' : '' }}>
                                <span>Yes</span>
                            </label>
                            <label style="display: flex; align-items: center; gap: 8px; cursor: pointer; margin: 0;">
                                <input type="radio" name="reseller_can_downgrade_package" value="no" {{ $settings['reseller_can_downgrade_package'] === 'no' ? 'checked' : '' }}>
                                <span>No</span>
                            </label>
                        </div>
                    </div>

                    <!-- Setting 10: Emergency Balance Limit -->
                    <div class="setting-item" style="padding: 20px; border-bottom: 1px solid #e0e0e0;">
                        <div style="display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 15px;">
                            <label style="margin: 0; font-size: 14px; color: #333; flex: 1;">The emergency balance limit available for purchasing internet time</label>
                        </div>
                        <div style="display: flex; flex-wrap: wrap; gap: 15px;">
                            @php
                                $emergencyLimitOptions = [0, 10, 20, 30, 50, 80, 100, 120, 150, 200];
                            @endphp
                            @foreach($emergencyLimitOptions as $option)
                                <label style="display: flex; align-items: center; gap: 8px; cursor: pointer; margin: 0;">
                                    <input type="radio" name="emergency_balance_limit" value="{{ $option }}" {{ $settings['emergency_balance_limit'] == $option ? 'checked' : '' }}>
                                    <span>{{ $option }}</span>
                                </label>
                            @endforeach
                        </div>
                    </div>

                    <!-- Setting 11: Suspension Hour -->
                    <div class="setting-item" style="padding: 20px; border-bottom: 1px solid #e0e0e0;">
                        <div style="display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 15px;">
                            <label style="margin: 0; font-size: 14px; color: #333; flex: 1;">Suspension Hour for Overdue Customers.</label>
                        </div>
                        <div style="display: flex; flex-wrap: wrap; gap: 15px; max-height: 400px; overflow-y: auto;">
                            @php
                                $suspensionHours = [];
                                for ($i = 1; $i <= 12; $i++) {
                                    $suspensionHours[] = ['value' => $i . '_after', 'label' => $i . ' hour' . ($i > 1 ? 's' : '') . ' after 12:00 AM'];
                                }
                                for ($i = 1; $i <= 12; $i++) {
                                    $suspensionHours[] = ['value' => $i . '_before', 'label' => $i . ' hour' . ($i > 1 ? 's' : '') . ' before 12:00 AM'];
                                }
                            @endphp
                            @foreach($suspensionHours as $hour)
                                <label style="display: flex; align-items: center; gap: 8px; cursor: pointer; margin: 0; min-width: 180px;">
                                    <input type="radio" name="suspension_hour" value="{{ $hour['value'] }}" {{ $settings['suspension_hour'] === $hour['value'] ? 'checked' : '' }}>
                                    <span>{{ $hour['label'] }}</span>
                                </label>
                            @endforeach
                        </div>
                    </div>
                </div>

                <!-- Submit Button -->
                <div class="row mt-4 mb-4">
                    <div class="col-12">
                        <button type="submit" class="btn btn-primary" style="padding: 12px 30px; font-size: 16px; font-weight: 600;">
                            <i class="fas fa-save me-2"></i>Save Settings
                        </button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>

@if(session('success'))
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            alert('{{ session('success') }}');
        });
    </script>
@endif

@if(session('error'))
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            alert('{{ session('error') }}');
        });
    </script>
@endif

<style>
    .setting-item:last-child {
        border-bottom: none !important;
    }

    .setting-item:hover {
        background-color: #f9f9f9;
    }

    input[type="radio"] {
        width: 18px;
        height: 18px;
        cursor: pointer;
        accent-color: #007bff;
    }

    label {
        cursor: pointer;
        user-select: none;
    }

    .search-box input:focus {
        outline: none;
        border-color: #007bff;
        box-shadow: 0 0 0 2px rgba(0,123,255,0.1);
    }
</style>

@endsection