@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>
                        {{-- check authorize edi --}}
                        @if ($authorize->edit == '1')
                            <a href="{{ URL::to($url_menu . '/edit/' . Crypt::encrypt($request_info->request_no)) }}"
                                class="btn btn-warning mb-0">
                                <i class="fas fa-edit me-1"></i>
                                <span class="font-weight-bold">Edit</span>
                            </a>
                        @endif
                    </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-file-invoice 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">
                                        Request Matching Color
                                    </p>
                                    {{-- Judul Bersih (Tanpa Badge) --}}
                                    <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: Status Badge --}}
                            <div class="text-end">
                                <p class="text-xs font-weight-bold text-muted text-uppercase mb-1">
                                    Current Status
                                </p>

                                @php
                                    $statusVal = strtolower($request_info->status1 ?? 'entry');
                                    $style = match ($statusVal) {
                                        'progress' => [
                                            'class' => 'bg-gradient-secondary',
                                            'icon' => 'fa-spinner fa-spin',
                                        ],
                                        'completed' => ['class' => 'bg-gradient-success', 'icon' => 'fa-check-circle'],
                                        'underreview' => ['class' => 'bg-gradient-danger', 'icon' => 'fa-times-circle'],
                                        default => ['class' => 'bg-gradient-secondary', 'icon' => 'fa-circle'],
                                    };
                                @endphp

                                <span
                                    class="badge {{ $style['class'] }} rounded-pill px-3 py-2 d-inline-flex align-items-center">
                                    <i class="fas {{ $style['icon'] }} me-2"></i>
                                    <span class="text-uppercase">{{ $statusVal }}</span>
                                </span>
                            </div>
                        </div>
                    </div>
                </div>

                {{-- 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');
                                // print($groupedSamples); // Debug: Tampilkan struktur data yang digrouping
                            @endphp

                            @foreach ($groupedSamples as $supplierName => $listSamples)
                                @php
                                    $first = $listSamples->first();
                                    $companyName = $first->supplier_to ?? '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>
                                                {{-- Ambil tanggal kirim dari sample pertama di grup ini (asumsi satu supplier kirim barengan) --}}
                                                <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)
                                                <div class="col-md-6 mb-3">
                                                    <div class="card border h-100 shadow-sm bg-white">
                                                        <div class="card shadow-sm border h-100">
                                                            <div class="card-body p-3">
                                                                {{-- HEADER: Kode Sample & Status --}}
                                                                <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>

                                                                    @php
                                                                        $badge = match ($row->status) {
                                                                            'accepted' => 'bg-success',
                                                                            'rejected' => 'bg-danger',
                                                                            'revised' => 'bg-warning',
                                                                            default => 'bg-secondary',
                                                                        };
                                                                    @endphp
                                                                    <span
                                                                        class="badge {{ $badge }} text-white shadow-sm"
                                                                        style="font-size: 0.7rem;">
                                                                        {{ strtoupper($row->status) }}
                                                                    </span>
                                                                </div>

                                                                {{-- CONTENT: Memo & Harga --}}
                                                                <div class="mb-3">
                                                                    <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>
                                                                    <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">
                                                                                {{-- Tampilkan Simbol Currency --}}
                                                                                <span
                                                                                    class="text-xs text-dark me-1">{{ $row->currency }}</span>
                                                                                {{ number_format($row->dosing_price, 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>

                                                                <hr class="horizontal dark my-2">
                                                                <div class="d-flex align-items-center mt-2">
                                                                    <i
                                                                        class="fas fa-layer-group me-2 text-secondary text-xs"></i>
                                                                    <small
                                                                        class="text-xs text-secondary text-truncate w-100">
                                                                        Category:
                                                                        <span class="text-dark font-weight-bold">
                                                                            {{ $row->category ?? '-' }}
                                                                        </span>
                                                                    </small>
                                                                </div>
                                                                {{-- FOOTER: 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>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            @endforeach
                                        </div>
                                    </div>
                                </div>
                            @endforeach
                        @endif
                    </div>

                </div>
            </div>
        </div>
    </div>


    {{-- MODAL UNTUK PREVIEW IMAGE --}}
    <div class="modal fade" id="imagePreviewModal" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header border-0">
                    <h6 class="modal-title">Preview Image</h6>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body text-center bg-dark">
                    <img src="" id="modalImageSrc" class="img-fluid rounded shadow" style="max-height: 80vh;">
                </div>
            </div>
        </div>
    </div>

    {{-- SCRIPT KHUSUS VIEW --}}
    <script>
        function showImageModal(src) {
            document.getElementById('modalImageSrc').src = src;
            var myModal = new bootstrap.Modal(document.getElementById('imagePreviewModal'));
            myModal.show();
        }
    </script>


    {{-- Script SweetAlert (Tetap Sama) --}}
    <script>
        function confirmDelete(id, status) {
            // Tentukan teks konfirmasi berdasarkan status saat ini
            let actionText = status == 1 ? 'menonaktifkan' : 'mengaktifkan kembali';
            let btnText = status == 1 ? 'Ya, Non-Aktifkan!' : 'Ya, Aktifkan!';
            let btnColor = status == 1 ? '#d33' : '#28a745';

            Swal.fire({
                title: 'Apakah Anda yakin?',
                text: "Anda akan " + actionText + " data ini.",
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: btnColor,
                cancelButtonColor: '#6c757d',
                confirmButtonText: btnText,
                cancelButtonText: 'Batal'
            }).then((result) => {
                if (result.isConfirmed) {
                    // Tampilkan Loading
                    Swal.fire({
                        title: 'Memproses...',
                        text: 'Mohon tunggu sebentar',
                        allowOutsideClick: false,
                        showConfirmButton: false,
                        willOpen: () => {
                            Swal.showLoading()
                        }
                    });

                    // Submit Form Delete
                    document.getElementById('delete-form-' + id).submit();
                }
            })
        }
    </script>
    {{-- check flag js on dmenu --}}
    @if ($jsmenu == '1')
        @if (view()->exists("js.{$dmenu}"))
            @push('addjs')
                {{-- file js in folder (resources/views/js) --}}
                @include('js.' . $dmenu);
            @endpush
        @else
            @push('addjs')
                <script>
                    Swal.fire({
                        title: 'JS Not Found!!',
                        text: 'Please Create File JS',
                        icon: 'error',
                        confirmButtonColor: '#028284'
                    });
                </script>
            @endpush
        @endif
    @endif
@endsection
@push('js')
    <script>
        $(document).ready(function() {
            //set disable all input form
            $('#{{ $dmenu }}-form').find('label').addClass('disabled');
            $('#{{ $dmenu }}-form').find('input').attr('disabled', 'disabled');
            $('#{{ $dmenu }}-form').find('select').attr('disabled', 'disabled');
            $('#{{ $dmenu }}-form').find('textarea').attr('disabled', 'disabled');
            $('#{{ $dmenu }}-form').find('input[key="true"]').parent('.form-group').css('display',
                '');
            $('#{{ $dmenu }}-form').find('select[key="true"]').parent('.form-group').css('display',
                '');
            $('.icon-modal-search').css('display', 'none');
            // function enable input form
            function enable_text() {
                $('#{{ $dmenu }}-form').find('label').removeClass('disabled');
                $('#{{ $dmenu }}-form').find('input').removeAttr('disabled');
                $('#{{ $dmenu }}-form').find('select').removeAttr('disabled');
                $('#{{ $dmenu }}-form').find('textarea').removeAttr('disabled');
                $('#{{ $dmenu }}-form').find('input[key="true"]').parent('.form-group').css('display',
                    'none');
                $('#{{ $dmenu }}-form').find('select[key="true"]').parent('.form-group').css('display',
                    'none');
                $('.icon-modal-search').css('display', '');
            }
            //event button edit
            $('#{{ $dmenu }}-edit').click(function() {
                enable_text();
                $(this).css('display', 'none');
                $('#{{ $dmenu }}-save').css('display', '');
            });
        });
    </script>
@endpush