@extends('admin.layouts.master')

@section('title', 'إنهاء التركيب')
@section('page_title', 'إنهاء التركيب: ' . $order->number)

@section('breadcrumbs')
    <li class="breadcrumb-item"><a href="{{ route('admin.installations.index') }}">أوامر التركيب</a></li>
    <li class="breadcrumb-item"><a href="{{ route('admin.installations.show', $order) }}">{{ $order->number }}</a></li>
    <li class="breadcrumb-item active">إنهاء</li>
@endsection

@push('styles')
<style>
    @media (max-width: 768px) {
        .completion-form .col-form { padding: 0 8px; }
        .item-card { font-size: 14px; }
    }
    .signature-pad-wrap {
        border: 2px dashed #ced4da;
        border-radius: 6px;
        background: #fff;
        position: relative;
    }
    .signature-pad { display: block; width: 100%; height: 200px; touch-action: none; }
    .star-rating { font-size: 2.2rem; cursor: pointer; user-select: none; color: #ddd; }
    .star-rating .star.active { color: #ffc107; }
    .item-card { border: 1px solid #dee2e6; border-radius: 6px; padding: 12px; margin-bottom: 10px; }
    .item-card.is-completed { border-color: #28a745; background: #f0fbf3; }
    .item-card.is-damaged   { border-color: #dc3545; background: #fcf0f1; }
</style>
@endpush

@section('content')
<form action="{{ route('admin.installations.complete', $order) }}" method="POST" id="completionForm" class="completion-form">
    @csrf

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

    <div class="card">
        <div class="card-header bg-success">
            <h3 class="card-title text-white"><i class="fas fa-clipboard-check"></i> نموذج تسليم — {{ $order->number }}</h3>
        </div>
        <div class="card-body">
            <div class="row">
                <div class="col-md-6 col-form">
                    <p><b>العميل:</b> {{ $order->customer?->name_ar }}</p>
                    <p><b>الموعد:</b> {{ $order->scheduled_at?->format('Y-m-d H:i') }}</p>
                </div>
                <div class="col-md-6 col-form">
                    <p><b>الفريق:</b> {{ $order->team?->name ?? '—' }}</p>
                    <p><b>القائد:</b> {{ $order->team?->leader?->name ?? '—' }}</p>
                </div>
            </div>

            <h5 class="mt-3">حالة البنود</h5>
            @foreach($order->items as $i => $item)
                <div class="item-card" data-row="{{ $i }}">
                    <input type="hidden" name="items[{{ $i }}][installation_order_item_id]" value="{{ $item->id }}">
                    <div class="row align-items-center">
                        <div class="col-md-5">
                            <b>{{ $item->description }}</b>
                            @if($item->product)<br><small class="text-muted"><code>{{ $item->product->sku }}</code></small>@endif
                        </div>
                        <div class="col-md-3">
                            <label class="small mb-1">الكمية المركّبة</label>
                            <input type="number" step="0.001" min="0" max="{{ $item->quantity }}"
                                   name="items[{{ $i }}][installed_quantity]"
                                   value="{{ old('items.'.$i.'.installed_quantity', $item->installed_quantity ?? $item->quantity) }}"
                                   class="form-control form-control-sm">
                            <small class="text-muted">من {{ number_format((float) $item->quantity, 2) }}</small>
                        </div>
                        <div class="col-md-4">
                            <div class="custom-control custom-checkbox mb-1">
                                <input type="checkbox" class="custom-control-input toggle-completed"
                                       id="completed_{{ $i }}" name="items[{{ $i }}][is_completed]" value="1"
                                       @checked(old('items.'.$i.'.is_completed', $item->is_completed))>
                                <label class="custom-control-label text-success" for="completed_{{ $i }}">
                                    <i class="fas fa-check-circle"></i> مكتمل
                                </label>
                            </div>
                            <div class="custom-control custom-checkbox">
                                <input type="checkbox" class="custom-control-input toggle-damaged"
                                       id="damaged_{{ $i }}" name="items[{{ $i }}][is_damaged]" value="1"
                                       @checked(old('items.'.$i.'.is_damaged', $item->is_damaged))>
                                <label class="custom-control-label text-danger" for="damaged_{{ $i }}">
                                    <i class="fas fa-exclamation-triangle"></i> تالف
                                </label>
                            </div>
                        </div>
                        <div class="col-md-12 mt-2">
                            <input type="text" name="items[{{ $i }}][notes]" class="form-control form-control-sm"
                                   placeholder="ملاحظات على هذا البند…"
                                   value="{{ old('items.'.$i.'.notes', $item->notes) }}">
                        </div>
                    </div>
                </div>
            @endforeach

            <div class="form-group mt-3">
                <label>ملاحظات الإنجاز</label>
                <textarea name="completion_notes" class="form-control" rows="3" placeholder="ملاحظات عامة عن التنفيذ…">{{ old('completion_notes', $order->completion_notes) }}</textarea>
            </div>

            <div class="form-group">
                <label>ملاحظات العميل</label>
                <textarea name="customer_notes" class="form-control" rows="2">{{ old('customer_notes', $order->customer_notes) }}</textarea>
            </div>

            <div class="form-group">
                <label>تقييم العميل</label>
                <div class="star-rating" id="ratingStars">
                    <span class="star" data-val="1">★</span>
                    <span class="star" data-val="2">★</span>
                    <span class="star" data-val="3">★</span>
                    <span class="star" data-val="4">★</span>
                    <span class="star" data-val="5">★</span>
                </div>
                <input type="hidden" name="customer_rating" id="ratingValue" value="{{ old('customer_rating', $order->customer_rating) }}">
            </div>

            <div class="form-group">
                <label>توقيع العميل</label>
                <div class="signature-pad-wrap">
                    <canvas id="signaturePad" class="signature-pad"></canvas>
                </div>
                <button type="button" id="clearSignatureBtn" class="btn btn-sm btn-outline-secondary mt-1">
                    <i class="fas fa-eraser"></i> مسح التوقيع
                </button>
                <input type="hidden" name="customer_signature" id="signatureData">
            </div>
        </div>
        <div class="card-footer text-center">
            <button type="submit" class="btn btn-success btn-lg">
                <i class="fas fa-check"></i> تأكيد الإنجاز
            </button>
            <a href="{{ route('admin.installations.show', $order) }}" class="btn btn-secondary btn-lg">{{ __('admin.cancel') }}</a>
        </div>
    </div>
</form>
@endsection

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/signature_pad@4.1.7/dist/signature_pad.umd.min.js"></script>
<script>
$(function () {
    /* Signature pad */
    const canvas = document.getElementById('signaturePad');
    function resizeCanvas() {
        const ratio = Math.max(window.devicePixelRatio || 1, 1);
        canvas.width  = canvas.offsetWidth  * ratio;
        canvas.height = canvas.offsetHeight * ratio;
        canvas.getContext('2d').scale(ratio, ratio);
        if (sigPad) sigPad.clear();
    }
    const sigPad = new SignaturePad(canvas, { backgroundColor: 'rgb(255,255,255)' });
    window.addEventListener('resize', resizeCanvas);
    resizeCanvas();

    $('#clearSignatureBtn').on('click', () => sigPad.clear());

    /* Stars */
    function setStars(v) {
        $('#ratingValue').val(v || '');
        $('#ratingStars .star').each(function () {
            $(this).toggleClass('active', $(this).data('val') <= v);
        });
    }
    $('#ratingStars .star').on('click', function () {
        const v = $(this).data('val');
        setStars(v === parseInt($('#ratingValue').val()) ? 0 : v);
    });
    setStars(parseInt($('#ratingValue').val()) || 0);

    /* Item state visuals */
    $('.toggle-completed, .toggle-damaged').on('change', function () {
        const $card = $(this).closest('.item-card');
        $card.toggleClass('is-completed', $card.find('.toggle-completed').is(':checked'));
        $card.toggleClass('is-damaged',   $card.find('.toggle-damaged').is(':checked'));
    }).trigger('change');

    /* Submit — capture signature as base64 */
    $('#completionForm').on('submit', function () {
        if (! sigPad.isEmpty()) {
            $('#signatureData').val(sigPad.toDataURL('image/png'));
        }
    });
});
</script>
@endpush