@extends('admin.templates.layout')

@section('head')
<style>
    .settings-card {
        background: #fff;
        border: 1px solid #e9edf2;
        border-radius: 14px;
        overflow: hidden;
        margin-bottom: 20px;
    }
    .settings-card .card-hd {
        display: flex; align-items: center; gap: 12px;
        padding: 18px 22px; border-bottom: 1px solid #eef1f6;
    }
    .settings-card .card-hd .ico {
        width: 40px; height: 40px; border-radius: 10px;
        display: inline-flex; align-items: center; justify-content: center;
        font-size: 19px; flex-shrink: 0;
    }
    .settings-card .card-hd .ico.blue { background: #e0e9ff; color: #1d4ed8; }
    .settings-card .card-hd .ico.pink { background: #fce7f3; color: #be185d; }
    .settings-card .card-hd h5 {
        font-size: 16px; font-weight: 700; color: #0f172a;
        margin: 0 0 2px; letter-spacing: -.01em;
    }
    .settings-card .card-hd p { font-size: 12.5px; color: #64748b; margin: 0; }
    .settings-card .card-bd { padding: 22px; }

    .field-row { display: flex; flex-direction: column; gap: 6px; }
    .field-row label {
        font-size: 12px; font-weight: 600; color: #334155;
        text-transform: uppercase; letter-spacing: .4px; margin: 0;
    }
    .field-row .input-wrap { position: relative; }
    .field-row .input-wrap .f-icon {
        position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
        font-size: 17px; color: #94a3b8; pointer-events: none;
    }
    .field-row .input-wrap input {
        width: 100%; height: 44px;
        padding: 0 14px 0 40px;
        border: 1px solid #e5e9f0; border-radius: 9px;
        font-size: 13.5px; color: #0f172a; background: #fff;
        outline: none;
        transition: border-color .15s ease, box-shadow .15s ease;
    }
    .field-row .input-wrap input:focus {
        border-color: #3b82f6;
        box-shadow: 0 0 0 3px rgba(59,130,246,.1);
    }
    .field-row .input-wrap input::placeholder { color: #94a3b8; }

    .save-bar {
        display: flex; justify-content: flex-end;
        padding: 6px 0 20px;
    }
</style>
@endsection

@section('content')

<div class="row">
    <div class="col-lg-10 col-xl-9 mx-auto">

        <form id="settingsForm">

            {{-- ============ SITE & CONTACT ============ --}}
            <div class="settings-card">
                <div class="card-hd">
                    <div class="ico blue"><i class="ri-contacts-book-2-line"></i></div>
                    <div>
                        <h5>Site & Contact</h5>
                        <p>Public contact details shown across the platform</p>
                    </div>
                </div>
                <div class="card-bd">
                    <div class="row g-3">

                        <div class="col-md-6">
                            <div class="field-row">
                                <label>Site Name</label>
                                <div class="input-wrap">
                                    <i class="f-icon ri-global-line"></i>
                                    <input type="text" name="site_name"
                                           value="{{ $settings->site_name }}"
                                           placeholder="Your platform name">
                                </div>
                            </div>
                        </div>

                        <div class="col-md-6">
                            <div class="field-row">
                                <label>Email Address</label>
                                <div class="input-wrap">
                                    <i class="f-icon ri-mail-line"></i>
                                    <input type="email" name="contact_email"
                                           value="{{ $settings->contact_email }}"
                                           placeholder="support@example.com">
                                </div>
                            </div>
                        </div>

                        <div class="col-md-6">
                            <div class="field-row">
                                <label>Phone Number</label>
                                <div class="input-wrap">
                                    <i class="f-icon ri-phone-line"></i>
                                    <input type="tel" name="contact_phone"
                                           value="{{ $settings->contact_phone }}"
                                           placeholder="+971 4 000 0000">
                                </div>
                            </div>
                        </div>

                        <div class="col-md-6">
                            <div class="field-row">
                                <label>WhatsApp Number</label>
                                <div class="input-wrap">
                                    <i class="f-icon ri-whatsapp-line"></i>
                                    <input type="tel" name="whatsapp_number"
                                           value="{{ $settings->whatsapp_number }}"
                                           placeholder="+971500000000">
                                </div>
                            </div>
                        </div>

                        <div class="col-12">
                            <div class="field-row">
                                <label>Chat With Us Link</label>
                                <div class="input-wrap">
                                    <i class="f-icon ri-chat-3-line"></i>
                                    <input type="text" name="chat_with_us"
                                           value="{{ $settings->chat_with_us }}"
                                           placeholder="https://wa.me/971500000000 or any chat link">
                                </div>
                            </div>
                        </div>

                    </div>
                </div>
            </div>

            {{-- ============ SOCIAL LINKS ============ --}}
            <div class="settings-card">
                <div class="card-hd">
                    <div class="ico pink"><i class="ri-share-line"></i></div>
                    <div>
                        <h5>Social Links</h5>
                        <p>Add your social profiles — leave blank to hide</p>
                    </div>
                </div>
                <div class="card-bd">
                    <div class="row g-3">

                        <div class="col-md-6">
                            <div class="field-row">
                                <label>Facebook</label>
                                <div class="input-wrap">
                                    <i class="f-icon ri-facebook-circle-line"></i>
                                    <input type="url" name="social_facebook"
                                           value="{{ $settings->social_facebook }}"
                                           placeholder="https://facebook.com/yourpage">
                                </div>
                            </div>
                        </div>

                        <div class="col-md-6">
                            <div class="field-row">
                                <label>Instagram</label>
                                <div class="input-wrap">
                                    <i class="f-icon ri-instagram-line"></i>
                                    <input type="url" name="social_instagram"
                                           value="{{ $settings->social_instagram }}"
                                           placeholder="https://instagram.com/yourpage">
                                </div>
                            </div>
                        </div>

                        <div class="col-md-6">
                            <div class="field-row">
                                <label>LinkedIn</label>
                                <div class="input-wrap">
                                    <i class="f-icon ri-linkedin-circle-line"></i>
                                    <input type="url" name="social_linkedin"
                                           value="{{ $settings->social_linkedin }}"
                                           placeholder="https://linkedin.com/company/yourpage">
                                </div>
                            </div>
                        </div>

                        <div class="col-md-6">
                            <div class="field-row">
                                <label>TikTok</label>
                                <div class="input-wrap">
                                    <i class="f-icon ri-tiktok-line"></i>
                                    <input type="url" name="social_tiktok"
                                           value="{{ $settings->social_tiktok }}"
                                           placeholder="https://tiktok.com/@yourpage">
                                </div>
                            </div>
                        </div>

                        <div class="col-md-6">
                            <div class="field-row">
                                <label>Snapchat</label>
                                <div class="input-wrap">
                                    <i class="f-icon ri-snapchat-line"></i>
                                    <input type="url" name="social_snapchat"
                                           value="{{ $settings->social_snapchat }}"
                                           placeholder="https://snapchat.com/add/yourpage">
                                </div>
                            </div>
                        </div>

                    </div>
                </div>
            </div>

            {{-- ============ SAVE ============ --}}
            <div class="save-bar">
                <button type="submit" class="btn btn-primary" id="saveBtn">
                    <i class="ri-save-3-line me-1"></i>
                    <span class="btn-text">Save Settings</span>
                    <span class="spinner-border spinner-border-sm d-none ms-2"></span>
                </button>
            </div>

        </form>
    </div>
</div>

@endsection

@section('script')
<script>
$(function () {
    $('#settingsForm').on('submit', function (e) {
        e.preventDefault();

        var $btn = $('#saveBtn');
        $btn.prop('disabled', true);
        $btn.find('.btn-text').text('Saving...');
        $btn.find('.spinner-border').removeClass('d-none');

        $.ajax({
            url: '{{ route("admin.settings.update") }}',
            type: 'POST',
            data: $(this).serialize(),
            headers: { 'X-CSRF-TOKEN': '{{ csrf_token() }}' },
            success: function (r) {
                if (r.status === 'success') {
                    toastr.success(r.message);
                } else {
                    toastr.error(r.message);
                }
            },
            error: function (xhr) {
                toastr.error(xhr.responseJSON?.message || 'Failed to save settings.');
            },
            complete: function () {
                $btn.prop('disabled', false);
                $btn.find('.btn-text').text('Save Settings');
                $btn.find('.spinner-border').addClass('d-none');
            }
        });
    });
});
</script>
@endsection