@extends('admin.layout')

@section('content')
<div class="content-card" style="max-width: 800px; margin: 0 auto;">
    <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 25px;">
        <h3 style="margin: 0; border: none; padding: 0;">Site Settings</h3>
    </div>

    @if (session('success'))
        <div style="background-color: #e8f5e9; color: #2e7d32; padding: 15px; border-radius: 6px; margin-bottom: 20px;">
            {{ session('success') }}
        </div>
    @endif
    @if ($errors->any())
        <div style="background-color: #fdecea; color: #d32f2f; padding: 15px; border-radius: 6px; margin-bottom: 20px;">
            <ul style="margin: 0; padding-left: 20px;">
                @foreach ($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
        </div>
    @endif

    <form action="{{ route('admin.settings.update') }}" method="POST">
        @csrf
        @method('PUT')

        {{-- Contact Info --}}
        <div style="background:#f8f9fa; border-radius:10px; padding:20px; margin-bottom:20px; border-left:4px solid #0170B9;">
            <h4 style="margin:0 0 18px; font-size:15px; color:#0170B9;"><i class="fas fa-address-book"></i> Contact Information</h4>
            <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 15px; margin-bottom:15px;">
                <div>
                    <label style="display: block; font-weight: 500; margin-bottom: 6px; font-size:14px;">Helpline Number</label>
                    <input type="text" name="helpline" value="{{ old('helpline', $setting->helpline) }}" style="width: 100%; padding: 10px 12px; border: 1px solid #ddd; border-radius: 6px; font-size: 14px; font-family: inherit; box-sizing:border-box;">
                </div>
                <div>
                    <label style="display: block; font-weight: 500; margin-bottom: 6px; font-size:14px;">Email Address</label>
                    <input type="text" name="email" value="{{ old('email', $setting->email) }}" style="width: 100%; padding: 10px 12px; border: 1px solid #ddd; border-radius: 6px; font-size: 14px; font-family: inherit; box-sizing:border-box;">
                </div>
            </div>
            <div style="margin-bottom:15px;">
                <label style="display: block; font-weight: 500; margin-bottom: 6px; font-size:14px;">Corporate Office Address</label>
                <textarea name="corporate_office" rows="2" style="width: 100%; padding: 10px 12px; border: 1px solid #ddd; border-radius: 6px; font-size: 14px; font-family: inherit; resize:vertical; box-sizing:border-box;">{{ old('corporate_office', $setting->corporate_office) }}</textarea>
            </div>
            <div>
                <label style="display: block; font-weight: 500; margin-bottom: 6px; font-size:14px;">Factory Address</label>
                <textarea name="factory_address" rows="2" style="width: 100%; padding: 10px 12px; border: 1px solid #ddd; border-radius: 6px; font-size: 14px; font-family: inherit; resize:vertical; box-sizing:border-box;">{{ old('factory_address', $setting->factory_address) }}</textarea>
            </div>
        </div>

        {{-- Map --}}
        <div style="background:#f8f9fa; border-radius:10px; padding:20px; margin-bottom:20px; border-left:4px solid #00695c;">
            <h4 style="margin:0 0 12px; font-size:15px; color:#00695c;"><i class="fas fa-map-marked-alt"></i> Google Map</h4>
            <label style="display: block; font-weight: 500; margin-bottom: 6px; font-size:14px;">Embed HTML Code</label>
            <textarea name="map_url" id="map_url" rows="3" placeholder='Paste the <iframe src="..." ...></iframe> code from Google Maps here' style="width: 100%; padding: 10px 12px; border: 1px solid #ddd; border-radius: 6px; font-size: 13px; font-family: monospace; resize:vertical; box-sizing:border-box;">{{ old('map_url', $setting->map_url) }}</textarea>
            <small style="color: #888; display: block; margin-top: 5px;">Google Maps → Share → Embed a map → Copy &lt;iframe&gt; HTML</small>
        </div>

        {{-- Homepage Products Display --}}
        <div style="background:#f8f9fa; border-radius:10px; padding:20px; margin-bottom:25px; border-left:4px solid #e65100;">
            <h4 style="margin:0 0 12px; font-size:15px; color:#e65100;"><i class="fas fa-box"></i> Homepage Products Display</h4>
            <p style="color: #888; font-size: 13px; margin: 0 0 15px 0;">Choose how many products to show in the "Our Products" section on the homepage.</p>

            @php
                $currentLimit = old('homepage_products_limit', $setting->homepage_products_limit ?? 'all');
                $presets = ['all', '4', '8', '12', '16', '20'];
                $isCustom = !in_array($currentLimit, $presets);
            @endphp

            <div style="display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; margin-bottom: 15px;" id="product-limit-grid">
                @foreach($presets as $opt)
                <label style="cursor: pointer;">
                    <input type="radio" name="homepage_products_limit" value="{{ $opt }}" {{ $currentLimit == $opt ? 'checked' : '' }} style="display: none;" class="prod-limit-radio">
                    <div class="prod-limit-card" style="border: 2px solid {{ $currentLimit == $opt ? '#e65100' : '#dee2e6' }}; background: {{ $currentLimit == $opt ? '#fff3e0' : '#fff' }}; color: {{ $currentLimit == $opt ? '#e65100' : '#444' }}; border-radius: 8px; padding: 12px 6px; text-align: center; font-weight: 700; font-size: 16px; transition: all .2s;">
                        {{ $opt === 'all' ? 'All' : $opt }}
                    </div>
                </label>
                @endforeach
            </div>

            {{-- Custom input --}}
            <div style="display:flex; align-items:center; gap:12px; margin-top:5px;">
                <label style="display:flex; align-items:center; gap:8px; cursor:pointer; font-weight:600; font-size:14px;">
                    <input type="radio" name="homepage_products_limit" value="custom" id="custom-radio" {{ $isCustom ? 'checked' : '' }} class="prod-limit-radio" style="width:18px;height:18px;">
                    Custom Number:
                </label>
                <input type="number" id="custom-number-input" min="1" max="200" placeholder="e.g. 6"
                    value="{{ $isCustom ? $currentLimit : '' }}"
                    style="width: 120px; padding: 9px 12px; border: 2px solid {{ $isCustom ? '#e65100' : '#dee2e6' }}; border-radius: 8px; font-size: 15px; font-weight:700; color:#444;"
                    oninput="document.getElementById('custom-radio').value = this.value; document.getElementById('custom-radio').checked = true; highlightCustom();">
            </div>
        </div>

        {{-- Homepage Section Visibility --}}
        <div style="background:#f8f9fa; border-radius:10px; padding:20px; margin-bottom:25px; border-left:4px solid #6a1b9a;">
            <h4 style="margin:0 0 15px; font-size:15px; color:#6a1b9a;"><i class="fas fa-eye"></i> Homepage Section Visibility</h4>

            <div style="display:flex; align-items:center; justify-content:space-between; background:#fff; border:1px solid #e8e8e8; border-radius:10px; padding:16px 20px;">
                <div>
                    <p style="margin:0; font-weight:600; font-size:15px; color:#222;">Our Sister Concerns Section</p>
                    <p style="margin:4px 0 0; font-size:13px; color:#888;">Show or hide the Sister Concerns section on the homepage</p>
                </div>
                <label class="switch-label" style="position:relative; display:inline-block; width:54px; height:28px; flex-shrink:0; cursor:pointer;">
                    <input type="checkbox" name="show_sister_concerns" value="1" {{ old('show_sister_concerns', $setting->show_sister_concerns ?? true) ? 'checked' : '' }} style="opacity:0; width:0; height:0; position:absolute;">
                    <span class="slider-round" style="position:absolute; cursor:pointer; top:0; left:0; right:0; bottom:0; background-color:{{ old('show_sister_concerns', $setting->show_sister_concerns ?? true) ? '#0170B9' : '#ccc' }}; transition:.4s; border-radius:28px;">
                        <span style="position:absolute; content:''; height:20px; width:20px; left:{{ old('show_sister_concerns', $setting->show_sister_concerns ?? true) ? '30px' : '4px' }}; bottom:4px; background:white; border-radius:50%; transition:.4s; display:block;"></span>
                    </span>
                </label>
            </div>
        </div>

        <button type="submit" style="background-color: #0170B9; color: white; padding: 14px 24px; border: none; border-radius: 6px; font-size: 16px; font-weight: 600; cursor: pointer; width: 100%;"><i class="fa-solid fa-save"></i> Save Settings</button>
    </form>
</div>

<script>
    function highlightCustom() {
        document.querySelectorAll('.prod-limit-card').forEach(function(card) {
            card.style.borderColor = '#dee2e6';
            card.style.background = '#fff';
            card.style.color = '#444';
        });
        document.getElementById('custom-number-input').style.borderColor = '#e65100';
    }

    document.querySelectorAll('.prod-limit-radio').forEach(function(radio) {
        radio.addEventListener('change', function() {
            document.querySelectorAll('.prod-limit-card').forEach(function(card) {
                card.style.borderColor = '#dee2e6';
                card.style.background = '#fff';
                card.style.color = '#444';
            });
            document.getElementById('custom-number-input').style.borderColor = '#dee2e6';
            if (this.id !== 'custom-radio' && this.nextElementSibling) {
                this.nextElementSibling.style.borderColor = '#e65100';
                this.nextElementSibling.style.background = '#fff3e0';
                this.nextElementSibling.style.color = '#e65100';
            }
        });
    });
</script>
<script>
    document.addEventListener('DOMContentLoaded', function () {
        const cb = document.querySelector('input[name="show_sister_concerns"]');
        if (!cb) return;
        const track = cb.nextElementSibling;
        const knob = track ? track.querySelector('span') : null;
        if (!track || !knob) return;
        cb.addEventListener('change', function () {
            track.style.backgroundColor = this.checked ? '#0170B9' : '#ccc';
            knob.style.left = this.checked ? '30px' : '4px';
        });
    });
</script>
@endsection