<form method="POST" action="{{ route('ch-admin.appearance.branding.update') }}">
    @csrf

    <h5 class="c-grey-900 mB-20">Branding</h5>

    {{-- Primary Logo --}}
    <div class="mb-3 row">
        <label class="col-sm-2 control-label">Site Logo</label>
        <div class="col-sm-6">
            <div class="uploader">
                <button
                    id="logo-uploader"
                    data-media-config='{"key": "settings[app][logo]", "container": ".site-logo-ctn", "single_upload": "true", "maxFiles": 1, "previewsContainer": ".site-logo-preview"}'
                    data-files="{{ $logo }}"
                    type="button"
                    class="btn btn-primary btn-sm text-white dropzone">
                    <i class="ti-plus"></i> Upload Image
                </button>
                <div class="site-logo-ctn"></div>
                <div class="site-logo-preview mt-3"></div>
            </div>
        </div>
    </div>

    {{-- Logo Alt Text --}}
    <div class="mb-3 row">
        <label for="logo_alt" class="col-sm-2 control-label">Logo Alt Text</label>
        <div class="col-sm-4">
            <input type="text" id="logo_alt" name="logo_alt" class="form-control"
                   placeholder="{{ setting('app.name', 'ChargePanda') }}"
                   value="{{ old('logo_alt', $logo_alt) }}">
            <small class="text-muted">Defaults to the site name if left blank.</small>
        </div>
    </div>

    {{-- Logo Max Width --}}
    <div class="mb-3 row">
        <label class="col-sm-2 control-label">Logo Max Width</label>
        <div class="col-sm-6">
            <div class="peers ai-c">
                <div class="peer peer-greed">
                    <input type="range" id="logo_max_width_range" min="0" max="500" step="10"
                           value="{{ $logo_max_width ?? 0 }}"
                           class="form-range w-100"
                           oninput="syncLogoWidth(this.value)">
                </div>
                <div class="peer mL-10" style="width:90px">
                    <div class="input-group input-group-sm">
                        <input type="number" id="logo_max_width" name="logo_max_width"
                               class="form-control" min="0" max="500"
                               value="{{ $logo_max_width ?? 0 }}"
                               oninput="syncLogoWidthRange(this.value)">
                        <span class="input-group-text">px</span>
                    </div>
                </div>
            </div>
            <small class="text-muted">Set to <strong>0</strong> for automatic (no constraint).</small>
        </div>
    </div>

    {{-- Favicon --}}
    <div class="mb-3 row">
        <label class="col-sm-2 control-label">Favicon</label>
        <div class="col-sm-6">
            <div class="uploader">
                <button
                    id="favicon-uploader"
                    data-media-config='{"key": "settings[app][favicon]", "container": ".favicon-ctn", "single_upload": "true", "maxFiles": 1, "previewsContainer": ".favicon-preview"}'
                    data-files="{{ $favicon }}"
                    type="button"
                    class="btn btn-primary btn-sm text-white dropzone">
                    <i class="ti-plus"></i> Upload Favicon
                </button>
                <div class="favicon-ctn"></div>
                <div class="favicon-preview mt-3"></div>
            </div>
        </div>
    </div>

    <div class="form-group row">
        <div class="col-sm-offset-2 col-sm-10">
            <button type="submit" class="btn btn-primary text-white">Save Branding</button>
        </div>
    </div>

</form>

@push('scripts')
    @include('admin.media.upload')
    <script src="{{ url('assets/backend/js/vendors/dropzone.min.js') }}"></script>
    <script src="{{ url('assets/backend/js/media.js') }}"></script>
    <script>
        function syncLogoWidth(val) {
            document.getElementById('logo_max_width').value = val;
        }
        function syncLogoWidthRange(val) {
            document.getElementById('logo_max_width_range').value = val;
        }
    </script>
@endpush
