@extends('dashbord.layouts.master')

@section('toolbar')
    <div id="kt_app_toolbar_container" class="app-container container-xxl d-flex flex-stack">
        <div class="page-title d-flex flex-column justify-content-center flex-wrap me-3">
            <h1 class="page-heading d-flex text-dark fw-bold fs-3 flex-column justify-content-center my-0">
                High Settings
            </h1>
            <ul class="breadcrumb breadcrumb-separatorless fw-semibold fs-7 my-0 pt-1">
                <li class="breadcrumb-item text-muted">
                    <a href="{{ route('admin.dashboard') }}" class="text-muted text-hover-primary">Home</a>
                </li>
                <li class="breadcrumb-item">
                    <span class="bullet bg-gray-400 w-5px h-2px"></span>
                </li>
                <li class="breadcrumb-item text-muted">High Settings</li>
            </ul>
        </div>
    </div>
@endsection

@section('content')
    <div id="kt_app_content_container" class="app-container container-xxxl">
        <!-- Flash Messages -->
        @if(session('success'))
            <div class="alert alert-success alert-dismissible fade show" role="alert">
                <div class="d-flex align-items-center">
                    <div class="flex-grow-1">
                        {{ session('success') }}
                    </div>
                    <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                </div>
            </div>
        @endif

        @if(session('error'))
            <div class="alert alert-danger alert-dismissible fade show" role="alert">
                <div class="d-flex align-items-center">
                    <div class="flex-grow-1">
                        {{ session('error') }}
                    </div>
                    <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                </div>
            </div>
        @endif

        <!--begin::Row-->
        <div class="row g-5 g-xl-8">
            <!--begin::Col-->
            <div class="col-xl-6">
                <!--begin::Card-->
                <div class="card card-xl-stretch mb-xl-8">
                    <!--begin::Card header-->
                    <div class="card-header border-0 pt-5">
                        <!--begin::Card title-->
                        <div class="card-title">
                            <h2 class="fw-bold text-dark">Clear Cache</h2>
                            <p class="text-gray-600 fw-semibold fs-7 mt-1 mb-0">Clear all Laravel cache types</p>
                        </div>
                        <!--end::Card title-->
                    </div>
                    <!--end::Card header-->

                    <!--begin::Card body-->
                    <div class="card-body pt-0">
                        <div class="text-gray-700 mb-8">
                            This action will clear all Laravel cache types including application cache, configuration cache, route cache, and view cache. This helps resolve caching issues and ensures your changes are reflected immediately.
                        </div>

                        <!--begin::Actions-->
                        <div class="d-flex justify-content-center mb-4">
                            <button type="button" class="btn btn-danger" id="clearCacheBtn" data-kt-action="clear_cache">
                                <i class="fas fa-trash-alt me-2"></i>
                                Clear All Cache
                            </button>
                        </div>
                        <!--end::Actions-->

                        <!--begin::Results-->
                        <div id="cacheResults" class="mt-6" style="display: none;">
                            <div class="fs-6 fw-bold mb-4">Cache Clear Results</div>
                            <div id="cacheResultsContent"></div>
                        </div>
                        <!--end::Results-->

                        @if(isset($cache_results))
                            <div class="mt-6">
                                <div class="fs-6 fw-bold mb-4">Cache Clear Results</div>
                                @foreach($cache_results as $result)
                                    <div class="alert {{ $result['status'] == 'success' ? 'alert-success' : 'alert-danger' }} alert-sm mb-3">
                                        <div class="d-flex align-items-center">
                                            <i class="fas {{ $result['status'] == 'success' ? 'fa-check-circle' : 'fa-exclamation-circle' }} me-2"></i>
                                            <div>
                                                <strong>{{ $result['command'] }}:</strong> {{ $result['output'] }}
                                            </div>
                                        </div>
                                    </div>
                                @endforeach
                            </div>
                        @endif
                    </div>
                    <!--end::Card body-->
                </div>
                <!--end::Card-->
            </div>
            <!--end::Col-->

            <!--begin::Col-->
            <div class="col-xl-6">
                <!--begin::Card-->
                <div class="card card-xl-stretch mb-xl-8">
                    <!--begin::Card header-->
                    <div class="card-header border-0 pt-5">
                        <!--begin::Card title-->
                        <div class="card-title">
                            <h2 class="fw-bold text-dark">Run Migrations</h2>
                            <p class="text-gray-600 fw-semibold fs-7 mt-1 mb-0">Execute pending database migrations</p>
                        </div>
                        <!--end::Card title-->
                    </div>
                    <!--end::Card header-->

                    <!--begin::Card body-->
                    <div class="card-body pt-0">
                        <div class="text-gray-700 mb-8">
                            This action will run all pending database migrations. This updates your database schema to match the current migrations. Use this after adding new migration files or when database structure changes are needed.
                        </div>

                        <!--begin::Actions-->
                        <div class="d-flex justify-content-center mb-4">
                            <button type="button" class="btn btn-primary" id="runMigrateBtn" data-kt-action="run_migrate">
                                <i class="fas fa-database me-2"></i>
                                Run Migrations
                            </button>
                        </div>
                        <!--end::Actions-->

                        <!--begin::Results-->
                        <div id="migrationResults" class="mt-6" style="display: none;">
                            <div class="fs-6 fw-bold mb-4">Migration Results</div>
                            <div id="migrationResultsContent"></div>
                        </div>
                        <!--end::Results-->

                        @if(isset($migration_results))
                            <div class="mt-6">
                                <div class="fs-6 fw-bold mb-4">Migration Results</div>
                                @foreach($migration_results as $result)
                                    <div class="alert {{ $result['status'] == 'success' ? 'alert-success' : 'alert-danger' }} alert-sm mb-3">
                                        <div class="d-flex align-items-center">
                                            <i class="fas {{ $result['status'] == 'success' ? 'fa-check-circle' : 'fa-exclamation-circle' }} me-2"></i>
                                            <div>
                                                <strong>{{ $result['command'] }}:</strong> {{ $result['output'] }}
                                            </div>
                                        </div>
                                    </div>
                                @endforeach
                            </div>
                        @endif
                    </div>
                    <!--end::Card body-->
                </div>
                <!--end::Card-->
            </div>
            <!--end::Col-->
        </div>
        <!--end::Row-->

        <!--begin::Row-->
        <div class="row g-5 g-xl-8">
            <!--begin::Col-->
            <div class="col-xl-6">
                <!--begin::Card-->
                <div class="card card-xl-stretch mb-xl-8">
                    <!--begin::Card header-->
                    <div class="card-header border-0 pt-5">
                        <!--begin::Card title-->
                        <div class="card-title">
                            <h2 class="fw-bold text-dark">Git Configuration</h2>
                            <p class="text-gray-600 fw-semibold fs-7 mt-1 mb-0">Configure Git user settings</p>
                        </div>
                        <!--end::Card title-->
                    </div>
                    <!--end::Card header-->

                    <!--begin::Card body-->
                    <div class="card-body pt-0">
                        <!--begin::Form-->
                        <form id="gitConfigForm" method="POST" action="{{ route('admin.high_settings.set_git_config') }}">
                            @csrf
                            <!--begin::Input group-->
                            <div class="mb-6">
                                <label class="form-label">User Name</label>
                                <input type="text" name="user_name" class="form-control form-control-solid"
                                       value="{{ $gitConfig['user_name'] ?? '' }}"
                                       placeholder="Enter your Git username" required>
                            </div>
                            <!--end::Input group-->

                            <!--begin::Input group-->
                            <div class="mb-6">
                                <label class="form-label">User Email</label>
                                <input type="email" name="user_email" class="form-control form-control-solid"
                                       value="{{ $gitConfig['user_email'] ?? '' }}"
                                       placeholder="Enter your Git email" required>
                            </div>
                            <!--end::Input group-->

                            <!--begin::Actions-->
                            <div class="d-flex justify-content-center">
                                <button type="submit" class="btn btn-info">
                                    <i class="fas fa-cog me-2"></i>
                                    Save Git Configuration
                                </button>
                            </div>
                            <!--end::Actions-->
                        </form>
                        <!--end::Form-->

                        <!--begin::Results-->
                        <div id="gitConfigResults" class="mt-6" style="display: none;">
                            <div class="fs-6 fw-bold mb-4">Git Configuration Results</div>
                            <div id="gitConfigResultsContent"></div>
                        </div>
                        <!--end::Results-->

                        @if(isset($git_config_results))
                            <div class="mt-6">
                                <div class="fs-6 fw-bold mb-4">Git Configuration Results</div>
                                @foreach($git_config_results as $result)
                                    <div class="alert {{ $result['status'] == 'success' ? 'alert-success' : 'alert-danger' }} alert-sm mb-3">
                                        <div class="d-flex align-items-center">
                                            <i class="fas {{ $result['status'] == 'success' ? 'fa-check-circle' : 'fa-exclamation-circle' }} me-2"></i>
                                            <div>
                                                <strong>{{ $result['command'] }}:</strong> {{ $result['output'] }}
                                            </div>
                                        </div>
                                    </div>
                                @endforeach
                            </div>
                        @endif
                    </div>
                    <!--end::Card body-->
                </div>
                <!--end::Card-->
            </div>
            <!--end::Col-->

            <!--begin::Col-->
            <div class="col-xl-6">
                <!--begin::Card-->
                <div class="card card-xl-stretch mb-xl-8">
                    <!--begin::Card header-->
                    <div class="card-header border-0 pt-5">
                        <!--begin::Card title-->
                        <div class="card-title">
                            <h2 class="fw-bold text-dark">GitHub Actions</h2>
                            <p class="text-gray-600 fw-semibold fs-7 mt-1 mb-0">Pull and push to GitHub</p>
                        </div>
                        <!--end::Card title-->
                    </div>
                    <!--end::Card header-->

                    <!--begin::Card body-->
                    <div class="card-body pt-0">
                        @if($gitStatus['is_repo'] ?? false)
                            <!--begin::Git Status-->
                            <div class="mb-8">
                                <div class="alert alert-info alert-dismissible fade show" role="alert">
                                    <div class="d-flex align-items-start">
                                        <i class="fas fa-info-circle me-3 mt-1"></i>
                                        <div class="flex-grow-1">
                                            <div class="mb-2">
                                                <strong>Current Branch:</strong>
                                                <span class="badge badge-primary">{{ $gitStatus['current_branch'] ?? 'Unknown' }}</span>
                                            </div>
                                            <div class="mb-2">
                                                <strong>Remote URL:</strong>
                                                <code class="text-dark">{{ $gitStatus['remote_url'] ?? 'Not configured' }}</code>
                                            </div>
                                            <div>
                                                <strong>Status:</strong>
                                                @if($gitStatus['has_changes'] ?? false)
                                                    <span class="badge badge-warning">Uncommitted changes detected</span>
                                                @else
                                                    <span class="badge badge-success">Working directory clean</span>
                                                @endif
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!--end::Git Status-->

                            <div class="mb-6">
                                <label class="form-label">Remote Repository URL</label>
                                <input id="gitRemoteUrl" type="text" class="form-control form-control-solid"
                                       placeholder="git@github.com:your/repo.git or https://github.com/your/repo.git"
                                       value="{{ $gitStatus['remote_url'] ?? '' }}">
                                <div class="form-text">Add or update the origin remote for this repository.</div>
                            </div>

                            <div class="d-flex justify-content-center mb-6">
                                <button type="button" class="btn btn-secondary me-3" data-kt-action="git_remote_add">
                                    <i class="fas fa-link me-2"></i>
                                    {{ empty($gitStatus['remote_url']) ? 'Set Remote' : 'Update Remote' }}
                                </button>
                                <button type="button" class="btn btn-dark" data-kt-action="git_init">
                                    <i class="fas fa-code-branch me-2"></i>
                                    Reinitialize Repo
                                </button>
                            </div>

                            <div class="row g-3 mb-6">
                                <div class="col-md-4">
                                    <button type="button" class="btn btn-info w-100" data-kt-action="git_commit">
                                        <i class="fas fa-check me-2"></i>
                                        Commit Changes
                                    </button>
                                </div>
                                <div class="col-md-4">
                                    <button type="button" class="btn btn-success w-100" data-kt-action="git_pull" {{ empty($gitStatus['remote_url']) ? 'disabled' : '' }}>
                                        <i class="fas fa-download me-2"></i>
                                        Pull from GitHub
                                    </button>
                                </div>
                                <div class="col-md-4">
                                    <button type="button" class="btn btn-warning w-100" data-kt-action="git_push" {{ empty($gitStatus['remote_url']) ? 'disabled' : '' }}>
                                        <i class="fas fa-upload me-2"></i>
                                        Push to GitHub
                                    </button>
                                </div>
                            </div>
                            <!--end::Actions-->

                            <!--begin::Results-->
                            <div id="gitInitResults" class="mt-6" style="display: none;">
                                <div class="fs-6 fw-bold mb-4">Git Init Results</div>
                                <div id="gitInitResultsContent"></div>
                            </div>
                            <div id="gitRemoteResults" class="mt-6" style="display: none;">
                                <div class="fs-6 fw-bold mb-4">Remote Update Results</div>
                                <div id="gitRemoteResultsContent"></div>
                            </div>
                            <div id="gitCommitResults" class="mt-6" style="display: none;">
                                <div class="fs-6 fw-bold mb-4">Commit Results</div>
                                <div id="gitCommitResultsContent"></div>
                            </div>
                            <div id="gitPullResults" class="mt-6" style="display: none;">
                                <div class="fs-6 fw-bold mb-4">Pull Results</div>
                                <div id="gitPullResultsContent"></div>
                            </div>
                            <div id="gitPushResults" class="mt-6" style="display: none;">
                                <div class="fs-6 fw-bold mb-4">Push Results</div>
                                <div id="gitPushResultsContent"></div>
                            </div>

                            @if(isset($git_pull_results))
                                <div class="mt-6">
                                    <div class="fs-6 fw-bold mb-4">Pull Results</div>
                                    @foreach($git_pull_results as $result)
                                        <div class="alert {{ $result['status'] == 'success' ? 'alert-success' : 'alert-danger' }} alert-sm mb-3">
                                            <div class="d-flex align-items-center">
                                                <i class="fas {{ $result['status'] == 'success' ? 'fa-check-circle' : 'fa-exclamation-circle' }} me-2"></i>
                                                <div>
                                                    <strong>{{ $result['command'] }}:</strong> {{ $result['output'] }}
                                                </div>
                                            </div>
                                        </div>
                                    @endforeach
                                </div>
                            @endif

                            @if(isset($git_push_results))
                                <div class="mt-6">
                                    <div class="fs-6 fw-bold mb-4">Push Results</div>
                                    @foreach($git_push_results as $result)
                                        <div class="alert {{ $result['status'] == 'success' ? 'alert-success' : 'alert-danger' }} alert-sm mb-3">
                                            <div class="d-flex align-items-center">
                                                <i class="fas {{ $result['status'] == 'success' ? 'fa-check-circle' : 'fa-exclamation-circle' }} me-2"></i>
                                                <div>
                                                    <strong>{{ $result['command'] }}:</strong> {{ $result['output'] }}
                                                </div>
                                            </div>
                                        </div>
                                    @endforeach
                                </div>
                            @endif
                        @else
                            <!--begin::Alert-->
                            <div class="alert alert-warning alert-dismissible fade show" role="alert">
                                <div class="d-flex align-items-center">
                                    <i class="fas fa-exclamation-triangle me-3"></i>
                                    <div class="flex-grow-1">
                                        This directory is not a Git repository. Initialize it and configure a remote to enable Git actions.
                                    </div>
                                </div>
                            </div>

                            <div class="mb-6">
                                <label class="form-label">Remote Repository URL</label>
                                <input id="gitRemoteUrl" type="text" class="form-control form-control-solid"
                                       placeholder="git@github.com:your/repo.git or https://github.com/your/repo.git">
                                <div class="form-text">Enter a remote URL before adding origin after initialization.</div>
                            </div>

                            <div class="row g-3 mb-6">
                                <div class="col-6">
                                    <button type="button" class="btn btn-dark w-100" data-kt-action="git_init">
                                        <i class="fas fa-code-branch me-2"></i>
                                        Initialize Repository
                                    </button>
                                </div>
                                <div class="col-6">
                                    <button type="button" class="btn btn-secondary w-100" data-kt-action="git_remote_add">
                                        <i class="fas fa-link me-2"></i>
                                        Add Remote
                                    </button>
                                </div>
                            </div>

                            <div id="gitInitResults" class="mt-6" style="display: none;">
                                <div class="fs-6 fw-bold mb-4">Git Init Results</div>
                                <div id="gitInitResultsContent"></div>
                            </div>
                            <div id="gitRemoteResults" class="mt-6" style="display: none;">
                                <div class="fs-6 fw-bold mb-4">Remote Update Results</div>
                                <div id="gitRemoteResultsContent"></div>
                            </div>
                        @endif
                    </div>
                    <!--end::Card body-->
                </div>
                <!--end::Card-->
            </div>
            <!--end::Col-->
        </div>
        <!--end::Row-->

        <!--begin::Row-->
        <div class="row g-5 g-xl-8">
            <!--begin::Col-->
            <div class="col-xl-6">
                <!--begin::Card-->
                <div class="card card-xl-stretch mb-xl-8">
                    <!--begin::Card header-->
                    <div class="card-header border-0 pt-5">
                        <!--begin::Card title-->
                        <div class="card-title">
                            <h2 class="fw-bold text-dark">Environment Configuration</h2>
                            <p class="text-gray-600 fw-semibold fs-7 mt-1 mb-0">Change application environment settings</p>
                        </div>
                        <!--end::Card title-->
                    </div>
                    <!--end::Card header-->

                    <!--begin::Card body-->
                    <div class="card-body pt-0">
                        <!--begin::Form-->
                        <div class="mb-8">
                            <label class="form-label">Environment</label>
                            <select class="form-select form-select-solid" id="environmentSelect" name="environment">
                                <option value="local" {{ config('app.env') === 'local' ? 'selected' : '' }}>Local</option>
                                <option value="development" {{ config('app.env') === 'development' ? 'selected' : '' }}>Development</option>
                                <option value="testing" {{ config('app.env') === 'testing' ? 'selected' : '' }}>Testing</option>
                                <option value="staging" {{ config('app.env') === 'staging' ? 'selected' : '' }}>Staging</option>
                                <option value="production" {{ config('app.env') === 'production' ? 'selected' : '' }}>Production</option>
                            </select>
                            <div class="form-text text-muted">Changing environment will clear configuration cache and restart the application.</div>
                        </div>
                        <!--end::Form-->

                        <!--begin::Actions-->
                        <div class="d-flex justify-content-center mb-6">
                            <button type="button" class="btn btn-warning" data-kt-action="set_environment">
                                <i class="fas fa-exchange-alt me-2"></i>
                                Update Environment
                            </button>
                        </div>
                        <!--end::Actions-->

                        <!--begin::Results-->
                        <div id="environmentResults" class="mt-6" style="display: none;">
                            <div class="fs-6 fw-bold mb-4">Environment Update Results</div>
                            <div id="environmentResultsContent"></div>
                        </div>
                        <!--end::Results-->
                    </div>
                    <!--end::Card body-->
                </div>
                <!--end::Card-->
            </div>
            <!--end::Col-->

            <!--begin::Col-->
            <div class="col-xl-6">
                <!--begin::Card-->
                <div class="card card-xl-stretch mb-xl-8">
                    <!--begin::Card header-->
                    <div class="card-header border-0 pt-5">
                        <!--begin::Card title-->
                        <div class="card-title">
                            <h2 class="fw-bold text-dark">Debug Mode</h2>
                            <p class="text-gray-600 fw-semibold fs-7 mt-1 mb-0">Toggle application debug mode</p>
                        </div>
                        <!--end::Card title-->
                    </div>
                    <!--end::Card header-->

                    <!--begin::Card body-->
                    <div class="card-body pt-0">
                        <!--begin::Form-->
                        <div class="mb-8">
                            <!--begin::Form switch-->
                            <div class="form-check form-switch form-check-custom form-check-solid">
                                <input class="form-check-input" type="checkbox" id="debugModeToggle"
                                       {{ config('app.debug') ? 'checked' : '' }} />
                                <label class="form-check-label" for="debugModeToggle">
                                    <span class="form-check-statement">
                                        <span class="form-check-label-text fw-semibold">Enable Debug Mode</span>
                                        <span class="form-check-label-description text-muted">
                                            Debug mode provides detailed error information and should only be used in development environments.
                                        </span>
                                    </span>
                                </label>
                            </div>
                            <!--end::Form switch-->

                            <div class="form-text text-muted">
                                Current status: <strong>{{ config('app.debug') ? 'Enabled' : 'Disabled' }}</strong>
                            </div>
                        </div>
                        <!--end::Form-->

                        <!--begin::Actions-->
                        <div class="d-flex justify-content-center mb-6">
                            <button type="button" class="btn btn-info" data-kt-action="set_debug_mode">
                                <i class="fas fa-bug me-2"></i>
                                Update Debug Mode
                            </button>
                        </div>
                        <!--end::Actions-->

                        <!--begin::Results-->
                        <div id="debugModeResults" class="mt-6" style="display: none;">
                            <div class="fs-6 fw-bold mb-4">Debug Mode Update Results</div>
                            <div id="debugModeResultsContent"></div>
                        </div>
                        <!--end::Results-->
                    </div>
                    <!--end::Card body-->
                </div>
                <!--end::Card-->
            </div>
            <!--end::Col-->
        </div>
        <!--end::Row-->

        <!--begin::Row-->
        <div class="row g-5 g-xl-8">
            <!--begin::Col-->
            <div class="col-12">
                <!--begin::Card-->
                <div class="card card-xl-stretch mb-xl-8">
                    <!--begin::Card header-->
                    <div class="card-header border-0 pt-5">
                        <!--begin::Card title-->
                        <div class="card-title">
                            <h2 class="fw-bold text-dark">System Information</h2>
                            <p class="text-gray-600 fw-semibold fs-7 mt-1 mb-0">Current Laravel environment details</p>
                        </div>
                        <!--end::Card title-->
                    </div>
                    <!--end::Card header-->

                    <!--begin::Card body-->
                    <div class="card-body pt-0">
                        <!--begin::Table-->
                        <div class="table-responsive">
                            <table class="table table-row-dashed table-row-gray-300 align-middle gy-4">
                                <tbody>
                                    <tr>
                                        <td class="text-gray-800 fw-bold">Laravel Version</td>
                                        <td class="text-gray-800">{{ app()->version() }}</td>
                                    </tr>
                                    <tr>
                                        <td class="text-gray-800 fw-bold">Environment</td>
                                        <td class="text-gray-800">
                                            <span id="currentEnvironmentBadge" class="badge {{ config('app.env') === 'production' ? 'badge-danger' : (config('app.env') === 'staging' ? 'badge-warning' : 'badge-success') }}">
                                                {{ config('app.env') }}
                                            </span>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td class="text-gray-800 fw-bold">Debug Mode</td>
                                        <td class="text-gray-800">
                                            <span id="currentDebugBadge" class="badge {{ config('app.debug') ? 'badge-success' : 'badge-secondary' }}">
                                                {{ config('app.debug') ? 'Enabled' : 'Disabled' }}
                                            </span>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td class="text-gray-800 fw-bold">Cache Driver</td>
                                        <td class="text-gray-800">{{ config('cache.default') }}</td>
                                    </tr>
                                    <tr>
                                        <td class="text-gray-800 fw-bold">Database Connection</td>
                                        <td class="text-gray-800">{{ config('database.default') }}</td>
                                    </tr>
                                    <tr>
                                        <td class="text-gray-800 fw-bold">Queue Connection</td>
                                        <td class="text-gray-800">{{ config('queue.default') }}</td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                        <!--end::Table-->
                    </div>
                    <!--end::Card body-->
                </div>
                <!--end::Card-->
            </div>
            <!--end::Col-->
        </div>
        <!--end::Row-->

        <!-- Commit Modal -->
        <div class="modal fade" id="commitModal" tabindex="-1" aria-labelledby="commitModalLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="commitModalLabel">Commit Changes</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <form id="gitCommitForm" method="POST" action="{{ route('admin.high_settings.git_commit') }}">
                        @csrf
                        <div class="modal-body">
                            <div class="mb-3">
                                <label for="commit_message" class="form-label">Commit Message</label>
                                <textarea class="form-control" id="commit_message" name="commit_message" rows="3"
                                          placeholder="Enter commit message..." required>Auto commit from admin panel</textarea>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                            <button type="submit" class="btn btn-info">
                                <i class="fas fa-check me-2"></i>
                                Commit Changes
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('js')
    <script>
        var KTHighSettings = function () {
            var elements = {};
            var ajaxHeaders = {
                'X-CSRF-TOKEN': '{{ csrf_token() }}',
                'X-Requested-With': 'XMLHttpRequest',
                'Accept': 'application/json'
            };

            var init = function () {
                console.log('KTHighSettings: init');
                cacheElements();
                bindEvents();
            };

            var cacheElements = function () {
                elements.clearCacheBtn = document.querySelector('[data-kt-action="clear_cache"]');
                elements.cacheResults = document.getElementById('cacheResults');
                elements.cacheResultsContent = document.getElementById('cacheResultsContent');
                elements.runMigrateBtn = document.querySelector('[data-kt-action="run_migrate"]');
                elements.migrationResults = document.getElementById('migrationResults');
                elements.migrationResultsContent = document.getElementById('migrationResultsContent');
                elements.gitConfigForm = document.getElementById('gitConfigForm');
                elements.gitConfigResults = document.getElementById('gitConfigResults');
                elements.gitConfigResultsContent = document.getElementById('gitConfigResultsContent');
                elements.gitPullBtn = document.querySelector('[data-kt-action="git_pull"]');
                elements.gitPushBtn = document.querySelector('[data-kt-action="git_push"]');
                elements.gitCommitBtn = document.querySelector('[data-kt-action="git_commit"]');
                elements.gitInitBtn = document.querySelector('[data-kt-action="git_init"]');
                elements.gitRemoteBtn = document.querySelector('[data-kt-action="git_remote_add"]');
                elements.gitPullResults = document.getElementById('gitPullResults');
                elements.gitPullResultsContent = document.getElementById('gitPullResultsContent');
                elements.gitPushResults = document.getElementById('gitPushResults');
                elements.gitPushResultsContent = document.getElementById('gitPushResultsContent');
                elements.gitInitResults = document.getElementById('gitInitResults');
                elements.gitInitResultsContent = document.getElementById('gitInitResultsContent');
                elements.gitRemoteResults = document.getElementById('gitRemoteResults');
                elements.gitRemoteResultsContent = document.getElementById('gitRemoteResultsContent');
                elements.gitCommitResults = document.getElementById('gitCommitResults');
                elements.gitCommitResultsContent = document.getElementById('gitCommitResultsContent');
                elements.remoteUrlInput = document.getElementById('gitRemoteUrl');
                elements.commitModal = document.getElementById('commitModal');
                elements.gitCommitForm = document.getElementById('gitCommitForm');
                elements.debugModeToggle = document.getElementById('debugModeToggle');
                elements.debugModeResults = document.getElementById('debugModeResults');
                elements.debugModeResultsContent = document.getElementById('debugModeResultsContent');
                elements.debugModeBtn = document.querySelector('[data-kt-action="set_debug_mode"]');
                elements.environmentSelect = document.getElementById('environmentSelect');
                elements.environmentResults = document.getElementById('environmentResults');
                elements.environmentResultsContent = document.getElementById('environmentResultsContent');
                elements.environmentBtn = document.querySelector('[data-kt-action="set_environment"]');
                console.log('KTHighSettings: elements', {
                    clearCacheBtn: elements.clearCacheBtn,
                    runMigrateBtn: elements.runMigrateBtn,
                    gitPullBtn: elements.gitPullBtn,
                    gitPushBtn: elements.gitPushBtn,
                    gitCommitBtn: elements.gitCommitBtn,
                    gitInitBtn: elements.gitInitBtn,
                    gitRemoteBtn: elements.gitRemoteBtn,
                    debugModeBtn: elements.debugModeBtn,
                    environmentBtn: elements.environmentBtn
                });
            };

            var bindEvents = function () {
                console.log('KTHighSettings: bindEvents');

                if (elements.clearCacheBtn) {
                    console.log('KTHighSettings: bind clearCacheBtn');
                    elements.clearCacheBtn.addEventListener('click', function (e) {
                        console.log('clearCacheBtn clicked');
                        e.preventDefault();
                        actions.clearCache();
                    });
                }

                if (elements.runMigrateBtn) {
                    console.log('KTHighSettings: bind runMigrateBtn');
                    elements.runMigrateBtn.addEventListener('click', function (e) {
                        console.log('runMigrateBtn clicked');
                        e.preventDefault();
                        actions.runMigrate();
                    });
                }

                if (elements.gitPullBtn) {
                    console.log('KTHighSettings: bind gitPullBtn');
                    elements.gitPullBtn.addEventListener('click', function (e) {
                        console.log('gitPullBtn clicked');
                        e.preventDefault();
                        actions.gitPull();
                    });
                }

                if (elements.gitPushBtn) {
                    console.log('KTHighSettings: bind gitPushBtn');
                    elements.gitPushBtn.addEventListener('click', function (e) {
                        console.log('gitPushBtn clicked');
                        e.preventDefault();
                        actions.gitPush();
                    });
                }

                if (elements.gitCommitBtn) {
                    console.log('KTHighSettings: bind gitCommitBtn');
                    elements.gitCommitBtn.addEventListener('click', function (e) {
                        console.log('gitCommitBtn clicked');
                        e.preventDefault();
                        actions.showCommitModal();
                    });
                }

                if (elements.gitInitBtn) {
                    console.log('KTHighSettings: bind gitInitBtn');
                    elements.gitInitBtn.addEventListener('click', function (e) {
                        console.log('gitInitBtn clicked');
                        e.preventDefault();
                        actions.gitInit();
                    });
                }

                if (elements.gitRemoteBtn) {
                    console.log('KTHighSettings: bind gitRemoteBtn');
                    elements.gitRemoteBtn.addEventListener('click', function (e) {
                        console.log('gitRemoteBtn clicked');
                        e.preventDefault();
                        actions.gitRemoteAdd();
                    });
                }

                if (elements.debugModeBtn) {
                    console.log('KTHighSettings: bind debugModeBtn');
                    elements.debugModeBtn.addEventListener('click', function (e) {
                        console.log('debugModeBtn clicked');
                        e.preventDefault();
                        actions.setDebugMode();
                    });
                }

                if (elements.environmentBtn) {
                    console.log('KTHighSettings: bind environmentBtn');
                    elements.environmentBtn.addEventListener('click', function (e) {
                        console.log('environmentBtn clicked');
                        e.preventDefault();
                        actions.setEnvironment();
                    });
                }

                if (elements.gitConfigForm) {
                    console.log('KTHighSettings: bind gitConfigForm');
                    elements.gitConfigForm.addEventListener('submit', handlers.onGitConfigSubmit);
                }

                if (elements.gitCommitForm) {
                    console.log('KTHighSettings: bind gitCommitForm');
                    elements.gitCommitForm.addEventListener('submit', handlers.onGitCommitSubmit);
                }
            };

            var updateButton = function (button, disabled, label) {
                if (!button) {
                    return;
                }
                button.disabled = disabled;
                button.innerHTML = label;
            };

            var handleJsonResponse = function (response) {
                if (!response.ok) {
                    return response.json().then(function (error) {
                        throw new Error(error.message || 'Server error');
                    });
                }
                return response.json();
            };

            var renderResultList = function (results) {
                if (!Array.isArray(results)) {
                    return '';
                }

                return results.map(function (result) {
                    var alertClass = result.status === 'success' ? 'alert-success' : 'alert-danger';
                    return '<div class="alert ' + alertClass + ' alert-sm mb-3">' +
                        '<div class="d-flex align-items-center">' +
                        '<i class="fas ' + (result.status === 'success' ? 'fa-check-circle' : 'fa-exclamation-circle') + ' me-2"></i>' +
                        '<div><strong>' + result.command + ':</strong> ' + result.output + '</div>' +
                        '</div>' +
                        '</div>';
                }).join('');
            };

            var renderResponse = function (data, resultsContent) {
                var html = '<div class="alert ' + (data.success ? 'alert-success' : 'alert-danger') + '">' +
                    (data.message || (data.success ? 'Completed successfully.' : 'An error occurred.')) +
                    '</div>';

                if (data.results && data.results.length) {
                    html += renderResultList(data.results);
                }

                resultsContent.innerHTML = html;
            };

            var showLoadingContent = function (container, message) {
                if (container) {
                    container.style.display = 'block';
                }
                return '<div class="text-center"><i class="fas fa-spinner fa-spin"></i> ' + message + '</div>';
            };

            var makeFetchOptions = function (body, isJson) {
                var headers = Object.assign({}, ajaxHeaders);
                var options = {
                    method: 'POST',
                    headers: headers
                };

                if (isJson) {
                    options.headers['Content-Type'] = 'application/json';
                    options.body = JSON.stringify(body || {});
                } else {
                    options.body = body;
                }

                return options;
            };

            var actions = {
                clearCache: function () {
                    var url = '{{ route("admin.high_settings.clear_cache") }}';
                    console.log('clearCache URL:', url);
                    updateButton(elements.clearCacheBtn, true, '<i class="fas fa-spinner fa-spin me-2"></i>Clearing Cache...');
                    elements.cacheResults.style.display = 'block';
                    elements.cacheResultsContent.innerHTML = showLoadingContent(elements.cacheResultsContent, 'Processing...');

                    fetch(url, makeFetchOptions({}, true))
                        .then(handleJsonResponse)
                        .then(function (data) {
                            renderResponse(data, elements.cacheResultsContent);
                        })
                        .catch(function (error) {
                            elements.cacheResultsContent.innerHTML = '<div class="alert alert-danger">Error: ' + error.message + '</div>';
                        })
                        .finally(function () {
                            updateButton(elements.clearCacheBtn, false, '<i class="fas fa-trash-alt me-2"></i>Clear All Cache');
                        });
                },

                runMigrate: function () {
                    var url = '{{ route("admin.high_settings.run_migrate") }}';
                    console.log('runMigrate URL:', url);
                    updateButton(elements.runMigrateBtn, true, '<i class="fas fa-spinner fa-spin me-2"></i>Running Migrations...');
                    elements.migrationResults.style.display = 'block';
                    elements.migrationResultsContent.innerHTML = showLoadingContent(elements.migrationResultsContent, 'Processing...');

                    fetch(url, makeFetchOptions({}, true))
                        .then(handleJsonResponse)
                        .then(function (data) {
                            renderResponse(data, elements.migrationResultsContent);
                        })
                        .catch(function (error) {
                            elements.migrationResultsContent.innerHTML = '<div class="alert alert-danger">Error: ' + error.message + '</div>';
                        })
                        .finally(function () {
                            updateButton(elements.runMigrateBtn, false, '<i class="fas fa-database me-2"></i>Run Migrations');
                        });
                },

                gitInit: function () {
                    var url = '{{ route("admin.high_settings.git_init") }}';
                    console.log('gitInit URL:', url);
                    updateButton(elements.gitInitBtn, true, '<i class="fas fa-spinner fa-spin me-2"></i>Initializing...');
                    elements.gitInitResults.style.display = 'block';
                    elements.gitInitResultsContent.innerHTML = showLoadingContent(elements.gitInitResultsContent, 'Initializing repository...');

                    fetch(url, makeFetchOptions({}, true))
                        .then(handleJsonResponse)
                        .then(function (data) {
                            renderResponse(data, elements.gitInitResultsContent);
                        })
                        .catch(function (error) {
                            elements.gitInitResultsContent.innerHTML = '<div class="alert alert-danger">Error: ' + error.message + '</div>';
                        })
                        .finally(function () {
                            updateButton(elements.gitInitBtn, false, '<i class="fas fa-code-branch me-2"></i>Reinitialize Repo');
                        });
                },

                gitRemoteAdd: function () {
                    var url = '{{ route("admin.high_settings.git_remote") }}';
                    var remoteUrl = elements.remoteUrlInput ? elements.remoteUrlInput.value.trim() : '';
                    console.log('gitRemoteAdd URL:', url, 'remote:', remoteUrl);

                    if (!remoteUrl) {
                        elements.gitRemoteResults.style.display = 'block';
                        elements.gitRemoteResultsContent.innerHTML = '<div class="alert alert-danger">Please provide a remote URL first.</div>';
                        return;
                    }

                    updateButton(elements.gitRemoteBtn, true, '<i class="fas fa-spinner fa-spin me-2"></i>Updating remote...');
                    elements.gitRemoteResults.style.display = 'block';
                    elements.gitRemoteResultsContent.innerHTML = showLoadingContent(elements.gitRemoteResultsContent, 'Updating remote...');

                    fetch(url, makeFetchOptions({ remote_url: remoteUrl }, true))
                        .then(handleJsonResponse)
                        .then(function (data) {
                            renderResponse(data, elements.gitRemoteResultsContent);
                        })
                        .catch(function (error) {
                            elements.gitRemoteResultsContent.innerHTML = '<div class="alert alert-danger">Error: ' + error.message + '</div>';
                        })
                        .finally(function () {
                            updateButton(elements.gitRemoteBtn, false, '<i class="fas fa-link me-2"></i>Update Remote');
                        });
                },

                showCommitModal: function () {
                    var modal = new bootstrap.Modal(elements.commitModal);
                    modal.show();
                },

                gitPull: function () {
                    var url = '{{ route("admin.high_settings.git_pull") }}';
                    console.log('gitPull URL:', url);
                    elements.gitPullResults.style.display = 'block';
                    elements.gitPullResultsContent.innerHTML = showLoadingContent(elements.gitPullResultsContent, 'Pulling from GitHub...');

                    fetch(url, makeFetchOptions({}, true))
                        .then(handleJsonResponse)
                        .then(function (data) {
                            renderResponse(data, elements.gitPullResultsContent);
                        })
                        .catch(function (error) {
                            elements.gitPullResultsContent.innerHTML = '<div class="alert alert-danger">Error: ' + error.message + '</div>';
                        });
                },

                gitPush: function () {
                    var url = '{{ route("admin.high_settings.git_push") }}';
                    console.log('gitPush URL:', url);
                    updateButton(elements.gitPushBtn, true, '<i class="fas fa-spinner fa-spin me-2"></i>Pushing...');
                    elements.gitPushResults.style.display = 'block';
                    elements.gitPushResultsContent.innerHTML = showLoadingContent(elements.gitPushResultsContent, 'Pushing to GitHub...');

                    fetch(url, makeFetchOptions({}, true))
                        .then(handleJsonResponse)
                        .then(function (data) {
                            renderResponse(data, elements.gitPushResultsContent);
                        })
                        .catch(function (error) {
                            elements.gitPushResultsContent.innerHTML = '<div class="alert alert-danger">Error: ' + error.message + '</div>';
                        })
                        .finally(function () {
                            updateButton(elements.gitPushBtn, false, '<i class="fas fa-upload me-2"></i>Push to GitHub');
                        });
                },

                setDebugMode: function () {
                    var url = '{{ route("admin.high_settings.set_debug_mode") }}';
                    console.log('setDebugMode URL:', url);
                    updateButton(elements.debugModeBtn, true, '<i class="fas fa-spinner fa-spin me-2"></i>Updating Debug Mode...');
                    elements.debugModeResults.style.display = 'block';
                    elements.debugModeResultsContent.innerHTML = showLoadingContent(elements.debugModeResultsContent, 'Processing...');

                    fetch(url, makeFetchOptions({
                        debug: elements.debugModeToggle.checked
                    }, true))
                        .then(handleJsonResponse)
                        .then(function (data) {
                            renderResponse(data, elements.debugModeResultsContent);
                            if (data.success) {
                                actions.updateStatusBadges(data);
                            }
                        })
                        .catch(function (error) {
                            elements.debugModeResultsContent.innerHTML = '<div class="alert alert-danger">Error: ' + error.message + '</div>';
                        })
                        .finally(function () {
                            updateButton(elements.debugModeBtn, false, '<i class="fas fa-bug me-2"></i>Update Debug Mode');
                        });
                },

                setEnvironment: function () {
                    var url = '{{ route("admin.high_settings.set_environment") }}';
                    console.log('setEnvironment URL:', url);
                    updateButton(elements.environmentBtn, true, '<i class="fas fa-spinner fa-spin me-2"></i>Updating Environment...');
                    elements.environmentResults.style.display = 'block';
                    elements.environmentResultsContent.innerHTML = showLoadingContent(elements.environmentResultsContent, 'Processing...');

                    fetch(url, makeFetchOptions({
                        environment: elements.environmentSelect.value
                    }, true))
                        .then(handleJsonResponse)
                        .then(function (data) {
                            renderResponse(data, elements.environmentResultsContent);
                            if (data.success) {
                                actions.updateStatusBadges(data);
                            }
                        })
                        .catch(function (error) {
                            elements.environmentResultsContent.innerHTML = '<div class="alert alert-danger">Error: ' + error.message + '</div>';
                        })
                        .finally(function () {
                            updateButton(elements.environmentBtn, false, '<i class="fas fa-exchange-alt me-2"></i>Update Environment');
                        });
                },

                updateStatusBadges: function (data) {
                    if (data.environment !== undefined) {
                        var envBadge = document.getElementById('currentEnvironmentBadge');
                        if (envBadge) {
                            envBadge.textContent = data.environment;
                            envBadge.className = 'badge ' + (data.environment === 'production' ? 'badge-danger' : (data.environment === 'staging' ? 'badge-warning' : 'badge-success'));
                        }
                    }

                    if (data.debug !== undefined) {
                        var debugBadge = document.getElementById('currentDebugBadge');
                        if (debugBadge) {
                            debugBadge.textContent = data.debug ? 'Enabled' : 'Disabled';
                            debugBadge.className = 'badge ' + (data.debug ? 'badge-success' : 'badge-secondary');
                        }
                    }
                }
            };

            var handlers = {
                onGitConfigSubmit: function (e) {
                    e.preventDefault();
                    var url = '{{ route("admin.high_settings.set_git_config") }}';
                    console.log('setGitConfig URL:', url);
                    var submitBtn = elements.gitConfigForm.querySelector('button[type="submit"]');
                    elements.gitConfigResultsContent.innerHTML = showLoadingContent(elements.gitConfigResultsContent, 'Processing...');
                    elements.gitConfigResults.style.display = 'block';
                    updateButton(submitBtn, true, '<i class="fas fa-spinner fa-spin me-2"></i>Saving Configuration...');

                    var formData = new FormData(elements.gitConfigForm);

                    fetch(url, makeFetchOptions(formData, false))
                        .then(handleJsonResponse)
                        .then(function (data) {
                            renderResponse(data, elements.gitConfigResultsContent);
                        })
                        .catch(function (error) {
                            elements.gitConfigResultsContent.innerHTML = '<div class="alert alert-danger">Error: ' + error.message + '</div>';
                        })
                        .finally(function () {
                            updateButton(submitBtn, false, '<i class="fas fa-cog me-2"></i>Save Git Configuration');
                        });
                },

                onGitCommitSubmit: function (e) {
                    e.preventDefault();
                    var url = '{{ route("admin.high_settings.git_commit") }}';
                    console.log('gitCommit URL:', url);
                    var submitBtn = elements.gitCommitForm.querySelector('button[type="submit"]');
                    elements.gitCommitResultsContent.innerHTML = showLoadingContent(elements.gitCommitResultsContent, 'Committing changes...');
                    elements.gitCommitResults.style.display = 'block';
                    updateButton(submitBtn, true, '<i class="fas fa-spinner fa-spin me-2"></i>Committing...');

                    var modalInstance = bootstrap.Modal.getInstance(elements.commitModal);
                    if (modalInstance) {
                        modalInstance.hide();
                    }

                    var formData = new FormData(elements.gitCommitForm);

                    fetch(url, makeFetchOptions(formData, false))
                        .then(handleJsonResponse)
                        .then(function (data) {
                            renderResponse(data, elements.gitCommitResultsContent);
                        })
                        .catch(function (error) {
                            elements.gitCommitResultsContent.innerHTML = '<div class="alert alert-danger">Error: ' + error.message + '</div>';
                        })
                        .finally(function () {
                            updateButton(submitBtn, false, '<i class="fas fa-check me-2"></i>Commit Changes');
                        });
                }
            };

            return {
                init: init,
                clearCache: actions.clearCache,
                runMigrate: actions.runMigrate,
                gitInit: actions.gitInit,
                gitRemoteAdd: actions.gitRemoteAdd,
                gitPull: actions.gitPull,
                gitPush: actions.gitPush,
                showCommitModal: actions.showCommitModal,
                setDebugMode: actions.setDebugMode,
                setEnvironment: actions.setEnvironment
            };
        }();

        var domReady = function (fn) {
            if (typeof KTUtil !== 'undefined' && KTUtil.onDOMContentLoaded) {
                KTUtil.onDOMContentLoaded(fn);
            } else {
                document.addEventListener('DOMContentLoaded', fn);
            }
        };

        domReady(function () {
            console.log('KTHighSettings: DOM ready');
            KTHighSettings.init();
        });
    </script>
@endsection