@extends('layouts.app')

@section('content')
<div class="container py-5">
    <h1 class="mb-4">Form Branding for: {{$formname}}</h1>

    @if(session('success'))
        <div class="alert alert-success">{{ session('success') }}</div>
    @endif

    <form method="POST" enctype="multipart/form-data" action="{{ route('settings.updatebranding', $settings->id) }}">
        @csrf
        @method('PUT') 
        {{-- Branding --}}
        <div class="tab-pane" id="branding">
            <div class="mb-3">
                <input type="checkbox" name="same_app_branding" value="1" {{ $settings->same_app_branding ? 'checked':'' }}> Same App Branding
            </div>
            <div class="mb-3">
                <input type="checkbox" name="public_branding" value="1" {{ $settings->public_branding ? 'checked':'' }}> Public Branding
            </div>
            <div class="mb-3">
                <label>Public Logo</label>
                <input type="file" name="public_logo" class="form-control">
                @if($settings->public_logo)
                    <img src="{{ asset($settings->public_logo) }}" style="max-height:80px;" class="mt-2">
                @endif
            </div>
            <div class="mb-3"><label>Public Banner Color</label>
                <input type="color" name="public_banner_color" value="{{ $settings->public_banner_color }}">
            </div>
            <div class="mb-3"><label>Footer Text</label>
                <input type="text" name="footer_text" class="form-control" value="{{ $settings->footer_text }}">
            </div>
            <div class="mb-3"><label>Footer Color</label>
                <input type="color" name="footer_color" value="{{ $settings->footer_color }}">
            </div>
            @php
                $formCss = explode(',', $settings->form_css ?? 'left,85');
            @endphp
            <div class="mb-3"><label>Form Align</label>
                <select name="form_align" class="form-control">
                    <option value="left" {{ $formCss[0]=='left'?'selected':'' }}>Left</option>
                    <option value="center" {{ $formCss[0]=='center'?'selected':'' }}>Center</option>
                    <option value="right" {{ $formCss[0]=='right'?'selected':'' }}>Right</option>
                </select>
            </div>
            <div class="mb-3">
                <label>Form Max Width: <span id="widthVal">{{ $formCss[1] ?? 85 }}</span>%</label>
                <input type="range" name="form_max_width" min="0" max="100" value="{{ $formCss[1] ?? 85 }}" id="widthRange">
            </div>
        </div>


        @if($user->is_admin || $isExternal)
        <div class="mt-4">
            <button type="submit" name="save_settings" class="btn btn-primary">Save Settings</button>
        </div>
        @endif
    </form>

    <script>
        const rangeInput = document.getElementById('widthRange');
        const valueDisplay = document.getElementById('widthVal');

        rangeInput.addEventListener('input', function () {
            valueDisplay.textContent = this.value;
        });
    </script>

    </div>
@endsection