@include('layouts.main')

<div class="container">
    <h2 style="text-align: center">Dynamic Header</h2>
    <form method="POST" action="{{ url('/dynamic-header-save')}}">
        <!-- Radio Buttons -->
        <div class="mb-3">
            <label class="form-label" style="font-weight: bold">Header Type</label>
            <div class="form-check">
                <input class="form-check-input" type="radio" name="type" id="option1" value="1" onclick="showFields('option1Fields')" @if($model->type == 1){{"Checked"}}@endif>
                <label class="form-check-label" for="option1">
                    Linkaat Header
                </label>
            </div>
            <div class="form-check">
                <input class="form-check-input" type="radio" name="type" id="option2" value="2" onclick="showFields('option2Fields')"  @if($model->type == 2){{"Checked"}}@endif>
                <label class="form-check-label" for="option2">
                    Custom Header
                </label>
            </div>
        </div>

        <!-- Hidden Fields for Option 1 -->
        <div id="option1Fields" class="hidden">

        </div>

        <!-- Hidden Fields for Option 2 -->
        <div id="option2Fields" class=@if($model->type != 2){{"hidden"}}@endif>
            <div class="mb-3">
                <label for="field2" class="form-label" style="font-weight: bold">Subtitle (English)</label>
                <input type="text" class="form-control" id="subtitle" name="subtitle" placeholder="Subtitle" value="@if(!empty($model->subtitle)){{$model->subtitle}}@endif">
            </div>
            <div class="mb-3">
                <label for="field2" class="form-label" style="font-weight: bold">Subtitle (Arabic)</label>
                <input type="text" class="form-control" id="subtitle_ar" name="subtitle_ar" placeholder="Subtitle" value="@if(!empty($model->subtitle_ar)){{$model->subtitle_ar}}@endif">
            </div>
            <div class="mb-3">
                <label for="field2" class="form-label" style="font-weight: bold">Button Text (English)</label>
                <input type="text" class="form-control" id="button_text" name="button_text" placeholder="Button Text" value="@if(!empty($model->button_text)){{$model->button_text}}@endif">
            </div>
            <div class="mb-3">
                <label for="field2" class="form-label" style="font-weight: bold">Button Text (Arabic)</label>
                <input type="text" class="form-control" id="button_text_ar" name="button_text_ar" placeholder="Button Text (Arabic)" value="@if(!empty($model->button_text_ar)){{$model->button_text_ar}}@endif">
            </div>
            <div class="mb-3">
                <label class="form-label" style="font-weight: bold">Redirection Type</label>
                <div class="form-check">
                    <input class="form-check-input" type="radio" name="redirection_type" value="1" @if($model->redirection_type == 1){{"Checked"}}@endif>
                    <label class="form-check-label">
                        Deeplink
                    </label>
                </div>
                <div class="form-check">
                    <input class="form-check-input" type="radio" name="redirection_type" value="2" @if($model->redirection_type == 2){{"Checked"}}@endif>
                    <label class="form-check-label">
                        Webpage
                    </label>
                </div>
            </div>
            <div class="mb-3">
                <label for="field2" class="form-label" style="font-weight: bold">Redirection URL (English)</label>
                <input type="text" class="form-control" id="redirection_url" name="redirection_url" placeholder="Redirection URL" value="@if(!empty($model->redirection_url)){{$model->redirection_url}}@endif">
            </div>
            <div class="mb-3">
                <label for="field2" class="form-label" style="font-weight: bold">Redirection URL (Arabic)</label>
                <input type="text" class="form-control" id="redirection_url_ar" name="redirection_url_ar" placeholder="Redirection URL (Arabic)" value="@if(!empty($model->redirection_url_ar)){{$model->redirection_url_ar}}@endif">
            </div>
        </div>
        <!-- Submit Button -->
        <button type="submit" class="btn btn-primary">Submit</button>
    </form>
</div>

<!-- Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>

<script>
    function showFields(optionId) {
        // Hide all fields first
        document.getElementById('option1Fields').classList.add('hidden');
        document.getElementById('option2Fields').classList.add('hidden');

        // Show the selected option's fields
        document.getElementById(optionId).classList.remove('hidden');
    }
</script>