@php
use Modules\POSM\Models\PosmDepletionJobDetailsProduct;
@endphp
@extends('layouts.app')
@section('title', 'POSM Depletion Job Details')

@section('content')
    <div class="fixed-action-bar d-flex align-items-center justify-content-between">
        <div class="fw-semibold fixed-nav-title">POSM Job Details — {{ $depletion_job->job_no }}</div>
        <div class="d-flex align-items-center ms-auto">
            <!-- Additional Actions (Left) -->
            @if($depletion_job->status == 'pending')
                <i class="fa-solid fa-check fixed-nav-btn fixed-nav-btn-active p-1 d-inline-flex align-items-center justify-content-center mx-1"
                    onclick="approvePlan('{{ $depletion_job->id }}')" 
                    data-toggle="tooltip" title="Approve Plan" style="cursor: pointer;"></i>
            @endif

            <a href="{{ route('posm.depletion.assign-data', $depletion_job->id) }}" class="mx-1">
                <i class="fa-solid fa-file-pen fixed-nav-btn fixed-nav-btn-active p-1 d-inline-flex align-items-center justify-content-center"
                    data-toggle="tooltip" title="Assign Supplier & DC Data"></i>
            </a>

            @if($depletion_job->qr_status == 'Printed')
                <a href="{{ route('posm.depletion.generate-qr', $depletion_job->id) }}" target="_blank" class="mx-1">
                    <i class="fa-solid fa-qrcode fixed-nav-btn fixed-nav-btn-active p-1 d-inline-flex align-items-center justify-content-center"
                        data-toggle="tooltip" title="Download QR Code PDF"></i>
                </a>

                <a href="{{ route('posm.depletion.download-gate-pass', $depletion_job->id) }}" target="_blank" class="mx-1">
                    <i class="fa-solid fa-file-invoice fixed-nav-btn fixed-nav-btn-active p-1 d-inline-flex align-items-center justify-content-center"
                        data-toggle="tooltip" title="Download Gate Pass Excel"></i>
                </a>
            @endif

            <a href="{{ route('posm.depletion.print', $depletion_job->id) }}" target="_blank" class="mx-1">
                <i class="fa-solid fa-print fixed-nav-btn fixed-nav-btn-active p-1 d-inline-flex align-items-center justify-content-center"
                    data-toggle="tooltip" title="Print Job Sheet"></i>
            </a>

            <i class="fa-solid fa-paper-plane fixed-nav-btn fixed-nav-btn-active p-1 d-inline-flex align-items-center justify-content-center mx-1"
                onclick="sendPackage('{{ $depletion_job->id }}')" 
                data-toggle="tooltip" title="Email Logistics Package" style="cursor: pointer;"></i>

            <div class="ms-auto d-flex align-items-center">
                <!-- Mandatory Action Set (Right) -->
                <!-- Add -->
                <i class="fa-regular fa-plus fixed-nav-btn p-1 d-inline-flex align-items-center justify-content-center mx-1" data-toggle="tooltip" title="Add" style="cursor: default;"></i>

                <!-- Save -->
                <i class="fa-regular fa-save fixed-nav-btn p-1 d-inline-flex align-items-center justify-content-center mx-1" data-toggle="tooltip" title="Save" style="cursor: default;"></i>

                <!-- Edit -->
                <i class="fa-regular fa-edit fixed-nav-btn p-1 d-inline-flex align-items-center justify-content-center mx-1" data-toggle="tooltip" title="Edit" style="cursor: default;"></i>

                <!-- Delete -->
                <i class="fa-regular fa-trash-can fixed-nav-btn p-1 d-inline-flex align-items-center justify-content-center mx-1" data-toggle="tooltip" title="Delete" style="cursor: default;"></i>

                <!-- Close -->
                <a href="{{ route('posm.depletion.index') }}" class="mx-1">
                    <i class="fa-solid fa-xmark fixed-nav-btn fixed-nav-btn-active p-1 d-inline-flex align-items-center justify-content-center"
                        data-toggle="tooltip" title="Close"></i>
                </a>

                <!-- Column Visibility -->
                <i class="fa-solid fa-columns fixed-nav-btn p-1 d-inline-flex align-items-center justify-content-center mx-1" data-toggle="tooltip" title="Columns" style="cursor: default;"></i>
            </div>
        </div>
    </div>


