@extends('admin.layouts.app')

@section('title', 'Header & Footer')

@section('content')
    <div class="page-header-breadcrumb my-2">
        <div class="d-flex align-items-center justify-content-between flex-wrap gap-2">
            <h1 class="page-title fw-medium fs-20 mb-0">Header &amp; Footer</h1>
            <ol class="breadcrumb mb-0">
                <li class="breadcrumb-item"><a href="{{ route('admin.dashboard') }}">Dashboard</a></li>
                <li class="breadcrumb-item active" aria-current="page">Header &amp; Footer</li>
            </ol>
        </div>
    </div>

    <div class="container-fluid page-container main-body-container">
        <form method="POST" action="{{ route('admin.site-appearance.update') }}" enctype="multipart/form-data">
            @csrf

            <div class="row">
                <div class="col-xl-12">
                    <div class="card custom-card mb-3">
                        <div class="card-header"><div class="card-title">Top strip</div></div>
                        <div class="card-body">
                            <div class="mb-3">
                                <label for="topline_label" class="form-label fs-14 text-dark">Label</label>
                                <input type="text" id="topline_label" name="topline_label" value="{{ old('topline_label', $header['topline_label']) }}" class="form-control">
                            </div>
                            <div class="mb-3">
                                <label for="topline_phone" class="form-label fs-14 text-dark">Phone numbers</label>
                                <input type="text" id="topline_phone" name="topline_phone" value="{{ old('topline_phone', $header['topline_phone']) }}" class="form-control">
                            </div>
                            <div class="form-check form-switch">
                                <input type="hidden" name="ticker_enabled" value="0">
                                <input class="form-check-input" type="checkbox" role="switch" name="ticker_enabled" id="ticker_enabled" value="1" @checked(old('ticker_enabled', $header['ticker_enabled']))>
                                <label class="form-check-label" for="ticker_enabled">Show the notice ticker</label>
                            </div>
                        </div>
                    </div>

                    <div class="card custom-card mb-3">
                        <div class="card-header"><div class="card-title">Brand</div></div>
                        <div class="card-body">
                            <div class="mb-3">
                                <label for="brand_title" class="form-label fs-14 text-dark">Institute title</label>
                                <input type="text" id="brand_title" name="brand_title" value="{{ old('brand_title', $header['brand_title']) }}" class="form-control">
                            </div>

                            <div class="mb-3">
                                <label for="header_logo" class="form-label fs-14 text-dark">Header logo</label>
                                <input type="file" id="header_logo" name="header_logo" class="form-control">
                                @if ($header['header_logo'])
                                    <img src="{{ Storage::disk('public')->url($header['header_logo']) }}" alt="" class="rounded mt-2" style="max-height: 70px;">
                                @endif
                            </div>

                            <div class="mb-3">
                                <label class="form-label fs-14 text-dark">Brand lines</label>
                                @foreach ($brandLines as $index => $line)
                                    <div class="mb-2">
                                        <input type="text" name="brand_lines[{{ $index }}][line]" value="{{ $line['line'] ?? '' }}" class="form-control">
                                    </div>
                                @endforeach
                            </div>

                            <div class="mb-3">
                                <label for="apply_online_url" class="form-label fs-14 text-dark">Apply online URL</label>
                                <input type="text" id="apply_online_url" name="apply_online_url" value="{{ old('apply_online_url', $header['apply_online_url']) }}" class="form-control">
                            </div>

                            <div class="mb-3">
                                <label for="apply_online_image" class="form-label fs-14 text-dark">Apply online button image</label>
                                <input type="file" id="apply_online_image" name="apply_online_image" class="form-control">
                                @if ($header['apply_online_image'])
                                    <img src="{{ Storage::disk('public')->url($header['apply_online_image']) }}" alt="" class="rounded mt-2" style="max-height: 60px;">
                                @endif
                            </div>
                        </div>
                    </div>

                    <div class="card custom-card mb-3">
                        <div class="card-header"><div class="card-title">Social links</div></div>
                        <div class="card-body">
                            @foreach ($socials as $index => $social)
                                <div class="row g-2 mb-2">
                                    <div class="col-md-4">
                                        <input type="text" name="socials[{{ $index }}][name]" value="{{ $social['name'] ?? '' }}" class="form-control" placeholder="Name">
                                    </div>
                                    <div class="col-md-8">
                                        <input type="text" name="socials[{{ $index }}][url]" value="{{ $social['url'] ?? '' }}" class="form-control" placeholder="URL">
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    </div>

                    <div class="card custom-card">
                        <div class="card-header"><div class="card-title">Footer link columns</div></div>
                        <div class="card-body">
                            @foreach ($footerColumns as $columnIndex => $column)
                                <div class="card mb-3" style="background:#f8f7fa;">
                                    <div class="card-body">
                                        <div class="mb-2">
                                            <label class="form-label fs-14 text-dark">Column heading</label>
                                            <input type="text" name="footer_columns[{{ $columnIndex }}][heading]" value="{{ $column['heading'] ?? '' }}" class="form-control">
                                        </div>

                                        @foreach ($column['links'] ?? [] as $linkIndex => $link)
                                            <div class="row g-2 mb-2">
                                                <div class="col-md-4">
                                                    <input type="text" name="footer_columns[{{ $columnIndex }}][links][{{ $linkIndex }}][label]" value="{{ $link['label'] ?? '' }}" class="form-control" placeholder="Label">
                                                </div>
                                                <div class="col-md-6">
                                                    <input type="text" name="footer_columns[{{ $columnIndex }}][links][{{ $linkIndex }}][url]" value="{{ $link['url'] ?? '' }}" class="form-control" placeholder="URL">
                                                </div>
                                                <div class="col-md-2 d-flex align-items-center">
                                                    <div class="form-check form-switch mb-0">
                                                        <input type="hidden" name="footer_columns[{{ $columnIndex }}][links][{{ $linkIndex }}][external]" value="0">
                                                        <input class="form-check-input" type="checkbox" role="switch" name="footer_columns[{{ $columnIndex }}][links][{{ $linkIndex }}][external]" value="1" @checked($link['external'] ?? false)>
                                                        <label class="form-check-label small">Ext</label>
                                                    </div>
                                                </div>
                                            </div>
                                        @endforeach
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    </div>
                </div>
            </div>

            <div class="card custom-card">
                <div class="card-footer d-flex justify-content-end gap-2">
                    <a href="{{ route('admin.dashboard') }}" class="btn btn-outline-secondary">Cancel</a>
                    <button type="submit" class="btn btn-primary"><i class="ri-save-line me-1"></i>Save changes</button>
                </div>
            </div>
        </form>
    </div>
@endsection