@extends('admin.settings.layout')

@section('settings-content')
<div class="card border-0 shadow-sm">
    <div class="card-body p-4">
        <form action="{{ route('admin.settings.update', 'media') }}" method="POST">
            @csrf
            
            <h5 class="fw-bold text-primary mb-4">Image Optimization</h5>
            <div class="row g-3">
                <div class="col-md-6">
                    <div class="form-check form-switch mb-3">
                        <input class="form-check-input" type="checkbox" name="media_webp_enabled" id="mWebp" value="1" {{ setting_checked('media_webp_enabled', true) }}>
                        <label class="form-check-label fw-bold" for="mWebp">Auto-convert to WebP</label>
                    </div>
                </div>

                <div class="col-md-6">
                    <div class="form-check form-switch mb-3">
                        <input class="form-check-input" type="checkbox" name="media_resize_enabled" id="mResize" value="1" {{ setting_checked('media_resize_enabled', true) }}>
                        <label class="form-check-label fw-bold" for="mResize">Auto-resize Large Uploads</label>
                    </div>
                </div>

                <div class="col-md-6">
                     <label class="form-label fw-bold">Compression Quality (1-100)</label>
                     <input type="number" name="media_comp_quality" class="form-control" value="{{ \App\Models\Setting::get('media_comp_quality', '80') }}">
                </div>

                <div class="col-md-6">
                     <label class="form-label fw-bold">Max File Size (MB)</label>
                     <input type="number" name="media_max_size" class="form-control" value="{{ \App\Models\Setting::get('media_max_size', '2') }}">
                </div>
            </div>

            <div class="mt-5 border-top pt-4 text-end">
                <button type="submit" class="btn btn-primary px-5 fw-bold shadow-sm rounded-pill">
                    <i class="bi bi-save me-1"></i> Update Media Logic
                </button>
            </div>
        </form>
    </div>
</div>

{{-- Revised Media Settings with Watermark Upload --}}
@php
    $watermarkImg = \App\Models\Setting::get('watermark_image');
@endphp

<div class="card border-0 shadow-sm mt-4">
    <div class="card-body p-4">
        <h5 class="fw-bold text-primary mb-4">Gletra Brand Protection (Watermark)</h5>
        <form action="{{ route('admin.settings.update', 'media') }}" method="POST" enctype="multipart/form-data">
            @csrf
            <div class="row g-4">
                <div class="col-md-6">
                    <label class="form-label fw-bold small text-uppercase opacity-75">Watermark Brand Asset</label>
                    <div class="input-group">
                        <span class="input-group-text bg-white border-end-0"><i class="bi bi-image text-muted"></i></span>
                        <input type="file" name="watermark_image" class="form-control border-start-0 ps-0 shadow-none">
                    </div>
                    <div class="form-text small">Recommended: Transparent PNG (White or Gray).</div>
                    @if($watermarkImg)
                        <div class="mt-3 p-2 bg-dark rounded d-inline-block">
                            <img src="{{ media_url($watermarkImg) }}" alt="watermark" height="50">
                        </div>
                    @endif
                </div>

                <div class="col-md-6">
                    <label class="form-label fw-bold small text-uppercase opacity-75">Watermark Opacity ({{ \App\Models\Setting::get('watermark_opacity', 20) }}%)</label>
                    <input type="range" name="watermark_opacity" class="form-range" min="5" max="50" step="5" value="{{ \App\Models\Setting::get('watermark_opacity', 20) }}">
                    <div class="d-flex justify-content-between small text-muted">
                        <span>Faint</span>
                        <span>Visible</span>
                    </div>
                </div>
            </div>

            <div class="mt-4 border-top pt-4 text-end">
                <button type="submit" class="btn btn-dark px-4 fw-bold shadow-sm rounded-pill">
                    Upload & Update Branding
                </button>
            </div>
        </form>
    </div>
</div>
@endsection