@extends('admin.layout')

@section('title', 'Settings')
@section('page_heading', 'Website Settings')

@section('content')
<div class="card">
    <div class="card-body">

        @if(session('status'))
            <div class="alert alert-success">{{ session('status') }}</div>
        @endif
        @if($errors->any())
            <div class="alert alert-danger">
                <ul class="mb-0">@foreach($errors->all() as $e)<li>{{ $e }}</li>@endforeach</ul>
            </div>
        @endif

        <form method="POST" action="{{ route('admin.settings.update') }}" enctype="multipart/form-data" id="settingsForm" novalidate>
            @csrf

            <input type="hidden" name="delete_inner_banner" id="delete_inner_banner" value="0">
            <input type="hidden" name="delete_footer_bg" id="delete_footer_bg" value="0">

            <div class="row">

                {{-- Site Name --}}
                <div class="col-md-6 mb-3">
                    <label class="form-label fw-semibold">Site Name</label>
                    <input type="text" name="site_name" class="form-control" value="{{ old('site_name', $settings->site_name) }}" required>
                </div>

                {{-- Logo --}}
                <div class="col-md-6 mb-3">
                    <label class="form-label fw-semibold">Logo <small class="text-muted">(PNG/JPG, max 2 MB)</small></label>
                    <input type="file" name="logo" class="form-control" accept=".png,.jpg,.jpeg">
                    @if($settings->logo_path)
                        <div class="mt-2">
                            <img src="{{ asset('storage/' . $settings->logo_path) }}" alt="Logo" style="height:55px;">
                        </div>
                    @endif
                </div>

                {{-- Inner Banner Image --}}
                <div class="col-md-6 mb-3">
                    <label class="form-label fw-semibold">
                        Inner Banner Image
                        <span class="badge bg-info text-dark ms-1">Exactly 1920 × 500 px</span>
                    </label>
                    <input type="file" name="inner_banner" id="inner_banner_input"
                           class="form-control @error('inner_banner') is-invalid @enderror"
                           accept=".png,.jpg,.jpeg">
                    <div class="form-text">Used as the background for all inner page hero banners.</div>
                    <div id="banner-dim-error" class="text-danger small mt-1" style="display:none;">
                        <i class="fas fa-exclamation-triangle"></i>
                        Image must be exactly <strong>1920 × 500 px</strong>. Detected: <span id="banner-dim-detected"></span>
                    </div>
                    @error('inner_banner')
                        <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                    @if($settings->inner_banner_path)
                        <div class="mt-2">
                            <img src="{{ asset('storage/' . $settings->inner_banner_path) }}"
                                 alt="Inner Banner" style="max-width:100%;height:80px;object-fit:cover;border-radius:4px;">
                            <div class="small text-muted mt-1">Current inner banner</div>
                            <button type="button"
                                    class="btn btn-sm btn-outline-danger mt-2 js-delete-setting-image"
                                    data-target="delete_inner_banner"
                                    data-confirm="Delete Inner Banner Image?">
                                Delete
                            </button>
                        </div>
                    @else
                        <div class="mt-1 small text-muted">Currently using default template image.</div>
                    @endif
                </div>

                {{-- Footer Background Image --}}
                <div class="col-md-6 mb-3">
                    <label class="form-label fw-semibold">
                        Footer Background Image
                        <span class="badge bg-info text-dark ms-1">Exactly 1920 × 581 px</span>
                    </label>
                    <input type="file" name="footer_bg" id="footer_bg_input"
                           class="form-control @error('footer_bg') is-invalid @enderror"
                           accept=".png,.jpg,.jpeg">
                    <div class="form-text">Must be exactly 1920 × 581 px.</div>
                    <div id="footer-dim-error" class="text-danger small mt-1" style="display:none;">
                        <i class="fas fa-exclamation-triangle"></i>
                        Image must be exactly <strong>1920 × 581 px</strong>. Detected: <span id="footer-dim-detected"></span>
                    </div>
                    @error('footer_bg')
                        <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                    @if($settings->footer_bg_path)
                        <div class="mt-2">
                            <img src="{{ asset('storage/' . $settings->footer_bg_path) }}"
                                 alt="Footer BG" style="max-width:100%;height:80px;object-fit:cover;border-radius:4px;">
                            <div class="small text-muted mt-1">Current footer background</div>
                            <button type="button"
                                    class="btn btn-sm btn-outline-danger mt-2 js-delete-setting-image"
                                    data-target="delete_footer_bg"
                                    data-confirm="Delete Footer Background Image?">
                                Delete
                            </button>
                        </div>
                    @else
                        <div class="mt-1 small text-muted">Currently using default template background.</div>
                    @endif
                </div>

                {{-- Header Text --}}
                {{-- <div class="col-12 mb-3">
                    <label class="form-label fw-semibold">Header Text</label>
                    <textarea name="header_text" class="form-control" rows="2">{{ old('header_text', $settings->header_text) }}</textarea>
                </div> --}}

                {{-- Footer Text --}}
                {{-- <div class="col-12 mb-3">
                    <label class="form-label fw-semibold">Footer Text</label>
                    <textarea name="footer_text" class="form-control" rows="2">{{ old('footer_text', $settings->footer_text) }}</textarea>
                </div> --}}

                {{-- About Us --}}
                <div class="col-12 mb-3">
                    <label class="form-label fw-semibold">About FISEC India</label>
                    <textarea name="about_us" class="form-control" rows="6">{{ old('about_us', $settings->about_us) }}</textarea>
                </div>

                {{-- Address --}}
                <div class="col-12 mb-3">
                    <label class="form-label fw-semibold">Address</label>
                    <textarea name="address" class="form-control" rows="3">{{ old('address', $settings->address) }}</textarea>
                </div>

                {{-- Contact No --}}
                <div class="col-md-6 mb-3">
                    <label class="form-label fw-semibold">Contact No</label>
                    <input type="text" name="contact_no" class="form-control" value="{{ old('contact_no', $settings->contact_no) }}">
                </div>

                {{-- Email --}}
                <div class="col-md-6 mb-3">
                    <label class="form-label fw-semibold">Email</label>
                    <input type="email" name="email" class="form-control" value="{{ old('email', $settings->email) }}">
                </div>

            </div>

            <button type="submit" class="btn btn-primary" id="saveBtn">Save Settings</button>
        </form>
    </div>
