@extends('voyager::master')

@section('page_title', 'Policy Top Bar & Sidebar Settings')

@section('css')
<style>
    /* Sidebar offset & left padding fix */
    .app-container .side-body {
        margin-left: 35px !important;
        padding-left: 15px !important;
        padding-right: 25px !important;
    }
    .app-container.expanded .side-body {
        margin-left: 225px !important;
        padding-left: 15px !important;
        padding-right: 25px !important;
    }
    @media (max-width: 768px) {
        .app-container .side-body,
        .app-container.expanded .side-body {
            margin-left: 0 !important;
            padding-left: 15px !important;
            padding-right: 15px !important;
        }
    }

    .settings-wrapper {
        margin-top: 5px;
        margin-bottom: 90px;
    }

    /* Header layout overrides to prevent Voyager float issues */
    .policy-admin-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;
        gap: 15px;
        margin-top: 10px;
        margin-bottom: 20px;
        padding-bottom: 14px;
        border-bottom: 1px solid #e2e8f0;
    }
    .policy-admin-header .page-title {
        float: none !important;
        padding: 0 !important;
        margin: 0 0 6px 0 !important;
        font-size: 24px;
        font-weight: 700;
        color: #0f172a;
        line-height: 1.2;
        display: inline-flex;
        align-items: center;
        gap: 12px;
        height: auto !important;
        position: static !important;
    }
    .policy-admin-header .page-title > i {
        position: static !important;
        font-size: 24px !important;
        color: #166534;
        margin: 0 !important;
    }
    .policy-admin-header p.text-muted {
        margin: 0 !important;
        font-size: 13.5px;
        color: #64748b;
    }
    .policy-admin-header .header-actions {
        display: flex;
        align-items: center;
        gap: 10px;
    }
    .policy-admin-header .header-actions .btn {
        float: none !important;
        margin: 0 !important;
        font-weight: 600;
    }

    .panel-settings {
        border-radius: 8px;
        border: 1px solid #e2e8f0;
        box-shadow: 0 2px 6px rgba(0,0,0,0.04);
        background: #fff;
        margin-bottom: 24px;
        overflow: hidden;
    }
    .panel-settings .panel-heading {
        background: #f8fafc;
        border-bottom: 1px solid #e2e8f0;
        padding: 16px 20px;
    }
    .panel-settings .panel-title {
        font-size: 16px;
        font-weight: 700;
        color: #1e293b;
        margin: 0;
        display: flex;
        align-items: center;
        gap: 10px;
    }

    /* Rock-Solid Unified Icon Input Component */
    .icon-input-group {
        display: flex !important;
        align-items: stretch;
        width: 100%;
        position: relative;
    }
    .icon-input-group .icon-addon-preview {
        width: 40px;
        min-width: 40px;
        max-width: 40px;
        height: 34px;
        background: #f8fafc;
        border: 1px solid #cbd5e1;
        border-right: none;
        border-radius: 4px 0 0 4px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        color: #166534;
        font-size: 15px;
        flex-shrink: 0;
        user-select: none;
    }
    .icon-input-group .icon-addon-preview i {
        font-family: "Font Awesome 6 Free", "Font Awesome 5 Free", FontAwesome, sans-serif !important;
        font-weight: 900;
        font-style: normal;
        line-height: 1;
    }
    .icon-input-group .form-control {
        border-radius: 0 !important;
        height: 34px !important;
        font-size: 13px !important;
        line-height: 1.5 !important;
        border: 1px solid #cbd5e1 !important;
        flex: 1;
        min-width: 0;
        margin: 0 !important;
        box-shadow: none !important;
    }
    .icon-input-group .form-control:focus {
        border-color: #22a7f0 !important;
        position: relative;
        z-index: 2;
    }
    .icon-input-group .btn-icon-browse {
        height: 34px !important;
        padding: 0 12px !important;
        border-radius: 0 4px 4px 0 !important;
        border: 1px solid #cbd5e1 !important;
        border-left: none !important;
        background: #f8fafc !important;
        color: #0284c7 !important;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 13px !important;
        font-weight: 600;
        gap: 6px;
        flex-shrink: 0;
        cursor: pointer;
        transition: all 0.15s ease;
    }
    .icon-input-group .btn-icon-browse:hover {
        background: #e0f2fe !important;
        border-color: #bae6fd !important;
        color: #0369a1 !important;
    }

    /* Responsive Sticky Bottom Action Bar */
    .sticky-submit-bar {
        position: fixed;
        bottom: 0;
        left: 75px; /* Voyager collapsed sidebar offset */
        right: 0;
        background: #ffffff;
        border-top: 1px solid #e2e8f0;
        padding: 14px 28px;
        box-shadow: 0 -4px 15px rgba(0,0,0,0.06);
        z-index: 999;
        display: flex;
        align-items: center;
        justify-content: space-between;
        transition: left 0.25s ease;
    }
    .expanded .sticky-submit-bar {
        left: 265px; /* Voyager expanded sidebar offset */
    }
    @media (max-width: 768px) {
        .sticky-submit-bar,
        .expanded .sticky-submit-bar {
            left: 0;
            padding: 10px 15px;
        }
    }
