@extends('layouts.app')

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

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

<section class="content">
    @if($errors->any())
        <div class="alert alert-danger">
            <ul>
                @foreach($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
        </div>
    @endif

    <form method="POST"
          action="{{ route('salon.treatment_records.store') }}"
          enctype="multipart/form-data">
        @csrf

        <input type="hidden" name="contact_id" value="{{ $customer->id }}">

        <div class="row">
            <div class="col-md-8">
                <div class="box box-primary">
                    <div class="box-header with-border">
                        <h3 class="box-title">Consultation Details</h3>
                    </div>

                    <div class="box-body">
                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label>Treatment Date</label>
                                    <input type="date"
                                           name="treatment_date"
                                           class="form-control"
                                           value="{{ date('Y-m-d') }}"
                                           required>
                                </div>
                            </div>

                            <div class="col-md-6">
                                <div class="form-group">
                                    <label>Treatment Type</label>
                                    <select name="treatment_type"
                                            class="form-control"
                                            required>
                                        <option value="">Select treatment</option>
                                        @foreach($treatmentTypes as $type)
                                            <option value="{{ $type }}">{{ $type }}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                        </div>

                        <div class="form-group">
                            <label>Skin / Hair Type</label>
                            <input type="text"
                                   name="skin_hair_type"
                                   class="form-control"
                                   placeholder="Sensitive, dry, oily, damaged hair...">
                        </div>

                        <div class="form-group">
                            <label>Main Concern</label>
                            <textarea name="main_concern"
                                      class="form-control"
                                      rows="3"></textarea>
                        </div>

                        <div class="form-group">
                            <label>Previous Treatment</label>
                            <textarea name="previous_treatment"
                                      class="form-control"
                                      rows="3"></textarea>
                        </div>

                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label>Allergies</label>
                                    <textarea name="allergies"
                                              class="form-control"
                                              rows="3"></textarea>
                                </div>
                            </div>

                            <div class="col-md-6">
                                <div class="form-group">
                                    <label>Contraindications</label>
                                    <textarea name="contraindications"
                                              class="form-control"
                                              rows="3"></textarea>
                                </div>
                            </div>
                        </div>

                        <div class="form-group">
                            <label>Medical / Clinical Notes</label>
                            <textarea name="medical_notes"
                                      class="form-control"
                                      rows="3"></textarea>
                        </div>

                        <div class="form-group">
                            <label>Customer Expectations</label>
                            <textarea name="expectations"
                                      class="form-control"
                                      rows="3"></textarea>
                        </div>

                        <div class="form-group">
                            <label>Recommended Treatment</label>
                            <textarea name="recommendation"
                                      class="form-control"
                                      rows="3"></textarea>
                        </div>

                        <div class="form-group">
                            <label>Treatment Summary</label>
                            <textarea name="treatment_summary"
                                      class="form-control"
                                      rows="4"></textarea>
                        </div>

                        <div class="form-group">
                            <label>Next Visit Date</label>
                            <input type="date"
                                   name="next_visit_date"
                                   class="form-control">
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-md-4">
                <div class="box box-info">
                    <div class="box-header with-border">
                        <h3 class="box-title">Customer</h3>
                    </div>

                    <div class="box-body">
                        <p><strong>Name:</strong> {{ $customer->name }}</p>
                        <p><strong>Phone:</strong> {{ $customer->mobile }}</p>
                        <p><strong>Email:</strong> {{ $customer->email ?: '-' }}</p>
                    </div>
                </div>

                <div class="box box-warning">
                    <div class="box-header with-border">
                        <h3 class="box-title">Treatment Photos</h3>
                    </div>

                    <div class="box-body">
                        <div class="form-group">
                            <label>Before Photo</label>
                            <input type="file"
                                   name="before_photo"
                                   accept="image/jpeg,image/png,image/webp">
                        </div>

                        <div class="form-group">
                            <label>After Photo</label>
                            <input type="file"
                                   name="after_photo"
                                   accept="image/jpeg,image/png,image/webp">
                        </div>

                        <div class="form-group">
                            <label>Progress Photos</label>
                            <input type="file"
                                   name="progress_photos[]"
                                   multiple
                                   accept="image/jpeg,image/png,image/webp">
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="box box-default">
            <div class="box-header with-border">
                <h3 class="box-title">Dummy Treatment Map</h3>
            </div>

            <div class="box-body">
                <p class="text-muted">
                    Area එකක් select කර treatment details add කරන්න.
                </p>

                <div id="treatment-map"
                     style="position:relative; width:280px; height:340px; margin:20px auto; border:1px solid #ddd; border-radius:45% 45% 42% 42%; background:#fafafa;">

                    <button type="button"
                            class="map-point"
                            data-area="Forehead"
                            style="top:45px; left:120px;">●</button>

                    <button type="button"
                            class="map-point"
                            data-area="Left Eye"
                            style="top:105px; left:75px;">●</button>

                    <button type="button"
                            class="map-point"
                            data-area="Right Eye"
                            style="top:105px; left:190px;">●</button>

                    <button type="button"
                            class="map-point"
                            data-area="Nose"
                            style="top:160px; left:132px;">●</button>

                    <button type="button"
                            class="map-point"
                            data-area="Left Cheek"
                            style="top:195px; left:65px;">●</button>

                    <button type="button"
                            class="map-point"
                            data-area="Right Cheek"
                            style="top:195px; left:200px;">●</button>

                    <button type="button"
                            class="map-point"
                            data-area="Lips"
                            style="top:245px; left:132px;">●</button>
                </div>

                <div id="map-rows"></div>
            </div>
        </div>

        <div class="box-footer">
            <button type="submit" class="btn btn-primary">
                <i class="fa fa-save"></i> Save Treatment Record
            </button>

            <a href="{{ route('salon.treatment_records.index', ['contact_id' => $customer->id]) }}"
               class="btn btn-default">
                Cancel
            </a>
        </div>
    </form>
</section>
@endsection

@section('css')
<style>
    .map-point {
        position:absolute;
        border:0;
        background:#ead7a0;
        color:#725b25;
        border-radius:50%;
        width:28px;
        height:28px;
        cursor:pointer;
        line-height:20px;
    }

    .map-point.active {
        background:#b58b3b;
        color:#fff;
        box-shadow:0 0 0 4px rgba(181,139,59,.2);
    }

    .map-row {
        border:1px solid #ddd;
        padding:10px;
        margin-bottom:8px;
        border-radius:5px;
        background:#fff;
    }
</style>
@endsection

@section('javascript')
<script>
$(function () {
    $('.map-point').on('click', function () {
        var button = $(this);
        var area = button.data('area');

        if (button.hasClass('active')) {
            button.removeClass('active');
            $('.map-row[data-area="' + area + '"]').remove();
            return;
        }

        button.addClass('active');

        var html = `
            <div class="map-row" data-area="${area}">
                <input type="hidden" name="map_area[]" value="${area}">

                <div class="row">
                    <div class="col-md-3">
                        <strong>${area}</strong>
                    </div>

                    <div class="col-md-3">
                        <input type="text"
                               name="map_treatment[]"
                               class="form-control"
                               placeholder="Treatment">
                    </div>

                    <div class="col-md-2">
                        <input type="number"
                               name="map_units[]"
                               class="form-control"
                               step="0.01"
                               placeholder="Units">
                    </div>

                    <div class="col-md-4">
                        <input type="text"
                               name="map_notes[]"
                               class="form-control"
                               placeholder="Notes">
                    </div>
                </div>
            </div>
        `;

        $('#map-rows').append(html);
    });
});
</script>
@endsection