@extends('backend.layouts.master')
@section('title', 'Site Settings')
@section('content')
@php
  $val = fn ($key, $default = '') => old($key, $settings[$key] ?? $default);
  $assetUrl = function ($path) {
      if (!$path) return null;
      if (str_starts_with($path, 'http')) return $path;
      return asset(str_starts_with($path, 'uploads/') ? 'storage/'.$path : $path);
  };
@endphp
<div class="page-content"><div class="container-fluid">
    <div class="page-title-box"><h4 class="mb-0">Site Settings</h4></div>
    @include('backend.partials.alerts')
    <form method="POST" action="{{ route('admin.settings.update') }}" enctype="multipart/form-data">
        @csrf
        @method('PUT')
        <div class="row">
            <div class="col-xl-6">
                <div class="card"><div class="card-header"><h5 class="mb-0">General / Branding</h5></div><div class="card-body">
                    <div class="mb-3"><label class="form-label">Site Name</label><input type="text" name="site_name" class="form-control" value="{{ $val('site_name') }}"></div>
                    <div class="mb-3"><label class="form-label">Tagline</label><input type="text" name="site_tagline" class="form-control" value="{{ $val('site_tagline') }}"></div>
                    <div class="mb-3"><label class="form-label">Company Registration No.</label><input type="text" name="company_registration" class="form-control" value="{{ $val('company_registration') }}"></div>
                    <div class="mb-3"><label class="form-label">Footer About</label><textarea name="footer_about" class="form-control" rows="3">{{ $val('footer_about') }}</textarea></div>
                    <div class="mb-3">
                        <label class="form-label">Logo</label>
                        @if($settings['logo'] ?? null)<div class="mb-2"><img src="{{ $assetUrl($settings['logo']) }}" alt="Logo" height="48"></div>@endif
                        <input type="file" name="logo_file" class="form-control" accept="image/*">
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Dark Logo</label>
                        @if($settings['logo_dark'] ?? null)<div class="mb-2"><img src="{{ $assetUrl($settings['logo_dark']) }}" alt="Dark Logo" height="48"></div>@endif
                        <input type="file" name="logo_dark_file" class="form-control" accept="image/*">
                    </div>
                    <div class="mb-0">
                        <label class="form-label">Favicon</label>
                        @if($settings['favicon'] ?? null)<div class="mb-2"><img src="{{ $assetUrl($settings['favicon']) }}" alt="Favicon" height="32"></div>@endif
                        <input type="file" name="favicon_file" class="form-control" accept="image/*">
                    </div>
                </div></div>

                <div class="card"><div class="card-header"><h5 class="mb-0">Default Breadcrumb Image</h5></div><div class="card-body">
                    <p class="text-muted small">Used on pages that do not have their own breadcrumb/hero image.</p>
                    @if($settings['default_breadcrumb_image'] ?? null)
                        <div class="mb-2">
                            <img src="{{ $assetUrl($settings['default_breadcrumb_image']) }}" alt="Default breadcrumb" class="img-fluid rounded" style="max-height:140px;">
                        </div>
                        <div class="form-check mb-3">
                            <input class="form-check-input" type="checkbox" name="remove_default_breadcrumb_image" value="1" id="remove_default_breadcrumb_image">
                            <label class="form-check-label" for="remove_default_breadcrumb_image">Remove current default image</label>
                        </div>
                    @endif
                    <div class="mb-0">
                        <label class="form-label">Upload Default Breadcrumb Image</label>
                        <input type="file" name="default_breadcrumb_image_file" class="form-control" accept="image/*">
                    </div>
                </div></div>
            </div>
            <div class="col-xl-6">
                <div class="card"><div class="card-header"><h5 class="mb-0">Contact Details</h5></div><div class="card-body">
                    <div class="mb-3"><label class="form-label">Address</label><input type="text" name="address" class="form-control" value="{{ $val('address') }}"></div>
                    <div class="mb-3"><label class="form-label">Primary Phone</label><input type="text" name="phone_primary" class="form-control" value="{{ $val('phone_primary') }}"></div>
                    <div class="mb-3"><label class="form-label">Secondary Phone</label><input type="text" name="phone_secondary" class="form-control" value="{{ $val('phone_secondary') }}"></div>
                    <div class="mb-3"><label class="form-label">Primary Email</label><input type="email" name="email_primary" class="form-control" value="{{ $val('email_primary') }}"></div>
                    <div class="mb-3"><label class="form-label">Admissions Email</label><input type="email" name="email_admissions" class="form-control" value="{{ $val('email_admissions') }}"></div>
                    <div class="mb-3"><label class="form-label">WhatsApp Number</label><input type="text" name="whatsapp" class="form-control" value="{{ $val('whatsapp') }}" placeholder="447000000000"></div>
                    <div class="mb-0"><label class="form-label">Working Hours</label><input type="text" name="working_hours" class="form-control" value="{{ $val('working_hours') }}"></div>
                </div></div>

                <div class="card">
                    <div class="card-header d-flex align-items-center justify-content-between">
                        <h5 class="mb-0">Company Branches</h5>
                        <button type="button" class="btn btn-sm btn-soft-primary" id="addBranchRow">+ Add Branch</button>
                    </div>
                    <div class="card-body">
                        <p class="text-muted small mb-3">Shown on the Contact Us page. Leave City empty to remove a branch. Enter one phone number per line.</p>
                        <div id="branchesRepeater">
                            @foreach($branches as $i => $branch)
                                <div class="branch-row border rounded p-3 mb-3">
                                    <div class="d-flex justify-content-between align-items-center mb-2">
                                        <strong>Branch {{ $i + 1 }}</strong>
                                        <button type="button" class="btn btn-sm btn-outline-danger js-remove-branch">Remove</button>
                                    </div>
                                    <div class="row g-2">
                                        <div class="col-md-6">
                                            <label class="form-label small">City</label>
                                            <input type="text" name="branches[{{ $i }}][city]" class="form-control" value="{{ $branch['city'] ?? '' }}" placeholder="London">
                                        </div>
                                        <div class="col-md-6">
                                            <label class="form-label small">Country</label>
                                            <input type="text" name="branches[{{ $i }}][country]" class="form-control" value="{{ $branch['country'] ?? '' }}" placeholder="England">
                                        </div>
                                        <div class="col-12">
                                            <label class="form-label small">Address</label>
                                            <textarea name="branches[{{ $i }}][address]" class="form-control" rows="2" placeholder="Full office address">{{ $branch['address'] ?? '' }}</textarea>
                                        </div>
                                        <div class="col-md-7">
                                            <label class="form-label small">Phone numbers (one per line)</label>
                                            <textarea name="branches[{{ $i }}][phones]" class="form-control" rows="4" placeholder="m: 07404040404&#10;t: 02039623456">{{ implode("\n", $branch['phones'] ?? []) }}</textarea>
                                        </div>
                                        <div class="col-md-5">
                                            <label class="form-label small">Email</label>
                                            <input type="email" name="branches[{{ $i }}][email]" class="form-control" value="{{ $branch['email'] ?? '' }}" placeholder="admissions@fbaukltd.com">
                                        </div>
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-xl-6">
                <div class="card"><div class="card-header"><h5 class="mb-0">Map Details</h5></div><div class="card-body">
                    <div class="mb-3"><label class="form-label">Map Embed HTML</label><textarea name="map_embed" class="form-control" rows="4">{{ $val('map_embed') }}</textarea></div>
                    <div class="row">
                        <div class="col-md-6 mb-3"><label class="form-label">Latitude</label><input type="text" name="map_latitude" class="form-control" value="{{ $val('map_latitude') }}"></div>
                        <div class="col-md-6 mb-3"><label class="form-label">Longitude</label><input type="text" name="map_longitude" class="form-control" value="{{ $val('map_longitude') }}"></div>
                    </div>
                </div></div>
            </div>
            <div class="col-xl-6">
                <div class="card"><div class="card-header"><h5 class="mb-0">Social Links</h5></div><div class="card-body">
                    <div class="mb-3"><label class="form-label">Facebook</label><input type="text" name="facebook_url" class="form-control" value="{{ $val('facebook_url') }}"></div>
                    <div class="mb-3"><label class="form-label">Instagram</label><input type="text" name="instagram_url" class="form-control" value="{{ $val('instagram_url') }}"></div>
                    <div class="mb-3"><label class="form-label">LinkedIn</label><input type="text" name="linkedin_url" class="form-control" value="{{ $val('linkedin_url') }}"></div>
                    <div class="mb-3"><label class="form-label">Twitter / X</label><input type="text" name="twitter_url" class="form-control" value="{{ $val('twitter_url') }}"></div>
                    <div class="mb-0"><label class="form-label">YouTube</label><input type="text" name="youtube_url" class="form-control" value="{{ $val('youtube_url') }}"></div>
                </div></div>
            </div>
        </div>
        <div class="mb-4">
            <button type="submit" class="btn btn-primary">Save Settings</button>
        </div>
    </form>
