@extends('layouts.app')

@section('content')
<div id="kt_app_toolbar" class="app-toolbar py-3 py-lg-6">
    <div id="kt_app_toolbar_container" class="app-container container-xxl d-flex flex-stack">
        <div class="page-title d-flex flex-column justify-content-center flex-wrap me-3">
            <h1 class="page-heading d-flex text-gray-900 fw-bold fs-3 flex-column justify-content-center my-0">{{ __('measurements.details') }}: {{ $measurement->measurement_number }}</h1>
            <ul class="breadcrumb breadcrumb-separatorless fw-semibold fs-7 my-0 pt-1">
                <li class="breadcrumb-item text-muted">
                    <a href="{{ url('/') }}" class="text-muted text-hover-primary">{{ __('common.home') }}</a>
                </li>
                <li class="breadcrumb-item">
                    <span class="bullet bg-gray-500 w-5px h-2px"></span>
                </li>
                <li class="breadcrumb-item text-muted">
                    <a href="{{ route('measurements.index') }}" class="text-muted text-hover-primary">{{ __('common.measurements') }}</a>
                </li>
                <li class="breadcrumb-item">
                    <span class="bullet bg-gray-500 w-5px h-2px"></span>
                </li>
                <li class="breadcrumb-item text-muted">{{ __('common.view') }}</li>
            </ul>
        </div>
        <div class="d-flex align-items-center gap-2 gap-lg-3 d-print-none">
            <button type="button" class="btn btn-sm fw-bold btn-success" onclick="window.print()">
                <i class="ki-outline ki-printer fs-6 me-1"></i> {{ __('common.print') ?? 'Yazdır' }}
            </button>
            @can('Update:Measurement')
                <a href="{{ route('measurements.edit', ['measurement' => $measurement]) }}" class="btn btn-sm fw-bold btn-primary">{{ __('measurements.edit') }}</a>
            @endcan
            @can('Delete:Measurement')
                <form action="{{ route('measurements.destroy', ['measurement' => $measurement]) }}" method="POST">
                    @csrf
                    @method('DELETE')
                    <button type="submit" class="btn btn-sm fw-bold btn-danger">{{ __('common.delete') }}</button>
                </form>
            @endcan
        </div>
    </div>
</div>