{{-- Job Status Banner --}}
<div class="row mt-3">
    <div class="col-12">
        <div
            class="alert alert-{{ $depletion_job->qr_status == 'Pending' ? 'warning' : 'success' }} rounded-4 d-flex align-items-center gap-3 mb-0 py-2">
            <i class="fa-solid fa-{{ $depletion_job->qr_status == 'Pending' ? 'clock' : 'circle-check' }} fs-4"></i>
            <div>
                <strong>QR Status:</strong> {{ $depletion_job->qr_status }} &nbsp;|&nbsp;
                <strong>Shipment:</strong> {{ strtolower($depletion_job->shipment_status) === 'received' ? 'Received to Distribution Point' : str_replace('_', ' ', ucfirst($depletion_job->shipment_status)) }} &nbsp;|&nbsp;
                <strong>Created By:</strong> {{ $depletion_job->user->name ?? 'System' }} &nbsp;|&nbsp;
                <strong>Date:</strong> {{ $depletion_job->created_at->format('d M Y') }}
            </div>
        </div>
    </div>
</div>

<div class="row mt-3 mb-5">
    {{-- Job Summary Card --}}
    <div class="col-md-6">
        <div class="card h-100 rounded-4 shadow-sm">
            <div class="card-body">
                <h5 class="card-title fw-bold"><i class="fa-solid fa-briefcase me-2 text-primary"></i>Job Summary</h5>
                <table class="table table-sm table-borderless">
                    <tr>
                        <th width="40%">Job No:</th>
                        <td class="fw-bold text-warning">{{ $depletion_job->job_no }}</td>
                    </tr>
                    <tr>
                        <th>Date:</th>
                        <td>{{ $depletion_job->created_at->format('Y-m-d H:i') }}</td>
                    </tr>
                    <tr>
                        <th>Created By:</th>
                        <td>{{ $depletion_job->user->name ?? 'System' }}</td>
                    </tr>
                    <tr>
                        <th>QR Status:</th>
                        <td>
                            <span
                                class="badge badge-{{ $depletion_job->qr_status == 'Pending' ? 'warning' : 'success' }}">
                                {{ $depletion_job->qr_status }}
                            </span>
                        </td>
                    </tr>
                    <tr>
                        <th>Shipment Status:</th>
                        <td>
                            @php
                                $shipmentClass = match(strtolower($depletion_job->shipment_status)) {
                                    'received', 'delivered' => 'success',
                                    'partially delivered' => 'info',
                                    'approved_for_dispatch', 'ready_to_dispatch', 'dispatched' => 'primary',
                                    'pending' => 'warning',
                                    default => 'secondary'
                                };
                                $shipmentText = strtolower($depletion_job->shipment_status) === 'received' ? 'Received to Distribution Point' : str_replace('_', ' ', ucfirst($depletion_job->shipment_status));
                            @endphp
                            <span class="badge bg-soft-{{ $shipmentClass }} text-{{ $shipmentClass }} rounded-pill px-3 py-1">
                                {{ $shipmentText }}
                            </span>
                        </td>
                    </tr>
                    <tr>
                        <th>Total Outlets:</th>
                        <td>{{ $depletion_job_details->total() }}</td>
                    </tr>
                    <tr>
                        <th>Total Shipments:</th>
                        <td>{{ count($shipments) }}</td>
                    </tr>
                </table>
            </div>
        </div>
    </div>

    {{-- Activity Log --}}
    <div class="col-md-6">
        <div class="card h-100 rounded-4 shadow-sm">
            <div class="card-body">
                <h5 class="card-title fw-bold"><i class="fa-solid fa-clock-rotate-left me-2 text-secondary"></i>Activity
                    Logs</h5>
                <div class="table-responsive">
                    <table class="table table-sm">
                        <thead>
                            <tr>
                                <th>User</th>
                                <th>Action</th>
                                <th>Date</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse ($logs as $log)
                            <tr>
                                <td>{{ $log->user->name ?? 'System' }}</td>
                                <td>{{ $log->details }}</td>
                                <td class="text-muted small">{{ $log->created_at->format('Y-m-d H:i') }}</td>
                            </tr>
                            @empty
                            <tr>
                                <td colspan="3" class="text-center text-muted">No logs yet.</td>
                            </tr>
                            @endforelse
                        </tbody>
                    </table>
                    {{ $logs->links() }}
                </div>
            </div>
        </div>
    </div>

    {{-- Depletion Data Items (Products visible) --}}
    <div class="col-12 mt-3">
        <div class="card rounded-4 shadow-sm">
            <div class="card-body">
                <h5 class="card-title fw-bold">
                    <i class="fa-solid fa-list-check me-2 text-info"></i>Depletion Data Items
                    <span class="badge badge-blue ms-2">{{ $depletion_job_details->total() }} outlets</span>
                </h5>
                <div class="table-responsive">
                    <table class="table table-striped table-sm align-middle">
                        <thead class="table-dark">
                            <tr>
                                <th>#</th>
                                <th>Outlet</th>
                                <th>RT Code</th>
                                <th>Dist. Point</th>
                                <th>Market</th>
                                <th>Channel</th>
                                <th>Products &amp; Quantities</th>
                                <th class="text-end">Total Qty</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse ($depletion_job_details as $i => $detail)
                            <tr>
                                <td class="text-muted small">{{ $depletion_job_details->firstItem() + $i }}</td>
                                <td class="fw-semibold">{{ $detail->outlet }}</td>
                                <td><span class="badge badge-soft-secondary">{{ $detail->rt_code }}</span></td>
                                <td>
                                    @if($detail->outlet_info && $detail->outlet_info->distributionPoint)
                                        <span class="text-info fw-semibold">{{ $detail->outlet_info->distributionPoint->name }}</span>
                                    @else
                                        <span class="text-muted small">Not Assigned</span>
                                    @endif
                                </td>
                                <td>{{ $detail->market }}</td>
                                <td>{{ $detail->channel ?? '—' }}</td>
                                <td>
                                    @foreach ($detail->products as $product_qty)
                                    <span class="badge badge-blue me-1 mb-1" style="font-size:11px;">
                                        <i class="fa-solid fa-box me-1"></i>
                                        {{ $product_qty->product->name ?? 'Unknown Product' }}:
                                        <strong>{{ number_format($product_qty->qty, 0) }}</strong>
                                    </span>
                                    @endforeach
                                </td>
                                <td class="text-end fw-bold text-primary">
                                    {{ number_format($detail->products->sum('qty'), 0) }}
                                </td>
                            </tr>
                            @empty
                            <tr>
                                <td colspan="8" class="text-center text-muted py-4">No data found.</td>
                            </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
                <div class="mt-2">
                    {{ $depletion_job_details->appends(request()->query())->links() }}
                </div>
            </div>
        </div>
    </div>

    {{-- Shipments (if any) --}}
    @if(count($shipments) > 0)
    <div class="col-12 mt-3">
        <div class="card rounded-4 shadow-sm">
            <div class="card-body">
                <div class="d-flex justify-content-between align-items-center mb-3">
                    <h5 class="card-title fw-bold mb-0">
                        <i class="fa-solid fa-truck me-2 text-warning"></i>Generated Shipments
                        <span class="badge badge-warning ms-2">{{ count($shipments) }}</span>
                    </h5>
                    <div class="d-flex gap-2">
                        <a href="{{ route('posm.depletion.qr-package', $depletion_job->id) }}" target="_blank"
                            class="btn btn-sm btn-warning btn-save-section d-flex align-items-center justify-content-center" style="margin: 0 5px; background-color: #ffc107 !important; border-color: #343a40 !important; border: 1px solid #343a40 !important; color: #000 !important;">
                            <i class="fa-solid fa-qrcode me-3"></i>&nbsp;View QR Codes
                        </a>
                        <a href="{{ route('posm.depletion.download-gate-pass', $depletion_job->id) }}" target="_blank"
                            class="btn btn-sm btn-success btn-save-section" style="margin: 0 5px;">
                            <i class="fa-solid fa-file-invoice me-1"></i> Download Gate Pass
                        </a>
                    </div>
                </div>
                <div class="table-responsive">
                    <table class="table table-striped table-sm align-middle">
                        <thead class="table-dark">
                            <tr>
                                <th>Ref No</th>
                                <th>Supplier</th>
                                <th>Product</th>
                                <th class="text-end">QTY</th>
                                <th>Dist. Center</th>
                                <th>Status</th>
                                <th>Scanned At</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach ($shipments as $shipment)
                            <tr>
                                <td class="fw-bold text-warning">{{ $shipment->ref_no }}</td>
                                <td>{{ $shipment->supplier->name ?? '—' }}</td>
                                <td>
                                    @if($shipment->product)
                                    <span class="badge badge-blue">{{ $shipment->product->name }}</span>
                                    @else
                                    <span class="text-muted">—</span>
                                    @endif
                                </td>
                                <td class="text-end fw-bold">{{ number_format($shipment->qty, 0) }}</td>
                                <td>{{ $shipment->distribution->name ?? '—' }}</td>
                                <td>
                                    <span
                                        class="badge badge-{{ $shipment->shipment_status == 'Delivered' ? 'success' : ($shipment->shipment_status == 'In Transit' ? 'info' : 'warning') }}">
                                        {{ $shipment->shipment_status }}
                                    </span>
                                </td>
                                <td class="text-muted small">{{ $shipment->scanned_at ?
                                    \Carbon\Carbon::parse($shipment->scanned_at)->format('Y-m-d H:i') : '—' }}</td>
                            </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
    @endif
