@extends('admin::layouts.master')

@section('content')
@if (session('success'))
<div class="alert alert-success alert-dismissible fade show" role="alert">
    {{ session('success') }}
    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
        <span aria-hidden="true">&times;</span>
    </button>
</div>
@endif

@if (session('error'))
<div class="alert alert-danger alert-dismissible fade show" role="alert">
    {{ session('error') }}
    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
        <span aria-hidden="true">&times;</span>
    </button>
</div>
@endif

@if (count($errors) > 0)
<div class="alert alert-danger alert-dismissible fade show" role="alert">
    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
        <span aria-hidden="true">&times;</span>
    </button>
    <ul class="p-0 m-0" style="list-style: none;">
        @foreach ($errors->all() as $error)
        <li>{{ $error }}</li>
        @endforeach
    </ul>
</div>
@endif

<div class="row">
    <div class="col-md-8">
        <div class="card">
            <div class="card-header">
                <h5 class="mb-0 h6">{{ translate('Customer Support Settings') }}</h5>
            </div>

            <div class="card-body">
                <form action="{{ route('admin.customer_support.update') }}" method="POST">
                    @csrf

                    <div class="form-group row">
                        <label class="col-md-3 col-form-label font-weight-bold">
                            {{ translate('Email') }} <span class="text-danger">*</span>
                        </label>
                        <div class="col-md-9">
                            <input type="email" class="form-control" name="email"
                                value="{{ old('email', $support->email ?? '') }}"
                                placeholder="support@example.com" required>
                            <small class="form-text text-muted">{{ translate('Required. This email will be displayed in the website footer.') }}</small>
                        </div>
                    </div>

                    <div class="form-group row">
                        <label class="col-md-3 col-form-label font-weight-bold">
                            {{ translate('WhatsApp Number') }}
                        </label>
                        <div class="col-md-9">
                            <input type="text" class="form-control" name="whatsapp_number"
                                value="{{ old('whatsapp_number', $support->whatsapp_number ?? '') }}"
                                placeholder="+971 526556056">
                            <small class="form-text text-muted">{{ translate('Optional. Include country code (e.g. +971 ...).') }}</small>
                        </div>
                    </div>

                    <div class="form-group row">
                        <label class="col-md-3 col-form-label font-weight-bold">
                            {{ translate('Support Number') }}
                        </label>
                        <div class="col-md-9">
                            <input type="text" class="form-control" name="support_number"
                                value="{{ old('support_number', $support->support_number ?? '') }}"
                                placeholder="+971 526556056">
                            <small class="form-text text-muted">{{ translate('Optional. Include country code (e.g. +971 ...).') }}</small>
                        </div>
                    </div>

                    <div class="form-group row">
                        <label class="col-md-3 col-form-label font-weight-bold">
                            {{ translate('Office Address') }}
                        </label>
                        <div class="col-md-9">
                            <textarea class="form-control" name="office_address" rows="3"
                                placeholder="123 Main Street, City, Country">{{ old('office_address', $support->office_address ?? '') }}</textarea>
                            <small class="form-text text-muted">{{ translate('Optional. Will be displayed on the Contact Us page.') }}</small>
                        </div>
                    </div>

                    <div class="form-group mb-0 text-right">
                        <button type="submit"
                            class="btn btn-sm btn-primary">{{ translate('Save') }}</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <div class="col-md-4">
        <div class="card bg-gray-light">
            <div class="card-header">
                <h5 class="mb-0 h6">{{ translate('Instructions') }}</h5>
            </div>
            <div class="card-body">
                <p>{{ translate('Configure customer support contact details for the selected country. These will appear in the website footer.') }}
                </p>
                <ul class="pl-3">
                    <li>{{ translate('Use the country selector in the top header to switch countries.') }}</li>
                    <li>{{ translate('Email is required and will always be displayed.') }}</li>
                    <li>{{ translate('WhatsApp and Support numbers are optional — only filled values will be shown.') }}</li>
                </ul>
            </div>
        </div>
    </div>
</div>
@endsection