<div id="kt_app_content" class="app-content flex-column-fluid">
    <div id="kt_app_content_container" class="app-container container-xxl">
        <!--begin::Print Header-->
        <div class="d-none d-print-block mb-10 text-center">
            @php
                $company = app('current_company');
                $logoLightUrl = $company->logo_light ? \Storage::url($company->logo_light) : asset('assets/logo/default-dark.svg');
                $logoDarkUrl = $company->logo_dark ? \Storage::url($company->logo_dark) : asset('assets/logo/default-light.svg');
            @endphp
            <img src="{{ $logoDarkUrl }}" class="h-60px mb-4 theme-light-show" alt="{{ $company->name }}">
            <img src="{{ $logoLightUrl }}" class="h-60px mb-4 theme-dark-show" alt="{{ $company->name }}">
            <h1 class="fs-1 fw-bold text-gray-900 mb-1">{{ $company->name }}</h1>
            <div class="text-gray-500 fw-semibold fs-5">{{ __('common.measurements') }}</div>
            <div class="separator separator-dashed my-5"></div>
        </div>
        <!--end::Print Header-->

        @if($hasNewer)
            <div class="alert alert-dismissible bg-light-danger d-flex flex-column flex-sm-row p-5 mb-10 border border-danger border-dashed">
                <i class="ki-duotone ki-information-5 fs-2hx text-danger me-4 mb-5 mb-sm-0">
                    <span class="path1"></span>
                    <span class="path2"></span>
                    <span class="path3"></span>
                </i>
                <div class="d-flex flex-column pe-0 pe-sm-10">
                    <h4 class="fw-bold text-danger">{{ __('common.warning') ?? 'Uyarı' }}</h4>
                    <span>{{ __('measurements.newer_measurements_exist') }}</span>
                </div>
            </div>
        @endif

        <div class="card mb-5 mb-xl-10">
            <div class="card-header">
                <div class="card-title">
                    <h2>{{ __('common.summary') }}</h2>
                </div>
            </div>
            <div class="card-body pt-9 pb-9">
                <div class="d-flex flex-wrap flex-sm-nowrap">
                    <div class="flex-grow-1">
                        <div class="d-flex justify-content-between align-items-start flex-wrap">
                            <div class="d-flex flex-column w-100">
                                <div class="d-flex align-items-center mb-2 flex-wrap gap-3">
                                    <a href="{{ route('customers.show', ['customer' => $measurement->customer]) }}" class="text-gray-900 text-hover-primary fs-2 fw-bold me-3 d-print-none">{{ $measurement->customer->first_name }} {{ $measurement->customer->last_name }} ({{ $measurement->customer->customer_code }})</a>
                                    <span class="text-gray-900 fs-2 fw-bold me-3 d-none d-print-inline">
                                        {{ mb_substr($measurement->customer->first_name, 0, 1) }}. {{ mb_substr($measurement->customer->last_name, 0, 1) }}. ({{ $measurement->customer->customer_code }})
                                    </span>
                                    <span class="badge badge-light-primary fs-6 py-2 px-3">
                                        <i class="ki-outline ki-tag fs-5 me-1 text-primary"></i>
                                        {{ $measurement->clothType->title }}
                                    </span>
                                    <span class="badge badge-light-info fs-6 py-2 px-3">
                                        <i class="ki-outline ki-calendar fs-5 me-1 text-info"></i>
                                        {{ $measurement->date->translatedFormat('d F Y') }}
                                    </span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="card card-flush">
            <div class="card-header pt-7">
                <div class="card-title">
                    <h2>{{ __('measurements.values') }}</h2>
                </div>
            </div>
            <div class="card-body pt-5">
                <div class="row row-cols-2 row-cols-sm-3 row-cols-md-4 row-cols-lg-5 row-cols-xl-6 g-4">
                    @foreach($measurement->items as $item)
                        @php
                            $prevMeasurement = $previousMeasurements->first();
                            $prevVal = null;
                            if ($prevMeasurement) {
                                $prevItem = $prevMeasurement->items->where('cloth_measure_type_id', $item->cloth_measure_type_id)->first();
                                $prevVal = $prevItem ? $prevItem->value : null;
                            }

                            $history = [];
                            $history[] = [
                                'date' => $measurement->date->translatedFormat('d F Y'),
                                'value' => $item->value . ' ' . $item->unit_label,
                                'is_current' => true
                            ];
                            foreach ($previousMeasurements->take(9) as $prev) {
                                $prevItem = $prev->items->where('cloth_measure_type_id', $item->cloth_measure_type_id)->first();
                                if ($prevItem) {
                                    $history[] = [
                                        'date' => $prev->date->translatedFormat('d F Y'),
                                        'value' => $prevItem->value . ' ' . $item->unit_label,
                                        'is_current' => false
                                    ];
                                }
                            }
                        @endphp
                        <div class="col">
                            <div class="border border-dashed border-gray-300 rounded p-4 mb-4">
                                <div class="d-flex justify-content-between align-items-center mb-1">
                                    <div class="fs-7 text-gray-500 fw-semibold">{{ $item->label }}</div>
                                    <button type="button" class="btn btn-icon btn-sm btn-active-light-primary show-history-btn" 
                                            data-title="{{ $item->label }}" 
                                            data-history="{{ json_encode($history) }}"
                                            style="width: 20px; height: 20px;">
                                        <i class="ki-outline ki-time fs-7"></i>
                                    </button>
                                </div>
                                <div class="fs-3 fw-bold">
                                    @if($prevVal !== null && $prevVal != $item->value)
                                        <span class="text-muted fs-6 text-decoration-line-through me-2">{{ $prevVal }} {{ $item->unit_label }}</span>
                                    @endif
                                    {{ $item->value }}
                                    <span class="fs-7 fw-semibold text-gray-400 ms-1">{{ $item->unit_label }}</span>
                                </div>
                            </div>
                        </div>
                    @endforeach
                </div>

                @if($measurement->note)
                    <div class="notice d-flex bg-light-primary rounded border-primary border border-dashed p-3 mt-5">
                        <i class="ki-duotone ki-information fs-2 text-primary me-2 mt-1">
                            <span class="path1"></span>
                            <span class="path2"></span>
                            <span class="path3"></span>
                        </i>
                        <div class="d-flex align-items-center">
                            <span class="fw-bold text-gray-900 fs-7 me-2">{{ __('messages.note') }}:</span>
                            <span class="fs-7 text-gray-700">{{ $measurement->note }}</span>
                        </div>
                    </div>
                @endif
            </div>
        </div>

        @if(isset($previousMeasurements) && $previousMeasurements->isNotEmpty())
        <div class="card card-flush mt-5 d-print-none">
            <div class="card-header pt-7">
                <div class="card-title">
                    <h2>{{ __('measurements.previous_measurements') }}</h2>
                </div>
            </div>
            <div class="card-body pt-5">
                <div class="table-responsive">
                    <table class="table align-middle table-row-dashed fs-6 gy-5">
                        <thead>
                            <tr class="text-start text-gray-500 fw-bold fs-7 text-uppercase gs-0">
                                <th>{{ __('common.date') }}</th>
                                <th>{{ __('common.ref_no') }}</th>
                                <th>Açıklama / Not</th>
                                <th class="text-end">{{ __('common.actions') }}</th>
                            </tr>
                        </thead>
                        <tbody class="fw-semibold text-gray-600">
                            @foreach($previousMeasurements as $prev)
                                <tr>
                                    <td>{{ $prev->date->translatedFormat('d F Y') }}</td>
                                    <td>{{ $prev->measurement_number }}</td>
                                    <td>{{ Str::limit($prev->note, 50) ?: '-' }}</td>
                                    <td class="text-end">
                                        <a href="{{ route('measurements.show', ['measurement' => $prev]) }}" class="btn btn-sm btn-light btn-active-light-primary">{{ __('common.view') }}</a>
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
        @endif
    </div>
