@extends('layouts.admin')

@section('title', 'SMS Templates')

@section('content')
<div class="admin-page-header d-flex justify-content-between align-items-center flex-wrap gap-2">
    <h1>SMS Templates</h1>
</div>

<div class="row g-2">
    {{-- Left sidebar: template types --}}
    <div class="col-12 col-md-4 col-lg-3">
        <div class="admin-card h-100">
            <div class="card-body p-0">
                <nav class="nav flex-column">
                    @foreach($templates as $t)
                        <a href="{{ route('admin.sms-templates.show', ['identifier' => $t->identifier]) }}"
                           class="nav-link py-3 px-4 rounded-0 border-0 border-bottom border-light text-dark text-decoration-none {{ ($template && $template->id === $t->id) ? 'bg-opacity-10' : '' }}"
                           style="{{ ($template && $template->id === $t->id) ? 'background-color: rgba(13, 148, 136, 0.12); color: var(--admin-primary); font-weight: 600;' : '' }}">
                            {{ $t->name }}
                        </a>
                    @endforeach
                </nav>
            </div>
        </div>
    </div>

    {{-- Right: form for selected template --}}
    <div class="col-12 col-md-8 col-lg-9">
        @if($template)
            <div class="admin-card">
                <div class="card-body">
                    <div class="d-flex justify-content-between align-items-center  gap-2 mb-4">
                        <h5 class="mb-0" style="color: var(--admin-primary);">
                            SMS Template for {{ $template->name }}
                        </h5>
                        <a href="{{ route('admin.sms-templates.create') }}" class="btn text-white" style="background: var(--admin-primary);">
                            <i class="bi bi-plus-lg"></i> Create SMS Template
                        </a>
                    </div>

                    <form action="{{ route('admin.sms-templates.update', ['identifier' => $template->identifier]) }}" method="POST">
                        @csrf
                        @method('PUT')

                        <div class="mb-4">
                            <label class="form-label fw-semibold">Active</label>
                            <div class="form-check form-switch">
                                <input class="form-check-input" type="checkbox" name="is_active" value="1"
                                       id="sms_active" {{ old('is_active', $template->is_active) ? 'checked' : '' }}
                                       style="width: 3rem; height: 1.5rem; margin-right:0.5rem;">
                                <label class="form-check-label" for="sms_active">Enable this template</label>
                            </div>
                        </div>

                        <div class="mb-4">
                            <label for="sms_body" class="form-label fw-semibold"><span class="text-danger">*</span> SMS Body</label>
                            <textarea class="form-control" id="sms_body" name="body" rows="4"
                                      placeholder="Use [[placeholder_name]] for dynamic values, e.g. [[customer_name]], [[invoice_link]]">{{ old('body', $template->body) }}</textarea>
                            <small class="text-muted">Use double square brackets for placeholders, e.g. [[customer_name]], [[otp]], [[invoice_link]]</small>
                            @error('body')
                                <div class="text-danger small mt-1">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="mb-4">
                            <label for="sms_template_id" class="form-label fw-semibold"><span class="text-danger">*</span> Template ID</label>
                            <input type="text" class="form-control" id="sms_template_id" name="template_id"
                                   value="{{ old('template_id', $template->template_id) }}"
                                   placeholder="DLT Template ID (e.g. 1707172352407012545)">
                            <small class="text-muted">Your DLT template ID from the SMS provider (required when using DLT)</small>
                            @error('template_id')
                                <div class="text-danger small mt-1">{{ $message }}</div>
                            @enderror
                        </div>

                        @if($template->identifier === 'pos_order_placement')
                            <hr class="my-4">
                            <h6 class="mb-2">POS Owner Copy</h6>
                            <div class="d-flex align-items-start justify-content-between gap-3 flex-wrap mb-4">
                                <div>
                                    <div class="fw-semibold">Send `pos_order_placement` SMS copy to Site Owner</div>
                                    <small class="text-muted">
                                        Applies only for wholesale customers. Site owner number is taken from General Settings (`site_phone`).
                                    </small>
                                </div>
                                <div class="form-check form-switch mb-0">
                                    <input class="form-check-input" type="checkbox" name="sms_pos_owner_copy_enabled" value="1"
                                           id="sms_pos_owner_copy_enabled" {{ old('sms_pos_owner_copy_enabled', $smsPosOwnerCopyEnabled ?? false) ? 'checked' : '' }}
                                           style="width: 3rem; height: 1.5rem;">
                                    <label class="form-check-label visually-hidden" for="sms_pos_owner_copy_enabled">Enable POS owner SMS copy</label>
                                </div>
                            </div>
                        @endif

                        <div class="pt-2">
                            <button type="submit" class="btn text-white" style="background: var(--admin-primary);">
                                <i class="bi bi-save"></i> Update
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        @else
            <div class="admin-card">
                <div class="card-body text-center py-5">
                    <p class="text-muted mb-4">No SMS templates yet.</p>
                    <a href="{{ route('admin.sms-templates.create') }}" class="btn text-white" style="background: var(--admin-primary);">
                        <i class="bi bi-plus-lg"></i> Create SMS Template
                    </a>
                </div>
            </div>
        @endif
    </div>
</div>
@endsection