@extends('layouts.app')

@section('title', 'Treatment Record')

@section('content')
<section class="content-header">
    <h1>
        Client Treatment Record
        <small>{{ optional($record->customer)->name }}</small>
    </h1>
</section>

<section class="content">
    <div class="box box-primary">
        <div class="box-header with-border">
            <h3 class="box-title">
                {{ optional($record->customer)->name }}
                —
                {{ optional($record->customer)->mobile }}
            </h3>

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

        <div class="box-body">
            <ul class="nav nav-tabs">
                <li class="active">
                    <a href="#chart" data-toggle="tab">Chart</a>
                </li>
                <li>
                    <a href="#history" data-toggle="tab">Treatment History</a>
                </li>
                <li>
                    <a href="#photos" data-toggle="tab">Photos</a>
                </li>
                <li>
                    <a href="#notes" data-toggle="tab">Notes</a>
                </li>
            </ul>

            <div class="tab-content" style="padding-top:20px;">
                <div class="tab-pane active" id="chart">
                    <div class="row">
                        <div class="col-md-6">
                            <h4>Treatment Map</h4>

                            <div style="position:relative; width:280px; height:340px; margin:20px auto; border:1px solid #ddd; border-radius:45% 45% 42% 42%; background:#fafafa;">
                                @foreach($record->mapPoints as $point)
                                    <span style="display:inline-block; margin:8px; padding:8px; border-radius:50%; background:#b58b3b; color:#fff;">
                                        {{ $point->area_name }}
                                    </span>
                                @endforeach
                            </div>
                        </div>

                        <div class="col-md-6">
                            <h4>Treatment Details</h4>

                            <table class="table table-bordered">
                                <tr>
                                    <th>Date</th>
                                    <td>{{ optional($record->treatment_date)->format('Y-m-d') }}</td>
                                </tr>
                                <tr>
                                    <th>Treatment</th>
                                    <td>{{ $record->treatment_type }}</td>
                                </tr>
                                <tr>
                                    <th>Skin / Hair Type</th>
                                    <td>{{ $record->skin_hair_type ?: '-' }}</td>
                                </tr>
                                <tr>
                                    <th>Next Visit</th>
                                    <td>{{ optional($record->next_visit_date)->format('Y-m-d') ?: '-' }}</td>
                                </tr>
                            </table>

                            <h4>Treatment Summary</h4>
                            <p>{{ $record->treatment_summary ?: '-' }}</p>
                        </div>
                    </div>

                    <hr>

                    <h4>Consultation Information</h4>

                    <div class="row">
                        <div class="col-md-6">
                            <strong>Main Concern</strong>
                            <p>{{ $record->main_concern ?: '-' }}</p>

                            <strong>Previous Treatment</strong>
                            <p>{{ $record->previous_treatment ?: '-' }}</p>

                            <strong>Allergies</strong>
                            <p>{{ $record->allergies ?: '-' }}</p>
                        </div>

                        <div class="col-md-6">
                            <strong>Contraindications</strong>
                            <p>{{ $record->contraindications ?: '-' }}</p>

                            <strong>Recommendation</strong>
                            <p>{{ $record->recommendation ?: '-' }}</p>

                            <strong>Medical Notes</strong>
                            <p>{{ $record->medical_notes ?: '-' }}</p>
                        </div>
                    </div>
                </div>

                <div class="tab-pane" id="history">
                    <p>
                        <strong>Customer:</strong>
                        {{ optional($record->customer)->name }}
                    </p>

                    <p>
                        <strong>Current Treatment:</strong>
                        {{ $record->treatment_type }}
                    </p>

                    @if($record->transaction)
                        <p>
                            <strong>POS Invoice:</strong>
                            {{ $record->transaction->invoice_no }}
                        </p>
                    @endif
                </div>

                <div class="tab-pane" id="photos">
                    <div class="row">
                        @forelse($record->photos as $photo)
                            <div class="col-md-4">
                                <div class="thumbnail">
                                    <img src="{{ asset(str_replace('public/', 'storage/', $photo->file_path)) }}"
                                         style="width:100%; height:220px; object-fit:cover;">

                                    <div class="caption">
                                        <strong>{{ ucfirst($photo->photo_type) }}</strong>
                                    </div>
                                </div>
                            </div>
                        @empty
                            <p class="text-muted">No photos uploaded.</p>
                        @endforelse
                    </div>
                </div>

                <div class="tab-pane" id="notes">
                    @forelse($record->notes as $note)
                        <div class="well">
                            {{ $note->note }}
                            <br>
                            <small>{{ $note->created_at }}</small>
                        </div>
                    @empty
                        <p class="text-muted">No additional notes.</p>
                    @endforelse
                </div>
            </div>
        </div>
    </div>
</section>
@endsection