</div></div>
@endsection

@push('scripts')
<script>
(function () {
  const repeater = document.getElementById('branchesRepeater');
  const addBtn = document.getElementById('addBranchRow');
  if (!repeater || !addBtn) return;

  function nextIndex() {
    return repeater.querySelectorAll('.branch-row').length;
  }

  function bindRemove(row) {
    row.querySelector('.js-remove-branch')?.addEventListener('click', function () {
      row.remove();
    });
  }

  repeater.querySelectorAll('.branch-row').forEach(bindRemove);

  addBtn.addEventListener('click', function () {
    const i = nextIndex();
    const wrap = document.createElement('div');
    wrap.className = 'branch-row border rounded p-3 mb-3';
    wrap.innerHTML =
      '<div class="d-flex justify-content-between align-items-center mb-2">' +
        '<strong>Branch ' + (i + 1) + '</strong>' +
        '<button type="button" class="btn btn-sm btn-outline-danger js-remove-branch">Remove</button>' +
      '</div>' +
      '<div class="row g-2">' +
        '<div class="col-md-6"><label class="form-label small">City</label><input type="text" name="branches[' + i + '][city]" class="form-control" placeholder="London"></div>' +
        '<div class="col-md-6"><label class="form-label small">Country</label><input type="text" name="branches[' + i + '][country]" class="form-control" placeholder="England"></div>' +
        '<div class="col-12"><label class="form-label small">Address</label><textarea name="branches[' + i + '][address]" class="form-control" rows="2" placeholder="Full office address"></textarea></div>' +
        '<div class="col-md-7"><label class="form-label small">Phone numbers (one per line)</label><textarea name="branches[' + i + '][phones]" class="form-control" rows="4" placeholder="m: 07404040404&#10;t: 02039623456"></textarea></div>' +
        '<div class="col-md-5"><label class="form-label small">Email</label><input type="email" name="branches[' + i + '][email]" class="form-control" placeholder="admissions@fbaukltd.com"></div>' +
      '</div>';
    repeater.appendChild(wrap);
    bindRemove(wrap);
  });
})();
</script>
@endpush