@extends('admin.layouts.master-soyuz')
@section('title', __('Footer Customisation | '))
@section('body')

@component('admin.component.breadcumb', ['thirdactive' => 'active'])
    @slot('heading'){{ __('Footer Customisation') }}@endslot
    @slot('menu1'){{ __('Front Settings') }}@endslot
    @slot('menu2'){{ __('Footer') }}@endslot
@endcomponent

<div class="contentbar">
    @if($errors->any())
        <div class="alert alert-danger">
            @foreach($errors->all() as $e)<p class="mb-0">{{ $e }}</p>@endforeach
        </div>
    @endif

    @if(session('updated') || session('added') || session('success'))
        <div class="alert alert-success">{{ session('updated') ?? session('added') ?? session('success') }}</div>
    @endif

    <form action="{{ url('admin/footer/') }}" method="POST" enctype="multipart/form-data" id="footerForm">
        @csrf

        <div class="row">
            {{-- LEFT — fields --}}
            <div class="col-lg-8">

                {{-- About paragraph --}}
                <div class="card m-b-30">
                    <div class="card-header">
                        <h5 class="card-title mb-0"><i class="feather icon-file-text mr-2 text-primary"></i>{{ __('About / Brand Description') }}</h5>
                    </div>
                    <div class="card-body">
                        <label class="font-weight-600 mb-2">{{ __('Short paragraph next to the storefront logo') }}</label>
                        <textarea name="content" rows="4" class="form-control sh-select-bare" maxlength="500" placeholder="{{ __('Your trusted online marketplace for electronics, mobiles, fashion, home, beauty & more.') }}">{{ old('content', $row->content ?? '') }}</textarea>
                        <small class="text-muted">{{ __('Recommended: 1–2 short sentences. Plain text — HTML tags are stripped on the storefront.') }}</small>
                    </div>
                </div>

                {{-- Quick benefits bar --}}
                <div class="card m-b-30">
                    <div class="card-header d-flex align-items-center justify-content-between">
                        <h5 class="card-title mb-0"><i class="feather icon-grid mr-2 text-primary"></i>{{ __('Quick Benefits Bar') }}</h5>
                        <small class="text-muted">{{ __('Four tiles shown above the storefront footer') }}</small>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            @foreach([
                                ['name' => 'shiping', 'icon' => 'icon_section1', 'placeholder' => __('Shipping over all world')],
                                ['name' => 'mobile',  'icon' => 'icon_section2', 'placeholder' => __('24×7 Support')],
                                ['name' => 'return',  'icon' => 'icon_section3', 'placeholder' => __('30 Days Return')],
                                ['name' => 'money',   'icon' => 'icon_section4', 'placeholder' => __('Money Back Guarantee')],
                            ] as $i => $tile)
                                @php $iconVal = $row->{$tile['icon']} ?? ''; @endphp
                                <div class="col-md-6 mb-3">
                                    <div style="border:1px solid var(--adm-border); border-radius:12px; padding:14px;">
                                        <div class="d-flex align-items-center mb-2" style="gap:10px;">
                                            <span class="bf-icon-preview" data-target="{{ $tile['icon'] }}-preview" style="width:40px; height:40px; border-radius:10px; background:rgba(59,109,240,0.10); color:#3b6df0; display:grid; place-items:center;">
                                                <i id="{{ $tile['icon'] }}-preview" class="{{ $iconVal ?: 'fa fa-square-o' }}" style="font-size:18px;"></i>
                                            </span>
                                            <strong style="color:var(--adm-text-dark);">{{ __('Tile :n', ['n' => $i + 1]) }}</strong>
                                        </div>

                                        <label class="font-weight-600 mb-2 d-block">{{ __('Label') }}</label>
                                        <input type="text" class="form-control sh-select-bare" name="{{ $tile['name'] }}" value="{{ old($tile['name'], $row->{$tile['name']} ?? '') }}" placeholder="{{ $tile['placeholder'] }}">

                                        <label class="font-weight-600 mb-2 mt-3 d-block">{{ __('Icon') }}</label>
                                        <div class="input-group">
                                            <input type="text" class="form-control iconvalue sh-select-bare" id="{{ $tile['icon'] }}" name="{{ $tile['icon'] }}" value="{{ $iconVal }}" placeholder="fa fa-truck" data-preview="{{ $tile['icon'] }}-preview">
                                            <div class="input-group-append">
                                                <button type="button" class="btnicon2 btn btn-secondary-rgba" role="iconpicker"></button>
                                            </div>
                                        </div>
                                        <small class="text-muted">{{ __('Pick a Font Awesome 4 icon from the picker, or type the class manually (e.g. fa fa-truck).') }}</small>
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    </div>
                </div>

                {{-- Column headings --}}
                <div class="card m-b-30">
                    <div class="card-header">
                        <h5 class="card-title mb-0"><i class="feather icon-list mr-2 text-primary"></i>{{ __('Footer Column Headings') }}</h5>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            @foreach([
                                ['name' => 'footer2', 'placeholder' => __('Customer Services'), 'label' => __('Column 1 — under About')],
                                ['name' => 'footer3', 'placeholder' => __('Our Policies'),     'label' => __('Column 2 — middle')],
                                ['name' => 'footer4', 'placeholder' => __('Quick Tour'),       'label' => __('Column 3 — right')],
                            ] as $col)
                                <div class="col-md-4 mb-3">
                                    <label class="font-weight-600 mb-2">{{ $col['label'] }}</label>
                                    <input type="text" class="form-control sh-select-bare" name="{{ $col['name'] }}" value="{{ old($col['name'], $row->{$col['name']} ?? '') }}" placeholder="{{ $col['placeholder'] }}">
                                </div>
                            @endforeach
                        </div>
                        <small class="text-muted d-block">{{ __('These are the section titles. Add the actual links in the Footer Menu section.') }}</small>
                    </div>
                </div>
            </div>{{-- /col-lg-8 ABOVE FOOTER FORM --}}

            {{-- RIGHT — sticky save card + tips --}}
            <div class="col-lg-4">
                <div class="card m-b-30" style="position: sticky; top: 80px;">
                    <div class="card-header">
                        <h5 class="card-title mb-0"><i class="feather icon-save mr-2 text-primary"></i>{{ __('Save Changes') }}</h5>
                    </div>
                    <div class="card-body">
                        <p class="text-muted small mb-3">{{ __('Updates apply on the next storefront page load.') }}</p>
                        <button type="submit" class="btn btn-primary-rgba btn-block" {{ env('DEMO_LOCK') == 0 ? '' : 'disabled' }}>
                            <i class="feather icon-check-circle mr-1"></i>{{ __('Save Footer Settings') }}
                        </button>
                        <a href="{{ url('/') }}" target="_blank" class="btn btn-secondary-rgba btn-block mt-2">
                            <i class="feather icon-external-link mr-1"></i>{{ __('Preview storefront') }}
                        </a>
                    </div>
                </div>

                <div class="card m-b-30">
                    <div class="card-header">
                        <h5 class="card-title mb-0"><i class="feather icon-info mr-2 text-primary"></i>{{ __('Where these show') }}</h5>
                    </div>
                    <div class="card-body">
                        <ul class="list-unstyled small text-muted mb-0" style="line-height:1.7;">
                            <li class="mb-2"><strong style="color:var(--adm-text-dark);">{{ __('About') }}</strong> — {{ __('Renders next to the logo in the storefront footer.') }}</li>
                            <li class="mb-2"><strong style="color:var(--adm-text-dark);">{{ __('Quick Benefits Bar') }}</strong> — {{ __('The 4 icon tiles directly above the footer columns.') }}</li>
                            <li class="mb-2"><strong style="color:var(--adm-text-dark);">{{ __('Column Headings') }}</strong> — {{ __('Section titles for the 3 footer link columns.') }}</li>
                            <li>{{ __('Each tile is hidden automatically if both its label and icon are empty.') }}</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </form>

    {{-- ============= SOCIAL ICONS (separate forms — can't be nested) ============= --}}
    <div id="social"></div>
    <div class="card m-b-30">
        <div class="card-header d-flex align-items-center justify-content-between">
            <h5 class="card-title mb-0"><i class="feather icon-share-2 mr-2 text-primary"></i>{{ __('Social Icons') }}</h5>
            <small class="text-muted">{{ __('Show in the storefront footer next to copyright') }}</small>
        </div>

        <div class="card-body">
            @php
                $iconChoices = [
                    'facebook'  => ['label' => 'Facebook',  'class' => 'fa fa-facebook',  'tone' => '#1877f2'],
                    'fb'        => ['label' => 'Facebook',  'class' => 'fa fa-facebook',  'tone' => '#1877f2'],
                    'twitter'   => ['label' => 'Twitter',   'class' => 'fa fa-twitter',   'tone' => '#1da1f2'],
                    'tw'        => ['label' => 'Twitter',   'class' => 'fa fa-twitter',   'tone' => '#1da1f2'],
                    'instagram' => ['label' => 'Instagram', 'class' => 'fa fa-instagram', 'tone' => '#e4405f'],
                    'ig'        => ['label' => 'Instagram', 'class' => 'fa fa-instagram', 'tone' => '#e4405f'],
                    'youtube'   => ['label' => 'YouTube',   'class' => 'fa fa-youtube-play', 'tone' => '#ff0000'],
                    'yt'        => ['label' => 'YouTube',   'class' => 'fa fa-youtube-play', 'tone' => '#ff0000'],
                    'linkedin'  => ['label' => 'LinkedIn',  'class' => 'fa fa-linkedin',  'tone' => '#0a66c2'],
                    'in'        => ['label' => 'LinkedIn',  'class' => 'fa fa-linkedin',  'tone' => '#0a66c2'],
                    'pinterest' => ['label' => 'Pinterest', 'class' => 'fa fa-pinterest', 'tone' => '#e60023'],
                    'pin'       => ['label' => 'Pinterest', 'class' => 'fa fa-pinterest', 'tone' => '#e60023'],
                    'whatsapp'  => ['label' => 'WhatsApp',  'class' => 'fa fa-whatsapp',  'tone' => '#25d366'],
                    'wa'        => ['label' => 'WhatsApp',  'class' => 'fa fa-whatsapp',  'tone' => '#25d366'],
                    'telegram'  => ['label' => 'Telegram',  'class' => 'fa fa-telegram',  'tone' => '#0088cc'],
                    'tg'        => ['label' => 'Telegram',  'class' => 'fa fa-telegram',  'tone' => '#0088cc'],
                    'tiktok'    => ['label' => 'TikTok',    'class' => 'fa fa-music',     'tone' => '#000000'],
                    'snapchat'  => ['label' => 'Snapchat',  'class' => 'fa fa-snapchat-ghost', 'tone' => '#fffc00'],
                    'discord'   => ['label' => 'Discord',   'class' => 'fa fa-comments',  'tone' => '#5865f2'],
                    'github'    => ['label' => 'GitHub',    'class' => 'fa fa-github',    'tone' => '#181717'],
                ];
            @endphp

            {{-- Existing icons (stacked cards — keeps each form valid HTML) --}}
            @if(count($socials))
                <div class="mb-3" style="display:flex; flex-direction:column; gap:10px;">
                    @foreach($socials as $s)
                        @php $meta = $iconChoices[strtolower((string) $s->icon)] ?? ['label' => $s->icon, 'class' => 'fa fa-share-alt', 'tone' => '#3b6df0']; @endphp
                        <div style="display:flex; align-items:center; gap:14px; padding:12px 14px; border:1px solid var(--adm-border); border-radius:10px; background:#fff;">
                            <span style="width:42px; height:42px; flex:0 0 auto; border-radius:10px; display:grid; place-items:center; background: {{ $meta['tone'] }}1a; color: {{ $meta['tone'] }};">
                                <i class="{{ $meta['class'] }}" style="font-size:18px;"></i>
                            </span>

                            <form action="{{ url('admin/social/' . $s->id) }}" method="POST" style="flex:1 1 auto; display:flex; flex-wrap:wrap; align-items:center; gap:10px;">
                                @csrf
                                @method('PUT')
                                <select name="icon" class="form-control sh-select-bare" style="flex:0 0 170px; min-width:140px;">
                                    @foreach(['facebook'=>'Facebook','twitter'=>'Twitter','instagram'=>'Instagram','youtube'=>'YouTube','linkedin'=>'LinkedIn','pinterest'=>'Pinterest','whatsapp'=>'WhatsApp','telegram'=>'Telegram','tiktok'=>'TikTok','snapchat'=>'Snapchat','discord'=>'Discord','github'=>'GitHub'] as $val => $label)
                                        <option value="{{ $val }}" {{ strtolower($s->icon) === $val ? 'selected' : '' }}>{{ $label }}</option>
                                    @endforeach
                                    @if(in_array(strtolower($s->icon), ['fb','tw','ig','yt','in','pin','wa','tg']))
                                        <option value="{{ $s->icon }}" selected>{{ $s->icon }} ({{ __('legacy') }})</option>
                                    @endif
                                </select>
                                <input type="url" name="url" value="{{ $s->url }}" class="form-control sh-select-bare" placeholder="https://example.com/your-handle" style="flex:1 1 220px; min-width:180px;">
                                <input type="hidden" name="status" value="0">
                                <label class="switch mb-0" title="{{ __('Active') }}" style="flex:0 0 auto;">
                                    <input type="checkbox" name="status" value="1" {{ $s->status == 1 ? 'checked' : '' }}>
                                    <span class="knob"></span>
                                </label>
                                <button type="submit" class="btn btn-primary-rgba btn-sm" {{ env('DEMO_LOCK') == 0 ? '' : 'disabled' }} style="flex:0 0 auto;">
                                    <i class="feather icon-save mr-1"></i>{{ __('Save') }}
                                </button>
                            </form>

                            <form action="{{ url('admin/social/' . $s->id) }}" method="POST" onsubmit="return confirm('{{ __('Delete this social icon?') }}');" style="flex:0 0 auto;">
                                @csrf
                                @method('DELETE')
                                <button type="submit" class="btn btn-danger-rgba btn-sm" {{ env('DEMO_LOCK') == 0 ? '' : 'disabled' }} title="{{ __('Delete') }}">
                                    <i class="feather icon-trash"></i>
                                </button>
                            </form>
                        </div>
                    @endforeach
                </div>
            @else
                <p class="text-muted mb-3">{{ __('No social icons yet — add the first one below.') }}</p>
            @endif

            {{-- Add new icon --}}
            <div style="border:1px dashed var(--adm-border); border-radius:12px; padding:16px;">
                <h6 class="mb-3" style="font-weight:700;"><i class="feather icon-plus-circle mr-1 text-success"></i>{{ __('Add a new social icon') }}</h6>
                <form action="{{ route('social.store') }}" method="POST">
                    @csrf
                    <div class="row align-items-end">
                        <div class="col-md-3 mb-2">
                            <label class="font-weight-600 mb-2">{{ __('Network') }}</label>
                            <select name="icon" class="form-control sh-select-bare" required>
                                @foreach(['facebook'=>'Facebook','twitter'=>'Twitter','instagram'=>'Instagram','youtube'=>'YouTube','linkedin'=>'LinkedIn','pinterest'=>'Pinterest','whatsapp'=>'WhatsApp','telegram'=>'Telegram','tiktok'=>'TikTok','snapchat'=>'Snapchat','discord'=>'Discord','github'=>'GitHub'] as $v => $l)
                                    <option value="{{ $v }}">{{ $l }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-md-6 mb-2">
                            <label class="font-weight-600 mb-2">{{ __('URL') }} <span class="text-danger">*</span></label>
                            <input type="url" name="url" required class="form-control sh-select-bare" placeholder="https://facebook.com/yourbrand">
                        </div>
                        <div class="col-md-1 mb-2 text-center">
                            <label class="font-weight-600 mb-2 d-block">{{ __('Active') }}</label>
                            <input type="hidden" name="status" value="0">
                            <label class="switch mb-0">
                                <input type="checkbox" name="status" value="1" checked>
                                <span class="knob"></span>
                            </label>
                        </div>
                        <div class="col-md-2 mb-2">
                            <button type="submit" class="btn btn-primary-rgba btn-block" {{ env('DEMO_LOCK') == 0 ? '' : 'disabled' }}>
                                <i class="feather icon-plus mr-1"></i>{{ __('Add Icon') }}
                            </button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

@endsection

@section('custom-script')
<script>
$('.btnicon2').each(function () {
    var icon = $(this).closest('div.input-group').find('input.iconvalue').val();
    ip(this, icon);
});

function ip(btn, icon){
    $(btn).iconpicker()
        .iconpicker('setAlign', 'center')
        .iconpicker('setCols', 5)
        .iconpicker('setIconset', { iconClass: 'fa', iconClassFix: 'fa-',
            icons: ["truck","volume-control-phone","money","american-sign-language-interpreting","shopping-cart","gift","tag","tags","heart","heart-o","star","star-o","check","check-circle","credit-card","cc-visa","cc-mastercard","cc-paypal","headphones","phone","envelope","map-marker","globe","calendar","clock-o","cog","cogs","comments","comment","bookmark","building","car","cubes","desktop","exchange","gear","gears","handshake-o","home","info","info-circle","key","laptop","leaf","life-ring","lightbulb-o","lock","mobile","mobile-phone","paper-plane","paper-plane-o","pencil","pencil-square-o","plug","question","question-circle","refresh","reply","retweet","rocket","search","send","send-o","share","share-alt","shield","shopping-bag","shopping-basket","sign-in","sign-out","sliders","smile-o","support","tasks","thumbs-up","thumbs-o-up","trophy","umbrella","unlock","user","users","wrench"]
        })
        .iconpicker('setIcon', (icon || '').replace(/^fa\s+fa-/, '').replace(/^fa-/, ''))
        .iconpicker('setSearch', true)
        .iconpicker('setSelectedClass', 'btn-warning')
        .iconpicker('setUnselectedClass', 'btn-primary');
}

$('.btnicon2').on('change', function (e) {
    var $row = $(this).closest('div.input-group');
    var iconClass = 'fa fa-' + e.icon;
    $row.find('input.iconvalue').val(iconClass);
    var preview = $row.find('input.iconvalue').data('preview');
    if (preview) {
        var $prev = $('#' + preview);
        $prev.attr('class', iconClass);
    }
});

// Sync the small icon preview chip when admin types the class manually
$(document).on('input', 'input.iconvalue', function(){
    var preview = $(this).data('preview');
    if (preview) $('#' + preview).attr('class', $(this).val() || 'fa fa-square-o');
});
</script>
@endsection