</div>
@endsection
@push("js")
<script>
    async function approvePlan(id) {
        const { value: email } = await Swal.fire({
            title: "Approve Depletion Plan",
            text: "Enter Logistics Officer's email to send the gate passes and QR codes.",
            input: "email",
            inputLabel: "Logistics Officer Email",
            inputPlaceholder: "Enter email address",
            showCancelButton: true,
            confirmButtonText: "Approve & Send",
            cancelButtonText: "Just Approve",
            reverseButtons: true
        });

        // Even if email is cancel/empty, we can still proceed with approval if they just want to approve
        // But user said 'email address must be entered before generating the PDFs'
        // If they click cancel, Swal returns undefined.
        
        let data = {
            _token: "{{ csrf_token() }}",
            logistics_email: email || ''
        };

        Swal.fire({
            title: "Processing...",
            text: "Generating shipments and sending notifications.",
            allowOutsideClick: false,
            didOpen: () => {
                Swal.showLoading();
            }
        });

        $.ajax({
            url: "/posm/depletion/" + id + "/approve",
            type: "POST",
            data: data,
            success: function(response) {
                location.reload();
            },
            error: function(xhr) {
                Swal.fire("Error", xhr.responseJSON?.message || "Failed to approve plan", "error");
            }
        });
    }

    async function sendPackage(id) {
        const { value: email } = await Swal.fire({
            title: "Send Logistics Package",
            input: "email",
            inputLabel: "Logistics Officer Email Address",
            inputPlaceholder: "Enter email address",
            showCancelButton: true
        });

        if (email) {
            Swal.fire({
                title: "Sending...",
                text: "Generating PDFs and sending email. Please wait.",
                allowOutsideClick: false,
                didOpen: () => {
                    Swal.showLoading();
                }
            });

            $.ajax({
                url: "/posm/depletion/" + id + "/send-package",
                type: "POST",
                data: {
                    _token: "{{ csrf_token() }}",
                    email: email
                },
                success: function(response) {
                    Swal.fire("Success!", response.message, "success");
                },
                error: function(xhr) {
                    Swal.fire("Error", xhr.responseJSON.message || "Failed to send package", "error");
                }
            });
        }
    }
</script>
@endpush