@extends('layouts.app')

@section('title', 'Select Treatment Template')

@section('content')
<section class="content-header">
    <h1>
        Select Client Treatment Template
        <small>{{ $customer->name }} — {{ $customer->mobile }}</small>
    </h1>
</section>

<section class="content">
    <div class="box box-primary">
        <div class="box-header with-border">
            <h3 class="box-title">
                Choose a treatment record type
            </h3>

            <div class="pull-right">
                <a href="{{ route('salon.treatment_records.index', ['contact_id' => $customer->id]) }}"
                   class="btn btn-default btn-sm">
                    <i class="fa fa-arrow-left"></i> Back to History
                </a>
            </div>
        </div>

        <div class="box-body">
            <div class="row">
                @foreach($templates as $template)
                    <div class="col-md-4 col-sm-6">
                        <div class="treatment-template-card">
                            <div class="template-icon"
                                 style="background:{{ $template['color'] }};">
                                <i class="{{ $template['icon'] }}"></i>
                            </div>

                            <h3>{{ $template['name'] }}</h3>

                            <p>
                                {{ $template['description'] }}
                            </p>

                            <a href="{{ route('salon.treatment_records.create', [
                                'contact_id' => $customer->id,
                                'template_type' => $template['key']
                            ]) }}"
                               class="btn btn-primary btn-block">
                                Select Template
                                <i class="fa fa-arrow-right"></i>
                            </a>
                        </div>
                    </div>
                @endforeach
            </div>
        </div>
    </div>
</section>
@endsection

@section('css')
<style>
    .treatment-template-card {
        min-height: 280px;
        margin-bottom: 20px;
        padding: 25px 18px;
        text-align: center;
        border: 1px solid #e5e7eb;
        border-radius: 12px;
        background: #fff;
        box-shadow: 0 2px 8px rgba(0,0,0,.05);
        transition: all .2s ease;
    }

    .treatment-template-card:hover {
        transform: translateY(-3px);
        box-shadow: 0 6px 18px rgba(0,0,0,.12);
        border-color: #3b82f6;
    }

    .template-icon {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 65px;
        height: 65px;
        margin: 0 auto 15px;
        border-radius: 50%;
        color: #fff;
        font-size: 30px;
    }

    .treatment-template-card h3 {
        min-height: 45px;
        margin: 10px 0;
        color: #1f2937;
        font-size: 18px;
        font-weight: 700;
    }

    .treatment-template-card p {
        min-height: 60px;
        color: #6b7280;
        font-size: 13px;
        line-height: 1.5;
    }

    .treatment-template-card .btn {
        margin-top: 12px;
        border-radius: 20px;
    }
</style>
@endsection