@extends('layouts.app', ['class' => 'g-sidenav-show bg-gray-100'])
{{-- section content --}}
@section('content')
    @include('layouts.navbars.auth.topnav', ['title' => ''])
    <div class="card shadow-lg mx-4">
        <div class="card-body p-3">
            <div class="row gx-4">
                <div class="col-lg">
                    <div class="nav-wrapper">
                        {{-- button back --}}
                        <button class="btn btn-secondary mb-0" onclick="history.back()"><i class="fas fa-circle-left me-1">
                            </i><span class="font-weight-bold">Kembali</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="container-fluid py-4">
        <div class="row">
            <div class="col-md-12 mx-auto">
                {{-- HEADER: INFO REQUEST --}}
                <div class="card mb-4 border-0 shadow-sm">
                    <div class="card-body p-4">
                        <div class="d-flex justify-content-between align-items-center">
                            {{-- BAGIAN KIRI: Info Request & Customer --}}
                            <div class="d-flex align-items-center">
                                <div
                                    class="icon icon-lg icon-shape bg-gradient-primary shadow-primary text-center border-radius-xl">
                                    <i class="fas fa-vial opacity-10" style="font-size: 1.5rem;"></i>
                                </div>
                                <div class="ms-4">
                                    <p class="text-xs font-weight-bold text-muted text-uppercase mb-1">
                                        Test Lab Request
                                    </p>
                                    <h3 class="font-weight-bolder text-dark mb-0">
                                        {{ $request_info->request_no }}
                                    </h3>
                                    <span class="text-sm text-secondary">
                                        <i class="fas fa-user me-1"></i> {{ $request_info->customer_name }}
                                        &nbsp;|&nbsp;
                                        <i class="fas fa-palette me-1"></i> {{ $request_info->customer_color_code }}
                                    </span>
                                </div>
                            </div>

                            {{-- BAGIAN KANAN: Button Target Sample --}}
                            <div class="text-end">
                                @if ($authorize->add == '1')
                                    <button class="btn btn-success mb-0" data-bs-toggle="modal"
                                        data-bs-target="#modalTargetSample">
                                        <i class="fas fa-plus me-1"></i>
                                        <span class="font-weight-bold">Target Sample</span>
                                    </button>
                                @endif
                            </div>
                        </div>
                    </div>
                </div>

                {{-- TARGET TEST LAB INFO (jika ada) --}}
                @if ($target_test_lab)
                    <div class="card mb-4 border-0 shadow-sm">
                        <div class="card-header pb-0 bg-gradient-info">
                            <h6 class="mb-0 text-white">
                                <i class="fas fa-bullseye me-2"></i>Target Test Lab
                                @if ($authorize->edit == '1')
                                    <button class="btn btn-sm btn-light float-end mb-0" data-bs-toggle="modal"
                                        data-bs-target="#modalTargetSample">
                                        <i class="fas fa-edit me-1"></i> Edit
                                    </button>
                                @endif
                            </h6>
                        </div>
                        <div class="card-body p-4">
                            <div class="row">
                                <div class="col-md-2">
                                    <div class="text-center p-3 bg-light rounded">
                                        <p class="text-xs text-secondary mb-1">L*</p>
                                        <h4 class="font-weight-bolder text-dark mb-0">{{ $target_test_lab->L ?? '-' }}</h4>
                                    </div>
                                </div>
                                <div class="col-md-2">
                                    <div class="text-center p-3 bg-light rounded">
                                        <p class="text-xs text-secondary mb-1">a*</p>
                                        <h4 class="font-weight-bolder text-dark mb-0">{{ $target_test_lab->a ?? '-' }}</h4>
                                    </div>
                                </div>
                                <div class="col-md-2">
                                    <div class="text-center p-3 bg-light rounded">
                                        <p class="text-xs text-secondary mb-1">b*</p>
                                        <h4 class="font-weight-bolder text-dark mb-0">{{ $target_test_lab->b ?? '-' }}</h4>
                                    </div>
                                </div>
                                <div class="col-md-2">
                                    <div class="text-center p-3 bg-light rounded">
                                        <p class="text-xs text-secondary mb-1">C*</p>
                                        <h4 class="font-weight-bolder text-dark mb-0">{{ $target_test_lab->C ?? '-' }}</h4>
                                    </div>
                                </div>
                                <div class="col-md-2">
                                    <div class="text-center p-3 bg-light rounded">
                                        <p class="text-xs text-secondary mb-1">h</p>
                                        <h4 class="font-weight-bolder text-dark mb-0">{{ $target_test_lab->h ?? '-' }}</h4>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                @endif

                {{-- CONTENT: LIST ALL SAMPLES --}}
                <div class="card border-0 shadow-sm">
                    <div class="card-header pb-0">
                        <h6 class="mb-0">List Sample Codes</h6>
                    </div>
                    <div class="card-body p-4">
                        @if ($samples->isEmpty())
                            <div class="text-center p-5">
                                <h6 class="text-secondary">Tidak ada data sample untuk request ini.</h6>
                            </div>
                        @else
                            {{-- Grouping Sample Berdasarkan Supplier --}}
                            @php
                                $groupedSamples = $samples->groupBy('supplier_name');
                            @endphp

                            @foreach ($groupedSamples as $supplierName => $listSamples)
                                @php
                                    $first = $listSamples->first();
                                    $companyName = $first->supplier_to ?? $first->supplier_name ?? 'Unknown Company';
                                @endphp
                                <div class="card border mb-3 shadow-none bg-gray-100">
                                    {{-- Header Supplier --}}
                                    <div class="card-header p-3 pb-2" style="background-color: #e9ecef;">
                                        <div class="d-flex justify-content-between align-items-center">
                                            <div>
                                                <h6 class="mb-0 text-dark">
                                                    <i class="fas fa-truck me-2"></i>{{ $companyName }}
                                                </h6>
                                                <small class="text-xs text-muted">
                                                    Sent:
                                                    {{ $listSamples->first()->send_date ? date('d M Y', strtotime($listSamples->first()->send_date)) : '-' }}
                                                </small>
                                            </div>
                                        </div>
                                    </div>

                                    {{-- List Sample Cards --}}
                                    <div class="card-body p-3">
                                        <div class="row">
                                            @foreach ($listSamples as $row)
                                                @php
                                                    $testLab = $test_labs[$row->id] ?? null;
                                                @endphp
                                                <div class="col-md-6 mb-3">
                                                    <div class="card border h-100 shadow-sm bg-white">
                                                        <div class="card-body p-3">
                                                            {{-- HEADER: Kode Sample & Button LAB --}}
                                                            <div class="d-flex justify-content-between align-items-center mb-3">
                                                                <span
                                                                    class="badge bg-gradient-info text-white shadow-sm"
                                                                    style="font-size: 0.75rem;">
                                                                    {{ $row->code }}
                                                                </span>

                                                                @if ($authorize->add == '1')
                                                                    @if ($testLab)
                                                                        <a href="{{ URL::to($url_menu . '/edit/' . Crypt::encrypt($testLab->id)) }}"
                                                                            class="btn btn-sm btn-success mb-0 shadow-sm">
                                                                            <i class="fas fa-flask me-1"></i>
                                                                            <span class="font-weight-bold">LAB</span>
                                                                        </a>
                                                                    @else
                                                                        <a href="{{ URL::to($url_menu . '/add?id_match_result=' . $row->id . '&request_no=' . $row->request_no) }}"
                                                                            class="btn btn-sm btn-primary mb-0 shadow-sm">
                                                                            <i class="fas fa-flask me-1"></i>
                                                                            <span class="font-weight-bold">LAB</span>
                                                                        </a>
                                                                    @endif
                                                                @endif
                                                            </div>

                                                            {{-- CONTENT: Memo & Harga --}}
                                                            <div class="mb-3">
                                                                @if ($row->ext_memo)
                                                                    <h6 class="text-dark font-weight-bolder mb-1 text-truncate"
                                                                        title="Ext. Memo {{ $row->ext_memo }}">
                                                                        <i class="ni ni-paper-diploma me-1 text-primary"></i>
                                                                        Ext. Memo: {{ $row->ext_memo }}
                                                                    </h6>
                                                                @endif
                                                                <div class="d-flex justify-content-between align-items-end mt-2">
                                                                    <div>
                                                                        <p class="text-xs text-secondary mb-0">Dosing Price</p>
                                                                        <h5 class="font-weight-bolder text-primary mb-0">
                                                                            <span
                                                                                class="text-xs text-dark me-1">{{ $row->currency ?? 'USD' }}</span>
                                                                            {{ number_format($row->dosing_price ?? 0, 2) }}
                                                                            <span
                                                                                class="text-secondary font-weight-normal text-xs"
                                                                                style="font-size: 0.7rem;">/ Kg</span>
                                                                        </h5>
                                                                    </div>
                                                                    <div class="text-end">
                                                                        <span
                                                                            class="text-xs font-weight-bold text-dark border px-2 py-1 rounded">
                                                                            Dose: {{ $row->dosage }}%
                                                                        </span>
                                                                    </div>
                                                                </div>
                                                            </div>

                                                            {{-- TEST LAB RESULT (jika ada) --}}
                                                            @if ($testLab)
                                                                <hr class="horizontal dark my-2">
                                                                <div class="bg-light p-2 rounded mb-2">
                                                                    <p class="text-xs font-weight-bold text-secondary mb-1">
                                                                        <i class="fas fa-check-circle text-success me-1"></i>Test Lab Result:
                                                                    </p>
                                                                    <div class="row text-xs">
                                                                        <div class="col-6 mb-1">
                                                                            <span class="text-muted">L*:</span>
                                                                            <span class="font-weight-bold">{{ $testLab->L ?? '-' }}</span>
                                                                        </div>
                                                                        <div class="col-6 mb-1">
                                                                            <span class="text-muted">a*:</span>
                                                                            <span class="font-weight-bold">{{ $testLab->a ?? '-' }}</span>
                                                                        </div>
                                                                        <div class="col-6 mb-1">
                                                                            <span class="text-muted">b*:</span>
                                                                            <span class="font-weight-bold">{{ $testLab->b ?? '-' }}</span>
                                                                        </div>
                                                                        <div class="col-6 mb-1">
                                                                            <span class="text-muted">C*:</span>
                                                                            <span class="font-weight-bold">{{ $testLab->C ?? '-' }}</span>
                                                                        </div>
                                                                        <div class="col-6 mb-1">
                                                                            <span class="text-muted">h:</span>
                                                                            <span class="font-weight-bold">{{ $testLab->h ?? '-' }}</span>
                                                                        </div>
                                                                        @if ($testLab->delta_E)
                                                                            <div class="col-12 mt-1">
                                                                                <span class="badge badge-sm bg-gradient-success" style="text-transform: none !important;">ΔE*: {{ $testLab->delta_E }}</span>
                                                                            </div>
                                                                        @endif
                                                                    </div>
                                                                </div>
                                                            @endif

                                                            <hr class="horizontal dark my-2">

                                                            {{-- FOOTER: Remark --}}
                                                            @if ($row->remark)
                                                                <div class="d-flex align-items-center mt-2">
                                                                    <i class="ni ni-align-left-2 me-2 text-secondary text-xs"></i>
                                                                    <small class="text-xs text-secondary text-truncate w-100"
                                                                        title="{{ $row->remark }}">
                                                                        Remark: <span
                                                                            class="text-dark font-weight-bold">{{ $row->remark }}</span>
                                                                    </small>
                                                                </div>
                                                            @endif
                                                        </div>
                                                    </div>
                                                </div>
                                            @endforeach
                                        </div>
                                    </div>
                                </div>
                            @endforeach
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- MODAL TARGET SAMPLE --}}
    <div class="modal fade" id="modalTargetSample" tabindex="-1" role="dialog" aria-labelledby="modalTargetSampleLabel"
        aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content">
                <form action="{{ URL::to($url_menu . '/target-sample') }}" method="POST" id="formTargetSample">
                    @csrf
                    <div class="modal-header bg-gradient-info">
                        <h5 class="modal-title text-white" id="modalTargetSampleLabel">
                            <i class="fas fa-bullseye me-2"></i>Target Test Lab
                        </h5>
                        <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"
                            aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        <input type="hidden" name="request_no" value="{{ $request_info->request_no }}">
                        <input type="hidden" name="target_id"
                            value="{{ $target_test_lab->id ?? '' }}">
                        <div class="row">
                            <div class="col-md-6 mb-3">
                                <label class="form-label text-xs font-weight-bold">L*</label>
                                <input type="number" step="0.01" class="form-control" name="L"
                                    value="{{ $target_test_lab->L ?? '' }}" required>
                            </div>
                            <div class="col-md-6 mb-3">
                                <label class="form-label text-xs font-weight-bold">a*</label>
                                <input type="number" step="0.01" class="form-control" name="a"
                                    value="{{ $target_test_lab->a ?? '' }}" required>
                            </div>
                            <div class="col-md-6 mb-3">
                                <label class="form-label text-xs font-weight-bold">b*</label>
                                <input type="number" step="0.01" class="form-control" name="b"
                                    value="{{ $target_test_lab->b ?? '' }}" required>
                            </div>
                            <div class="col-md-6 mb-3">
                                <label class="form-label text-xs font-weight-bold">C*</label>
                                <input type="number" step="0.01" class="form-control" name="C"
                                    value="{{ $target_test_lab->C ?? '' }}" required>
                            </div>
                            <div class="col-md-6 mb-3">
                                <label class="form-label text-xs font-weight-bold">h</label>
                                <input type="number" step="0.01" class="form-control" name="h"
                                    value="{{ $target_test_lab->h ?? '' }}" required>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Batal</button>
                        <button type="submit" class="btn btn-primary">
                            <i class="fas fa-save me-1"></i>Simpan
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
@endsection
@push('js')
    <script>
        $(document).ready(function() {
            // Form submit handler untuk target sample
            $('#formTargetSample').on('submit', function(e) {
                e.preventDefault();
                const formData = $(this).serialize();
                
                $.ajax({
                    url: $(this).attr('action'),
                    method: 'POST',
                    data: formData,
                    success: function(response) {
                        if (response.success) {
                            Swal.fire({
                                icon: 'success',
                                title: 'Berhasil!',
                                text: response.message || 'Target sample berhasil disimpan',
                                confirmButtonColor: '#028284'
                            }).then(() => {
                                location.reload();
                            });
                        } else {
                            Swal.fire({
                                icon: 'error',
                                title: 'Error!',
                                text: response.message || 'Terjadi kesalahan',
                                confirmButtonColor: '#028284'
                            });
                        }
                    },
                    error: function(xhr) {
                        Swal.fire({
                            icon: 'error',
                            title: 'Error!',
                            text: xhr.responseJSON?.message || 'Terjadi kesalahan',
                            confirmButtonColor: '#028284'
                        });
                    }
                });
            });
        });
    </script>
@endpush