</div>

<!-- Modal: Measurement Value History -->
<div class="modal fade" id="kt_modal_measurement_history" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered mw-450px">
        <div class="modal-content">
            <div class="modal-header py-4">
                <h3 class="fw-bold m-0" id="history_modal_title">Ölçü Geçmişi</h3>
                <div class="btn btn-icon btn-sm btn-active-icon-primary" data-bs-dismiss="modal">
                    <i class="ki-duotone ki-cross fs-1"><span class="path1"></span><span class="path2"></span></i>
                </div>
            </div>
            <div class="modal-body py-5">
                <div class="timeline timeline-border-dashed" id="history_timeline" style="max-height: 400px; overflow-y: auto; padding-left: 10px;">
                    <!-- Timeline items will be injected here via JS -->
                </div>
            </div>
        </div>
    </div>
</div>

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    $('.show-history-btn').on('click', function() {
        const title = $(this).data('title');
        const history = $(this).data('history');
        
        $('#history_modal_title').text(title + ' - Ölçüm Geçmişi');
        
        let html = '';
        history.forEach(function(item) {
            html += `
                <div class="timeline-item d-flex align-items-start mb-5">
                    <div class="timeline-icon me-4" style="margin-top: 3px;">
                        <i class="ki-solid ki-abstract-26 fs-5 ${item.is_current ? 'text-primary' : 'text-gray-400'}"></i>
                    </div>
                    <div class="timeline-content">
                        <div class="pe-3">
                            <span class="fs-5 fw-bold text-gray-800 ${item.is_current ? 'text-primary' : ''}">${item.value}</span>
                            <span class="fs-8 text-muted d-block mt-1">${item.date} ${item.is_current ? '<strong>(Aktif Ölçü)</strong>' : ''}</span>
                        </div>
                    </div>
                </div>
            `;
        });
        
        $('#history_timeline').html(html);
        $('#kt_modal_measurement_history').modal('show');
    });
});
</script>
@endpush

<style>
@media print {
    /* Hide layout parts */
    #kt_app_header,
    #kt_app_sidebar,
    #kt_app_footer,
    #kt_app_toolbar,
    .d-print-none,
    .alert,
    .btn,
    .show-history-btn,
    .modal {
        display: none !important;
    }
    
    /* Force light logo on print output */
    .theme-light-show {
        display: inline-block !important;
    }
    .theme-dark-show {
        display: none !important;
    }
    
    /* Ensure content occupies full page */
    body {
        background-color: #fff !important;
        margin: 0 !important;
        padding: 0 !important;
        font-size: 12pt !important;
    }
    .app-wrapper {
        margin: 0 !important;
        padding: 0 !important;
    }
    #kt_app_content {
        padding: 0 !important;
        margin: 0 !important;
    }
    #kt_app_content_container {
        padding: 0 !important;
        margin: 0 !important;
        max-width: 100% !important;
        width: 100% !important;
    }
    
    /* Card borders and shadows */
    .card {
        border: none !important;
        box-shadow: none !important;
        margin-bottom: 20px !important;
    }
    .card-header {
        border-bottom: 1px solid #ddd !important;
        padding-bottom: 5px !important;
    }
    
    /* Adjust columns for printing grid layout */
    .row {
        display: flex !important;
        flex-wrap: wrap !important;
        margin-right: -10px !important;
        margin-left: -10px !important;
    }
    .col {
        flex: 0 0 25% !important; /* 4 columns per row on print */
        max-width: 25% !important;
        padding: 10px !important;
        box-sizing: border-box !important;
    }
    .border-dashed {
        border: 1px solid #ccc !important;
    }
}
</style>
@endsection