</style>
@stop

@section('page_header')
    <div class="container-fluid">
        <div class="policy-admin-header">
            <div>
                <h1 class="page-title">
                    <i class="voyager-settings"></i> Policy Top Bar & Sidebar Settings
                </h1>
                <p class="text-muted">
                    Customize the shared top bar header, contact & compliance sidebar card, and document navigation.
                </p>
            </div>
            <div class="header-actions">
                <a href="{{ route('voyager.policies.index') }}" class="btn btn-default">
                    <i class="voyager-angle-left"></i> Back to All Policies
                </a>
            </div>
        </div>
    </div>
@stop

@section('content')
<div class="page-content settings-wrapper container-fluid">
    @include('voyager::alerts')

    <form action="{{ route('voyager.policy_settings.update') }}" method="POST">
        {{ csrf_field() }}
        {{ method_field('PUT') }}

        <div class="row">
            {{-- Left Column: Top Bar & Document Switcher --}}
            <div class="col-md-6">
                <!-- Top Bar Settings -->
                <div class="panel panel-settings">
                    <div class="panel-heading">
                        <h3 class="panel-title"><i class="fa fa-window-maximize text-primary"></i> Policy Top Bar Header</h3>
                    </div>
                    <div class="panel-body">
                        <p class="text-muted" style="font-size: 13px;">
                            Configure the banner elements rendered at the very top of each policy page.
                        </p>

                        <div class="form-group">
                            <label for="topbar_category_pill_text"><strong>Category Pill Label</strong></label>
                            <input type="text" class="form-control" id="topbar_category_pill_text" name="topbar_category_pill_text" value="{{ old('topbar_category_pill_text', $settings['topbar_category_pill_text'] ?? 'Legal Documentation & Governance') }}" placeholder="e.g. Legal Documentation & Governance">
                            <small class="text-muted">Appears in the header pill above the page title.</small>
                        </div>

                        <div class="form-group">
                            <label for="topbar_category_pill_icon"><strong>Pill Icon</strong></label>
                            <div class="icon-input-group">
                                <span class="icon-addon-preview" id="topbar_icon_addon">
                                    <i class="fa {{ $settings['topbar_category_pill_icon'] ?? 'fa-shield-halved' }}"></i>
                                </span>
                                <input type="text" class="form-control" id="topbar_category_pill_icon" name="topbar_category_pill_icon" value="{{ old('topbar_category_pill_icon', $settings['topbar_category_pill_icon'] ?? 'fa-shield-halved') }}" placeholder="e.g. fa-shield-halved">
                                <button class="btn-icon-browse" type="button" data-toggle="fa-picker" data-target="#topbar_category_pill_icon" data-preview="#topbar_icon_addon" title="Open Icons Library">
                                    <i class="fas fa-icons"></i> Select Icon
                                </button>
                            </div>
                            <small class="text-muted" style="margin-top: 4px; display: block;">Displays alongside the category pill on the top bar.</small>
                        </div>

                        <div class="form-group" style="margin-top: 15px;">
                            <label style="cursor: pointer; display: flex; align-items: center; gap: 8px;">
                                <input type="checkbox" name="topbar_show_effective_date" value="1" {{ ($settings['topbar_show_effective_date'] ?? '1') == '1' ? 'checked' : '' }} style="margin: 0; width: 17px; height: 17px;">
                                <strong>Show Effective Date Badge</strong>
                            </label>
                            <small class="text-muted" style="margin-left: 25px; display: block;">Displays "Effective Date: [Month Year]" badge on the policy header.</small>
                        </div>
                    </div>
                </div>

                <!-- Document Switcher Settings -->
                <div class="panel panel-settings">
                    <div class="panel-heading">
                        <h3 class="panel-title"><i class="fa fa-folder-open text-warning"></i> Document Switcher Sidebar</h3>
                    </div>
                    <div class="panel-body">
                        <p class="text-muted" style="font-size: 13px;">
                            Controls the policy navigation list shown on the sidebar and in the mobile accordion.
                        </p>

                        <div class="form-group">
                            <label for="switcher_title"><strong>Sidebar Section Heading</strong></label>
                            <input type="text" class="form-control" id="switcher_title" name="switcher_title" value="{{ old('switcher_title', $settings['switcher_title'] ?? 'Organization Policies') }}" placeholder="e.g. Organization Policies">
                        </div>

                        <div class="form-group">
                            <label style="cursor: pointer; display: flex; align-items: center; gap: 8px;">
                                <input type="checkbox" name="switcher_enabled" value="1" {{ ($settings['switcher_enabled'] ?? '1') == '1' ? 'checked' : '' }} style="margin: 0; width: 17px; height: 17px;">
                                <strong>Enable Document Switcher Menu</strong>
                            </label>
                            <small class="text-muted" style="margin-left: 25px; display: block;">When enabled, visitors can easily toggle between all active policies.</small>
                        </div>
                    </div>
                </div>
            </div>

            {{-- Right Column: Contact & Grievances Sidebar --}}
            <div class="col-md-6">
                <div class="panel panel-settings">
                    <div class="panel-heading">
                        <h3 class="panel-title"><i class="fa fa-headset text-success"></i> Contact & Grievance Sidebar Card</h3>
                    </div>
                    <div class="panel-body">
                        <p class="text-muted" style="font-size: 13px;">
                            Configure the dedicated assistance/compliance card displayed alongside policy pages.
                        </p>

                        <div class="row">
                            <div class="col-sm-7">
                                <div class="form-group">
                                    <label for="sidebar_card_title"><strong>Card Title</strong></label>
                                    <input type="text" class="form-control" id="sidebar_card_title" name="sidebar_card_title" value="{{ old('sidebar_card_title', $settings['sidebar_card_title'] ?? 'Questions or Grievances?') }}" placeholder="e.g. Questions or Grievances?">
                                </div>
                            </div>
                            <div class="col-sm-5">
                                <div class="form-group">
                                    <label for="sidebar_icon"><strong>Card Icon</strong></label>
                                    <div class="icon-input-group">
                                        <span class="icon-addon-preview" id="sidebar_icon_addon">
                                            <i class="fa {{ $settings['sidebar_icon'] ?? 'fa-headset' }}"></i>
                                        </span>
                                        <input type="text" class="form-control" id="sidebar_icon" name="sidebar_icon" value="{{ old('sidebar_icon', $settings['sidebar_icon'] ?? 'fa-headset') }}" placeholder="e.g. fa-headset">
                                        <button class="btn-icon-browse" type="button" data-toggle="fa-picker" data-target="#sidebar_icon" data-preview="#sidebar_icon_addon" title="Open Icons Library">
                                            <i class="fas fa-icons"></i>
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="form-group">
                            <label for="sidebar_card_desc"><strong>Description Text</strong></label>
                            <textarea class="form-control" id="sidebar_card_desc" name="sidebar_card_desc" rows="3">{{ old('sidebar_card_desc', $settings['sidebar_card_desc'] ?? 'Our legal and compliance cell responds to inquiries, audit requests, and grievance matters within 48 business hours.') }}</textarea>
                        </div>

                        <div class="row">
                            <div class="col-sm-6">
                                <div class="form-group">
                                    <label for="sidebar_email"><strong>Compliance Email</strong></label>
                                    <input type="email" class="form-control" id="sidebar_email" name="sidebar_email" value="{{ old('sidebar_email', $settings['sidebar_email'] ?? 'info@farmersforforests.org') }}">
                                </div>
                            </div>
                            <div class="col-sm-6">
                                <div class="form-group">
                                    <label for="sidebar_phone"><strong>Compliance Phone</strong></label>
                                    <input type="text" class="form-control" id="sidebar_phone" name="sidebar_phone" value="{{ old('sidebar_phone', $settings['sidebar_phone'] ?? '+91 93566 84521') }}">
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-sm-6">
                                <div class="form-group">
                                    <label for="sidebar_hours"><strong>Working Hours</strong></label>
                                    <input type="text" class="form-control" id="sidebar_hours" name="sidebar_hours" value="{{ old('sidebar_hours', $settings['sidebar_hours'] ?? 'Mon – Fri: 9:30 AM – 6:00 PM IST') }}">
                                </div>
                            </div>
                            <div class="col-sm-6">
                                <div class="form-group">
                                    <label for="sidebar_address"><strong>Office Address</strong></label>
                                    <input type="text" class="form-control" id="sidebar_address" name="sidebar_address" value="{{ old('sidebar_address', $settings['sidebar_address'] ?? 'Pune, Maharashtra, India') }}">
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-sm-6">
                                <div class="form-group">
                                    <label for="sidebar_btn_text"><strong>CTA Button Label</strong></label>
                                    <input type="text" class="form-control" id="sidebar_btn_text" name="sidebar_btn_text" value="{{ old('sidebar_btn_text', $settings['sidebar_btn_text'] ?? 'Email Compliance Cell') }}">
                                </div>
                            </div>
                            <div class="col-sm-6">
                                <div class="form-group">
                                    <label for="sidebar_btn_url"><strong>CTA Button Link / URL</strong></label>
                                    <input type="text" class="form-control" id="sidebar_btn_url" name="sidebar_btn_url" value="{{ old('sidebar_btn_url', $settings['sidebar_btn_url'] ?? 'mailto:info@farmersforforests.org') }}">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Sticky Submit Footer -->
        <div class="sticky-submit-bar">
            <div>
                <a href="{{ route('voyager.policies.index') }}" class="btn btn-default">
                    Cancel
                </a>
            </div>
            <div>
                <button type="submit" class="btn btn-success btn-lg" style="min-width: 160px; font-weight: 700;">
                    <i class="voyager-check"></i> Save Settings
                </button>
            </div>
        </div>
    </form>
</div>
@stop

@section('javascript')
<script>
$(document).ready(function() {
    function getFaClass(iconStr) {
        if (typeof window.getUnifiedIconClass === 'function') {
            return window.getUnifiedIconClass(iconStr);
        }
        if (!iconStr) return 'fa fa-bookmark';
        iconStr = String(iconStr).trim();
        if (iconStr.startsWith('ri-') || iconStr.startsWith('bi-') || iconStr.startsWith('fa-')) {
            return iconStr;
        }
        return 'fa fa-' + iconStr;
    }

    $('#sidebar_icon').on('input', function() {
        $('#sidebar_icon_addon i').attr('class', getFaClass($(this).val() || 'fa-headset'));
    });
    $('#topbar_category_pill_icon').on('input', function() {
        $('#topbar_icon_addon i').attr('class', getFaClass($(this).val() || 'fa-shield-halved'));
    });
});
</script>
@stop