</div>
@endsection

@push('scripts')
<script>
(function () {
    var saveBtn = document.getElementById('saveBtn');
    var invalidFields = {};

    function checkDimensions(inputId, errorId, detectedId, reqW, reqH, key) {
        var input      = document.getElementById(inputId);
        var errBox     = document.getElementById(errorId);
        var detectedEl = document.getElementById(detectedId);

        input.addEventListener('change', function () {
            var file = this.files[0];
            errBox.style.display = 'none';
            delete invalidFields[key];
            updateSaveBtn();

            if (!file) return;

            var img = new Image();
            var url = URL.createObjectURL(file);
            img.onload = function () {
                URL.revokeObjectURL(url);
                var w = img.naturalWidth, h = img.naturalHeight;
                if (w !== reqW || h !== reqH) {
                    detectedEl.textContent = w + ' × ' + h + ' px';
                    errBox.style.display = 'block';
                    invalidFields[key] = true;
                } else {
                    errBox.style.display = 'none';
                    delete invalidFields[key];
                }
                updateSaveBtn();
            };
            img.src = url;
        });
    }

    function updateSaveBtn() {
        saveBtn.disabled = Object.keys(invalidFields).length > 0;
    }

    checkDimensions('inner_banner_input', 'banner-dim-error',  'banner-dim-detected',  1920, 500, 'banner');
    checkDimensions('footer_bg_input',    'footer-dim-error',  'footer-dim-detected',  1920, 581, 'footer');

    document.querySelectorAll('.js-delete-setting-image').forEach(function (btn) {
        btn.addEventListener('click', function () {
            var targetId = btn.getAttribute('data-target');
            var message = btn.getAttribute('data-confirm') || 'Delete this image?';
            var hidden = document.getElementById(targetId);
            var form = document.getElementById('settingsForm');

            if (!hidden || !form) return;
            if (!window.confirm(message)) return;

            hidden.value = '1';
            form.submit();
        });
    });
})();
</script>
@endpush