@extends('admin.layout.index')

@section('title', 'Settings')

@push('head-scripts')
    <style>
        #regionToggle:checked {
            background-color: #28a745;
            border-color: #28a745;
        }

        #regionToggle {
            background-color: #136aff;
            border-color: #136aff;
        }

        #pk-label,
        #uk-label {
            font-size: 1.1rem;
            transition: all 0.3s ease;
            min-width: 40px;
            text-align: center;
        }

        .form-switch-lg .form-check-input {
            width: 3em;
            height: 1.5em;
        }
    </style>
@endpush

@section('content')
    <div class="row mb-3">
        <div class="col-12">
            <h4 class="mb-0">Settings</h4>
        </div>
    </div>

    <div class="row">
        <div class="col-xl-12 col-md-12">
            <div class="card">
                <div class="card-header align-items-center d-flex">
                    <h4 class="card-title mb-0">App Settings</h4>
                </div>
                <div class="card-body">
                    <form id="settings-form">
                        @csrf
                        <!-- Toggle Switch for PK/UK -->
                        <div class="mb-4">
                            <label class="form-label d-block">Api Region <br><small class="text-danger">Please Don't Change,
                                    For developer use only</small></label>
                            <div class="d-flex align-items-center justify-content-start gap-3">
                                <span class="text-muted" id="pk-label">PK</span>
                                <div class="form-check form-switch form-switch-sm" style="transform: scale(1.5);">
                                    <input class="form-check-input" type="checkbox" role="switch" id="regionToggle"
                                        style="cursor: pointer;">
                                </div>
                                <span class="text-muted" id="uk-label">UK</span>
                            </div>
                        </div>

                        <hr class="my-4">

                        <div class="mb-3">
                            <label for="minor_accident_value" class="form-label">Minor Accident Value</label>
                            <input type="number" id="minor_accident_value" name="minor_accident_value" class="form-control"
                                placeholder="Enter minor accident value" required>
                        </div>

                        <div class="mb-3">
                            <label for="major_accident_value" class="form-label">Major Accident Value</label>
                            <input type="number" id="major_accident_value" name="major_accident_value" class="form-control"
                                placeholder="Enter major accident value" required>
                        </div>

                        <button type="submit" class="btn btn-success" id="submitBtn">
                            <i class="ri-save-line me-1"></i> Submit
                        </button>
                    </form>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('custom-script')
    <script>
        $(document).ready(function() {
            const regionToggle = $('#regionToggle');
            const pkLabel = $('#pk-label');
            const ukLabel = $('#uk-label');
            const submitBtn = $('#submitBtn');

            // Update label styling based on toggle state
            function updateLabels() {
                if (regionToggle.is(':checked')) {
                    // UK is selected
                    pkLabel.removeClass('text-primary fw-bold').addClass('text-muted');
                    ukLabel.removeClass('text-muted').addClass('text-primary fw-bold');
                } else {
                    // PK is selected
                    pkLabel.removeClass('text-muted').addClass('text-primary fw-bold');
                    ukLabel.removeClass('text-primary fw-bold').addClass('text-muted');
                }
            }

            // Fetch 1: Load all settings on page load
            function loadSettings() {
                $.ajax({
                    url: '{{ route('admin.app-settings.get') }}',
                    method: 'GET',
                    success: function(response) {
                        if (response.success) {
                            // Set region toggle
                            regionToggle.prop('checked', response.data.valhalla_region === 'UK');
                            updateLabels();

                            // Set form values
                            $('#minor_accident_value').val(response.data.minor_accident_value);
                            $('#major_accident_value').val(response.data.major_accident_value);
                            // showToast('Updated Successfully', 'success');
                        }
                    },
                    error: function(xhr) {
                        console.error('Error loading settings:', xhr);
                        showToast('Failed to load settings', 'error');
                    }
                });
            }

            // Initialize
            loadSettings();

            // Fetch 2: Handle region toggle change
            regionToggle.on('change', function() {
                updateLabels();
                const selectedRegion = $(this).is(':checked') ? 'UK' : 'PK';

                // Show confirmation
                Swal.fire({
                    title: 'Change API Region?',
                    text: 'This is for developer use only. Are you sure you want to proceed?',
                    icon: 'warning',
                    showCancelButton: true,
                    confirmButtonColor: '#3085d6',
                    cancelButtonColor: '#d33',
                    confirmButtonText: 'Yes, change it!',
                    cancelButtonText: 'Cancel',
                    reverseButtons: true
                }).then((result) => {
                    if (result.isConfirmed) {
                        $.ajax({
                            url: '{{ route('admin.app-settings.update-region') }}',
                            method: 'POST',
                            data: {
                                _token: '{{ csrf_token() }}',
                                region: selectedRegion
                            },
                            success: function(response) {
                                if (response.success) {
                                    showToast(response.message, 'success');
                                }
                            },
                            error: function(xhr) {
                                console.error('Error updating region:', xhr);
                                showToast('Failed to update region', 'error');

                                // Revert toggle on error
                                regionToggle.prop('checked', !regionToggle.is(
                                    ':checked'));
                                updateLabels();
                            }
                        });
                    } else {
                        // Revert toggle if cancelled
                        regionToggle.prop('checked', !regionToggle.is(':checked'));
                        updateLabels();
                    }
                });
            });

            // Handle form submission for accident values
            $('#settings-form').on('submit', function(e) {
                e.preventDefault();

                const formData = {
                    _token: '{{ csrf_token() }}',
                    minor_accident_value: $('#minor_accident_value').val(),
                    major_accident_value: $('#major_accident_value').val()
                };

                // Disable submit button
                submitBtn.prop('disabled', true).html(
                    '<span class="spinner-border spinner-border-sm me-1"></span>Saving...');

                $.ajax({
                    url: '{{ route('admin.app-settings.update') }}',
                    method: 'POST',
                    data: formData,
                    success: function(response) {
                        if (response.success) {
                            showToast(response.message, 'success');
                        }
                    },
                    error: function(xhr) {
                        console.error('Error updating settings:', xhr);
                        if (xhr.responseJSON && xhr.responseJSON.message) {
                            showToast(xhr.responseJSON.message, 'error');
                        } else {
                            showToast('Failed to update settings', 'error');
                        }
                    },
                    complete: function() {
                        // Re-enable submit button
                        submitBtn.prop('disabled', false).html(
                            '<i class="ri-save-line me-1"></i> Submit');
                    }
                });
            });
        });
    </script>
@endpush