@extends('layout.admin')

@section('content')
<div class="container-xxl flex-grow-1 container-p-y">
    <h4 class="fw-bold py-3 mb-4"><span class="text-muted fw-light">Dashboard /</span> Dev Mode</h4>

    @if(session('success'))
        <div class="alert alert-success alert-dismissible" role="alert">
            {{ session('success') }}
            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
        </div>
    @endif
    @if(session('error'))
        <div class="alert alert-danger alert-dismissible" role="alert">
            {{ session('error') }}
            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
        </div>
    @endif

    <div class="row">
        <!-- Dev Mode Status Card -->
        <div class="col-md-12 mb-4">
            <div class="card">
                <h5 class="card-header">Dev Mode Status</h5>
                <div class="card-body">
                    <p>
                        Dev mode allows you to manually revalidate the frontend cache. 
                        It is automatically disabled after 24 hours for security and performance reasons.
                    </p>
                    
                    <form action="{{ route('devMode.toggle') }}" method="POST">
                        @csrf
                        @if($devModeActive)
                            <div class="alert alert-warning">
                                <strong>Dev Mode is currently ACTIVE.</strong> You can now clear the cache.
                            </div>
                            <button type="submit" name="action" value="disable" class="btn btn-danger">Turn Off Dev Mode</button>
                        @else
                            <div class="alert alert-secondary">
                                <strong>Dev Mode is currently DISABLED.</strong>
                            </div>
                            <button type="submit" name="action" value="enable" class="btn btn-primary">Turn On Dev Mode</button>
                        @endif
                    </form>
                </div>
            </div>
        </div>

        <!-- Revalidation Controls Card -->
        <div class="col-md-12">
            <div class="card">
                <h5 class="card-header">Cache Revalidation</h5>
                <div class="card-body">
                    <form action="{{ route('devMode.revalidate') }}" method="POST">
                        @csrf
                        <fieldset {{ !$devModeActive ? 'disabled' : '' }}>
                            <div class="mb-3">
                                <label for="tagSelect" class="form-label">Select Page / Tag to Revalidate</label>
                                <select id="tagSelect" name="tag" class="form-select" required>
                                    <option value="">-- Select an option --</option>
                                    <option value="all">All (Clear Full Website Cache)</option>
                                    
                                    <optgroup label="General">
                                        <option value="pages">All Pages</option>
                                        <option value="blogs">All Blogs</option>
                                        <option value="settings">Setting</option>
                                    </optgroup>
                                    
                                    <optgroup label="Packages">
                                        <option value="umrah-packages">All Umrah Packages</option>
                                        <option value="hajj-packages">All Hajj Packages</option>
                                    </optgroup>
                                    
                                    <optgroup label="Travel Elements">
                                        <option value="hotels">All Hotels</option>
                                        <option value="reviews">All Reviews</option>
                                        <!-- <option value="airports">Airports</option>
                                        <option value="countries">Countries</option>
                                        <option value="cities">Cities</option> -->
                                    </optgroup>
                                </select>
                            </div>
                            
                            <div class="mb-3">
                                <p class="text-muted"><small>Note: Using "All" will send a request with tag 'all' matching the frontend cache configuration for full cache purge.</small></p>
                            </div>

                            <button type="submit" class="btn btn-warning">Revalidate Cache</button>
                        </fieldset>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection