@extends('layouts.app')
@section('title', __('clinicSite::lang.settings'))

@section('content')
<section class="content-header">
    <h1><i class="fas fa-gear"></i> {{ __('clinicSite::lang.settings') }}
        <small>Branding, contact details &amp; publishing</small></h1>
</section>

<section class="content">
    @include('clinicSite::admin._flash')
    <form method="POST" action="{{ route('cs.settings.save') }}" enctype="multipart/form-data">
        @csrf
        <div class="row">
            <div class="col-md-8">
                @component('components.widget', ['title' => 'Brand & identity', 'class' => 'box-primary'])
                    <div class="row">
                        <div class="col-md-8 form-group">
                            <label>Website / clinic name</label>
                            <input type="text" name="name" class="form-control" value="{{ $site->name }}" placeholder="City Medical Center">
                        </div>
                        <div class="col-md-4 form-group">
                            <label>Logo</label>
                            <input type="file" name="logo" accept="image/*">
                            @if($site->logoUrl())<img src="{{ $site->logoUrl() }}" style="height:32px;margin-top:6px;">@endif
                        </div>
                    </div>
                    <div class="form-group">
                        <label>Tagline</label>
                        <input type="text" name="tagline" class="form-control" value="{{ $site->tagline }}" placeholder="Compassionate, modern care for you and your family.">
                    </div>
                    <div class="row">
                        <div class="col-md-6 form-group">
                            <label>Favicon</label>
                            <input type="file" name="favicon" accept="image/*">
                            @if($site->faviconUrl())<small class="text-success"> Set.</small>@endif
                        </div>
                        <div class="col-md-6 form-group">
                            <label>Social share image (OG)</label>
                            <input type="file" name="og_image" accept="image/*">
                            @if($site->ogImageUrl())<small class="text-success"> Set.</small>@endif
                        </div>
                    </div>
                @endcomponent

                @component('components.widget', ['title' => 'Contact details'])
                    <div class="row">
                        <div class="col-md-6 form-group"><label>Phone</label>
                            <input type="text" name="contact[phone]" class="form-control" value="{{ $site->contact['phone'] ?? '' }}"></div>
                        <div class="col-md-6 form-group"><label>WhatsApp number</label>
                            <input type="text" name="contact[whatsapp]" class="form-control" value="{{ $site->contact['whatsapp'] ?? '' }}"></div>
                    </div>
                    <div class="row">
                        <div class="col-md-6 form-group"><label>Email</label>
                            <input type="text" name="contact[email]" class="form-control" value="{{ $site->contact['email'] ?? '' }}"></div>
                        <div class="col-md-6 form-group"><label>Address</label>
                            <input type="text" name="contact[address]" class="form-control" value="{{ $site->contact['address'] ?? '' }}"></div>
                    </div>
                @endcomponent

                @component('components.widget', ['title' => 'Social links'])
                    <div class="row">
                        @foreach(['facebook','instagram','twitter','tiktok','youtube','linkedin'] as $net)
                            <div class="col-md-6 form-group">
                                <label style="text-transform:capitalize;"><i class="fab fa-{{ $net }}"></i> {{ $net }}</label>
                                <input type="text" name="social[{{ $net }}]" class="form-control" value="{{ $site->social[$net] ?? '' }}" placeholder="https://">
                            </div>
                        @endforeach
                    </div>
                @endcomponent

                @component('components.widget', ['title' => 'Opening hours'])
                    <table class="table table-condensed" id="hoursTable">
                        <thead><tr><th>Day(s)</th><th>Hours</th><th></th></tr></thead>
                        <tbody>
                        @forelse(($site->hours ?: [['day'=>'','time'=>'']]) as $row)
                            <tr>
                                <td><input type="text" name="hours_day[]" class="form-control input-sm" value="{{ $row['day'] ?? '' }}" placeholder="Mon – Fri"></td>
                                <td><input type="text" name="hours_time[]" class="form-control input-sm" value="{{ $row['time'] ?? '' }}" placeholder="8:00 AM – 7:00 PM"></td>
                                <td><button type="button" class="btn btn-xs btn-danger" onclick="this.closest('tr').remove()"><i class="fa fa-times"></i></button></td>
                            </tr>
                        @empty
                        @endforelse
                        </tbody>
                    </table>
                    <button type="button" class="btn btn-xs btn-default" onclick="vsAddHour()"><i class="fa fa-plus"></i> Add row</button>
                @endcomponent

                @component('components.widget', ['title' => 'SEO defaults'])
                    <div class="form-group"><label>Default SEO title</label>
                        <input type="text" name="seo_title" class="form-control" value="{{ $site->seo_title }}"></div>
                    <div class="form-group"><label>Default meta description</label>
                        <textarea name="seo_description" class="form-control" rows="2">{{ $site->seo_description }}</textarea></div>
                    <div class="form-group"><label>Analytics ID (GA4 / GTM)</label>
                        <input type="text" name="analytics_id" class="form-control" value="{{ $site->analytics_id }}" placeholder="G-XXXXXXX"></div>
                @endcomponent
            </div>

            <div class="col-md-4">
                @component('components.widget', ['title' => 'Publishing', 'class' => 'box-success'])
                    <div class="form-group">
                        <label><input type="checkbox" name="enabled" value="1" {{ $site->enabled ? 'checked' : '' }}> Enable website</label>
                        <small class="text-muted" style="display:block;">When off, visitors see a "coming soon" page.</small>
                    </div>
                    <div class="form-group">
                        <label>Status</label>
                        <select name="status" class="form-control">
                            <option value="draft" {{ $site->status==='draft'?'selected':'' }}>Draft</option>
                            <option value="published" {{ $site->status==='published'?'selected':'' }}>Published</option>
                        </select>
                    </div>
                    <button class="btn btn-primary btn-block"><i class="fa fa-save"></i> Save settings</button>
                    <a href="{{ route('cs.preview') }}" target="_blank" class="btn btn-default btn-block"><i class="fa fa-eye"></i> Preview</a>
                @endcomponent

                @component('components.widget', ['title' => 'Header button (CTA)'])
                    <div class="form-group"><label>Button text</label>
                        <input type="text" name="cta_label" class="form-control" value="{{ $site->options['cta_label'] ?? 'Book appointment' }}"></div>
                    <div class="form-group"><label>Button link</label>
                        <input type="text" name="cta_url" class="form-control" value="{{ $site->options['cta_url'] ?? '#contact' }}" placeholder="#contact or /portal"></div>
                    <div class="form-group">
                        <label><input type="checkbox" name="show_portal_link" value="1" {{ ($site->options['show_portal_link'] ?? '1')!=='0' ? 'checked' : '' }}> Show "Client Portal" link</label>
                    </div>
                @endcomponent
            </div>
        </div>
    </form>
</section>

<script>
function vsAddHour(){
    var t=document.querySelector('#hoursTable tbody');
    var tr=document.createElement('tr');
    tr.innerHTML='<td><input type="text" name="hours_day[]" class="form-control input-sm"></td>'+
        '<td><input type="text" name="hours_time[]" class="form-control input-sm"></td>'+
        '<td><button type="button" class="btn btn-xs btn-danger" onclick="this.closest(\'tr\').remove()"><i class="fa fa-times"></i></button></td>';
    t.appendChild(tr);
}
</script>
@endsection
