@extends('admin.layout.index')

@section('title', 'App Version Management')

@section('content')
    <div class="row mb-3">
        <div class="col-12">
            <h4 class="mb-0">App Version Management</h4>
            <p class="text-muted mb-0">Track app versions, distributions, and enforce mandatory updates.</p>
        </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 Versioning</h4>
                </div>
                <div class="card-body">
                    <form id="version-form">
                        <div class="mb-3">
                            <label for="ios" class="form-label">IOS</label>
                            <input type="text" id="ios" name="ios" class="form-control"
                                placeholder="Enter IOS version" required>
                        </div>
                        <div class="mb-3">
                            <label for="android" class="form-label">Android</label>
                            <input type="text" id="android" name="android" class="form-control"
                                placeholder="Enter android version" required>
                        </div>
                        <button class="btn btn-success">Submit</button>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-lg-12">
            <div class="card">
                <div class="card-header align-items-center d-flex">
                    <h4 class="card-title mb-0">Maintenance Mode</h4>
                </div>
                <div class="card-body">
                    <form method="POST" id="maintenance-mode-form">
                        <div class="card-text">
                            <div class="mb-3">
                                <label for="description" class="form-label">Title</label>
                                <input type="text" name="title" id="title" class="form-control" placeholder="Title"
                                    value="" required>
                            </div>
                            <div class="mb-3">
                                <label for="description" class="form-label">Description</label>
                                <textarea name="description" id="description" class="form-control" cols="30" rows="10" required
                                    placeholder="Description"></textarea>
                            </div>
                            <div class="mb-3">
                                <label for="email" class="form-label">iOS version</label>
                                <input type="text" name="ios_maintenance_version" class="form-control"
                                    placeholder="e.g. 1.0.0" title="Please enter a valid version like 1.0.0" required>
                            </div>
                            <div class="mb-3">
                                <label for="email" class="form-label">Android version</label>
                                <input type="text" name="android_maintenance_version" class="form-control"
                                    placeholder="e.g. 1.0.0" title="Please enter a valid version like 1.0.0" value=""
                                    required>
                            </div>
                            <div class="col-lg-6 mt-5">
                                <h4 class="card-title mb-2">Maintenance</h4>
                                <ol class="breadcrumb m-0">
                                    <li class="breadcrumb-item">
                                        <div class="form-check form-switch form-switch-right form-switch-md">
                                            <label for="maintenance_ios" class="form-label text-muted">iOS</label>
                                            <input class="form-check-input" type="checkbox" id="maintenance_ios"
                                                name="maintenance_ios">
                                        </div>
                                    </li>

                                    <li class="breadcrumb-item">
                                        <div class="form-check form-switch form-switch-right form-switch-md">
                                            <label for="maintenance_android" class="form-label text-muted">Android</label>
                                            <input class="form-check-input" type="checkbox" id="maintenance_android"
                                                name="maintenance_android">
                                        </div>
                                    </li>
                                </ol>
                            </div>
                        </div>
                        <button class="btn btn-success mt-3" type="submit">Update</button>
                    </form>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('custom-script')
    <script>
        document.getElementById('version-form').addEventListener('submit', async function(e) {
            e.preventDefault();

            const formData = new FormData(this);
            const data = Object.fromEntries(formData);

            try {
                const response = await fetch('{{ route('admin.system-config.version') }}', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': '{{ csrf_token() }}'
                    },
                    body: JSON.stringify(data)
                });

                const result = await response.json();

                if (result.success) {
                    showToast(result.message, 'success');
                }
            } catch (error) {
                showToast(error, 'error');
            }
        });

        document.getElementById('maintenance-mode-form').addEventListener('submit', async function(e) {
            e.preventDefault();

            const formData = new FormData(this);
            const data = Object.fromEntries(formData);

            if (document.getElementById('maintenance_ios').checked) {
                data.maintenance_ios = '1';
            }
            if (document.getElementById('maintenance_android').checked) {
                data.maintenance_android = '1';
            }

            try {
                const response = await fetch('{{ route('admin.system-config.maintenance') }}', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': '{{ csrf_token() }}'
                    },
                    body: JSON.stringify(data)
                });

                const result = await response.json();

                if (result.success) {
                    showToast(result.message, 'success');
                }
            } catch (error) {
                console.error('Error:', error);
                showToast(error, 'error');
            }
        });

        @if (isset($setting))
            document.getElementById('ios').value = '{{ $setting->ios ?? '' }}';
            document.getElementById('android').value = '{{ $setting->android ?? '' }}';
            document.getElementById('title').value = '{{ $setting->title ?? '' }}';
            document.getElementById('description').value = '{{ $setting->description ?? '' }}';
            document.querySelector('[name="ios_maintenance_version"]').value =
                '{{ $setting->ios_maintenance_version ?? '' }}';
            document.querySelector('[name="android_maintenance_version"]').value =
                '{{ $setting->android_maintenance_version ?? '' }}';
            document.getElementById('maintenance_ios').checked = {{ $setting->maintenance_ios ? 'true' : 'false' }};
            document.getElementById('maintenance_android').checked =
                {{ $setting->maintenance_android ? 'true' : 'false' }};
        @endif
    </script>
@endpush