@extends('layouts.dashboard')
@section('content')

<style>
    .license-doc-frame { width: 100%; height: 420px; border: 1px solid #dee2e6; border-radius: 4px; }
    .service-row { padding: 10px 0; border-bottom: 1px solid #f0f0f0; }
    .service-row:last-child { border-bottom: none; }
    .activity-code-tag { display: inline-block; background: #e9f4fb; color: #1a7abf; border-radius: 3px; padding: 2px 8px; margin: 2px; font-size: 12px; }
    .status-badge-pending           { background: #ffc107; color: #333; }
    .status-badge-under_verification{ background: #17a2b8; color: #fff; }
    .status-badge-verified          { background: #28a745; color: #fff; }
    .status-badge-rejected          { background: #dc3545; color: #fff; }
    .status-badge-clarification_requested { background: #6f42c1; color: #fff; }
    .status-badge-renewal_pending   { background: #fd7e14; color: #fff; }
</style>

<div class="content-wrapper">
    <div class="content-header">
        <div class="container-fluid">
            <div class="row mb-2">
                <div class="col-sm-8">
                    <h1 class="m-0">
                        @if(!empty($submission['vendor_name']))
                            {{ $submission['vendor_name'] }} &middot; Submission #{{ $id }}
                        @else
                            Submission #{{ $id }}
                        @endif
                    </h1>
                    @if(!empty($submission['created_at']))
                        <small class="text-muted">Submitted: {{ viso_date_format($submission['created_at']) }}</small>
                    @endif
                </div>
                <div class="col-sm-4">
                    <a href="{{ url('/license/verifications') }}" class="btn btn-secondary float-right">
                        <i class="fa fa-arrow-left"></i> Back to Queue
                    </a>
                </div>
            </div>
        </div>
    </div>

    <section class="content">
        <div class="container-fluid">

            @if(empty($submission))
                <div class="alert alert-warning">
                    <i class="fa fa-exclamation-triangle"></i>
                    Submission data could not be loaded. The API may be unavailable.
                </div>
            @endif

            {{-- Top row: PDF viewer + Vendor declared data --}}
            <div class="row">
                {{-- PDF / Document viewer --}}
                <div class="col-md-5">
                    <div class="card">
                        <div class="card-header">
                            <h3 class="card-title"><i class="fa fa-file-pdf-o"></i> License Document</h3>
                        </div>
                        <div class="card-body p-2">
                            @if(!empty($submission['document_url']))
                                <iframe class="license-doc-frame"
                                    src="{{ $submission['document_url'] }}"
                                    title="Trade License Document">
                                </iframe>
                                <a href="{{ $submission['document_url'] }}" target="_blank" class="btn btn-sm btn-outline-primary mt-2 w-100">
                                    <i class="fa fa-external-link"></i> Open in New Tab
                                </a>
                            @else
                                <div class="d-flex align-items-center justify-content-center license-doc-frame text-muted">
                                    <div class="text-center">
                                        <i class="fa fa-file-o fa-3x mb-2"></i>
                                        <p>No document uploaded</p>
                                    </div>
                                </div>
                            @endif
                        </div>
                    </div>
                </div>

                {{-- Vendor-declared data --}}
                <div class="col-md-7">
                    <div class="card">
                        <div class="card-header">
                            <h3 class="card-title"><i class="fa fa-info-circle"></i> Vendor-Declared Details</h3>
                            @if(!empty($submission['status']))
                                <span class="badge float-right status-badge-{{ $submission['status'] }} px-2 py-1">
                                    {{ ucwords(str_replace('_', ' ', $submission['status'])) }}
                                </span>
                            @endif
                        </div>
                        <div class="card-body p-0">
                            <table class="table table-sm mb-0">
                                <tr>
                                    <th width="40%" class="pl-3">License Number</th>
                                    <td>{{ $submission['license_number'] ?? '—' }}</td>
                                </tr>
                                <tr>
                                    <th class="pl-3">Issuing Authority</th>
                                    <td>
                                        {{ $submission['issuing_authority_name'] ?? ($submission['issuing_authority_custom'] ?? '—') }}
                                    </td>
                                </tr>
                                <tr>
                                    <th class="pl-3">Declared Expiry</th>
                                    <td>
                                        @if(!empty($submission['declared_expiry_date']))
                                            {{ viso_date_format($submission['declared_expiry_date']) }}
                                        @else
                                            —
                                        @endif
                                    </td>
                                </tr>
                                <tr>
                                    <th class="pl-3">Legal Status</th>
                                    <td>{{ $submission['legal_status'] ?? '—' }}</td>
                                </tr>
                                <tr>
                                    <th class="pl-3">Clarification Count</th>
                                    <td>
                                        <span class="{{ ($submission['clarification_count'] ?? 0) >= 1 ? 'text-danger font-weight-bold' : '' }}">
                                            {{ $submission['clarification_count'] ?? 0 }} / 1
                                        </span>
                                    </td>
                                </tr>
                                @if(!empty($submission['rejection_code']))
                                <tr>
                                    <th class="pl-3">Last Rejection Code</th>
                                    <td><span class="badge badge-danger">{{ $submission['rejection_code'] }}</span> {{ $submission['rejection_reason'] ?? '' }}</td>
                                </tr>
                                @endif
                            </table>
                        </div>
                    </div>

                    {{-- Portal verify link --}}
                    <div class="card">
                        <div class="card-header">
                            <h3 class="card-title"><i class="fa fa-globe"></i> Verify on Portal</h3>
                        </div>
                        <div class="card-body">
                            <p class="text-muted mb-2">Open the government portal to verify this license, then paste the verified details below.</p>
                            <a href="https://ded.gov.ae" target="_blank" class="btn btn-sm btn-outline-secondary mr-2">
                                <i class="fa fa-external-link"></i> Open DED (Mainland)
                            </a>
                            <a href="https://dmcc.ae" target="_blank" class="btn btn-sm btn-outline-secondary mr-2">
                                <i class="fa fa-external-link"></i> Open DMCC
                            </a>
                            <a href="https://tecom.ae" target="_blank" class="btn btn-sm btn-outline-secondary">
                                <i class="fa fa-external-link"></i> Open TECOM
                            </a>
                        </div>
                    </div>
                </div>
            </div>

            {{-- Verified details form --}}
            <div class="row">
                <div class="col-12">
                    <div class="card card-primary card-outline">
                        <div class="card-header">
                            <h3 class="card-title"><i class="fa fa-check-circle"></i> Verified Details <small class="text-muted">(paste from portal)</small></h3>
                        </div>
                        <div class="card-body">
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label>Business Name</label>
                                        <input type="text" id="verified_business_name" class="form-control"
                                            value="{{ $submission['verified_business_name'] ?? '' }}"
                                            placeholder="e.g. Sai Caterers Trading LLC">
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label>License Number (as on portal)</label>
                                        <input type="text" id="verified_license_number" class="form-control"
                                            value="{{ $submission['license_number'] ?? '' }}"
                                            placeholder="e.g. LSF12345-6789">
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="form-group">
                                        <label>Portal Status</label>
                                        <select id="verified_portal_status" class="form-control">
                                            <option value="">-- Select --</option>
                                            <option value="Active" {{ ($submission['verified_portal_status'] ?? '') === 'Active' ? 'selected' : '' }}>Active</option>
                                            <option value="Suspended" {{ ($submission['verified_portal_status'] ?? '') === 'Suspended' ? 'selected' : '' }}>Suspended</option>
                                            <option value="Expired" {{ ($submission['verified_portal_status'] ?? '') === 'Expired' ? 'selected' : '' }}>Expired</option>
                                            <option value="Cancelled" {{ ($submission['verified_portal_status'] ?? '') === 'Cancelled' ? 'selected' : '' }}>Cancelled</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="form-group">
                                        <label>Verified Expiry Date <span class="text-danger">*</span></label>
                                        <input type="date" id="verified_expiry_date" class="form-control"
                                            value="{{ $submission['verified_expiry_date'] ?? '' }}">
                                        <small class="text-muted">Use the portal date, NOT the vendor's declared date.</small>
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="form-group">
                                        <label>Legal Status</label>
                                        <input type="text" id="verified_legal_status" class="form-control"
                                            value="{{ $submission['verified_legal_status'] ?? '' }}"
                                            placeholder="e.g. LLC, Sole Proprietor">
                                    </div>
                                </div>
                                <div class="col-md-12">
                                    <div class="form-group">
                                        <label>Activity Codes <small class="text-muted">(one per line, e.g. "Food catering services (47.21)")</small></label>
                                        <textarea id="verified_activity_codes" class="form-control" rows="4"
                                            placeholder="Food catering services (47.21)&#10;Event management (74.10)">{{ !empty($submission['activity_codes']) ? implode("\n", (array)$submission['activity_codes']) : '' }}</textarea>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            {{-- Services on OOTBO + per-service approval --}}
            <div class="row">
                <div class="col-12">
                    <div class="card">
                        <div class="card-header">
                            <h3 class="card-title">
                                <i class="fa fa-list"></i>
                                Services on OOTBO
                                @if(!empty($submission['services']))
                                    <span class="badge badge-secondary ml-1">{{ count($submission['services']) }}</span>
                                @endif
                            </h3>
                            <div class="card-tools">
                                <button type="button" class="btn btn-xs btn-default" id="select-all-services">Select All</button>
                                <button type="button" class="btn btn-xs btn-default" id="deselect-all-services">Deselect All</button>
                            </div>
                        </div>
                        <div class="card-body p-0">
                            @if(!empty($submission['services']))
                                @foreach($submission['services'] as $service)
                                <div class="service-row px-3">
                                    <div class="d-flex align-items-center justify-content-between">
                                        <div class="d-flex align-items-center">
                                            <input type="checkbox"
                                                class="service-checkbox mr-3"
                                                id="svc_{{ $service['id'] }}"
                                                data-service-id="{{ $service['id'] }}"
                                                value="{{ $service['id'] }}"
                                                {{ in_array($service['verification_status'] ?? '', ['verified']) ? 'checked' : '' }}>
                                            <label for="svc_{{ $service['id'] }}" class="mb-0 font-weight-bold">
                                                {{ $service['name'] }}
                                            </label>
                                        </div>
                                        <div>
                                            @php
                                                $svcStatus = $service['verification_status'] ?? 'pending';
                                            @endphp
                                            <span class="badge status-badge-{{ $svcStatus }} px-2">
                                                {{ ucwords(str_replace('_', ' ', $svcStatus)) }}
                                            </span>
                                            @if(!empty($service['rejection_code']))
                                                <span class="badge badge-danger ml-1">{{ $service['rejection_code'] }}</span>
                                            @endif
                                        </div>
                                    </div>
                                    @if(!empty($service['rejection_reason']))
                                        <small class="text-danger ml-4"><i class="fa fa-exclamation-circle"></i> {{ $service['rejection_reason'] }}</small>
                                    @endif
                                </div>
                                @endforeach
                            @else
                                <div class="p-3 text-muted text-center">
                                    <i class="fa fa-info-circle"></i> No services found for this vendor.
                                </div>
                            @endif
                        </div>
                    </div>
                </div>
            </div>

            {{-- NOC Document (if uploaded) --}}
            @if(!empty($submission['noc_document_url']))
            <div class="row">
                <div class="col-12">
                    <div class="callout callout-info">
                        <h5><i class="fa fa-paperclip"></i> NOC Document</h5>
                        <a href="{{ $submission['noc_document_url'] }}" target="_blank" class="btn btn-sm btn-outline-info">
                            <i class="fa fa-external-link"></i> View NOC
                        </a>
                    </div>
                </div>
            </div>
            @endif

            {{-- Action buttons --}}
            <div class="row mb-4">
                <div class="col-12">
                    <div class="card">
                        <div class="card-body">
                            <button type="button" class="btn btn-warning mr-2" id="btn-clarification"
                                {{ ($submission['clarification_count'] ?? 0) >= 1 ? 'disabled title="Max 1 clarification per vendor"' : '' }}>
                                <i class="fa fa-comment"></i> Request Clarification
                            </button>
                            <button type="button" class="btn btn-secondary mr-2" id="btn-noc" data-toggle="modal" data-target="#nocModal">
                                <i class="fa fa-paperclip"></i> Upload NOC
                            </button>
                            <button type="button" class="btn btn-danger mr-2" id="btn-reject" data-toggle="modal" data-target="#rejectModal">
                                <i class="fa fa-times"></i> Reject
                            </button>
                            <button type="button" class="btn btn-success" id="btn-approve">
                                <i class="fa fa-check"></i> Approve Selected Services
                            </button>
                        </div>
                    </div>
                </div>
            </div>

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

{{-- ============================================================ --}}
{{-- A-D3: Rejection Modal --}}
{{-- ============================================================ --}}
<div class="modal fade" id="rejectModal" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header bg-danger text-white">
                <h5 class="modal-title"><i class="fa fa-times-circle"></i> Reject Submission</h5>
                <button type="button" class="close text-white" data-dismiss="modal">
                    <span>&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div class="form-group">
                    <label class="font-weight-bold">Scope</label>
                    <div>
                        <div class="icheck-primary d-inline mr-3">
                            <input type="radio" name="rejection_scope" id="scope_vendor" value="vendor" checked>
                            <label for="scope_vendor">Whole vendor</label>
                        </div>
                        <div class="icheck-primary d-inline">
                            <input type="radio" name="rejection_scope" id="scope_services" value="services">
                            <label for="scope_services">Specific services</label>
                        </div>
                    </div>
                </div>

                <div class="form-group" id="specific-services-section" style="display:none;">
                    <label class="font-weight-bold">Select Services to Reject</label>
                    <div id="reject-service-checkboxes">
                        @if(!empty($submission['services']))
                            @foreach($submission['services'] as $service)
                                <div class="icheck-danger">
                                    <input type="checkbox" class="reject-service-cb" id="rsvc_{{ $service['id'] }}"
                                        value="{{ $service['id'] }}">
                                    <label for="rsvc_{{ $service['id'] }}">{{ $service['name'] }}</label>
                                </div>
                            @endforeach
                        @endif
                    </div>
                </div>

                <div class="form-group">
                    <label class="font-weight-bold">Rejection Code <span class="text-danger">*</span></label>
                    <select id="rejection_code" class="form-control">
                        <option value="">-- Select Code --</option>
                        @if(!empty($rejectionCodes))
                            @foreach($rejectionCodes as $code)
                                <option value="{{ $code['code'] }}" data-reason="{{ $code['reason'] }}">
                                    {{ $code['code'] }} – {{ $code['label'] }}
                                </option>
                            @endforeach
                        @else
                            <option value="REJ-01" data-reason="The licence number provided could not be found on the government portal.">REJ-01 – Licence number not found</option>
                            <option value="REJ-02" data-reason="The trade licence is expired or has been suspended.">REJ-02 – Licence expired/suspended</option>
                            <option value="REJ-03" data-reason="The licence number on the document does not match the number you entered.">REJ-03 – Number doesn't match form</option>
                            <option value="REJ-04" data-reason="The document uploaded does not appear to be a valid trade licence.">REJ-04 – Not a trade licence</option>
                            <option value="REJ-05" data-reason="The uploaded document is illegible or too low resolution to verify.">REJ-05 – Document illegible</option>
                            <option value="REJ-06" data-reason="The activities on your trade licence don't match the services you've offered on OOTBO.">REJ-06 – Activities don't match OOTBO</option>
                            <option value="REJ-07" data-reason="The business entity on the licence is different from the business registered on OOTBO.">REJ-07 – Different business entity</option>
                        @endif
                    </select>
                </div>

                <div class="form-group">
                    <label class="font-weight-bold">Reason <small class="text-muted">(auto-filled, editable)</small></label>
                    <textarea id="rejection_reason" class="form-control" rows="4"
                        placeholder="Select a rejection code above to auto-fill..."></textarea>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-danger" id="btn-confirm-reject">
                    <i class="fa fa-times"></i> Confirm Reject
                </button>
            </div>
        </div>
    </div>
</div>

{{-- ============================================================ --}}
{{-- A-D4: NOC Upload Modal --}}
{{-- ============================================================ --}}
<div class="modal fade" id="nocModal" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title"><i class="fa fa-paperclip"></i> Upload NOC</h5>
                <button type="button" class="close" data-dismiss="modal">
                    <span>&times;</span>
                </button>
            </div>
            <form id="noc-form" enctype="multipart/form-data">
                @csrf
                <div class="modal-body">
                    <div class="form-group">
                        <label>Reason for NOC</label>
                        <input type="text" name="reason" id="noc_reason" class="form-control"
                            placeholder="e.g. Activity code clarification">
                    </div>
                    <div class="form-group">
                        <label>NOC Document <span class="text-danger">*</span></label>
                        <div class="input-group">
                            <div class="custom-file">
                                <input type="file" class="custom-file-input" id="noc_document" name="noc_document"
                                    accept=".pdf,.jpg,.jpeg,.png">
                                <label class="custom-file-label" for="noc_document">Choose file...</label>
                            </div>
                        </div>
                        <small class="text-muted">PDF, JPG or PNG. Max 5MB.</small>
                    </div>
                    <div class="form-group">
                        <label>Note <small class="text-muted">(optional)</small></label>
                        <textarea name="note" id="noc_note" class="form-control" rows="3"
                            placeholder="Any additional context..."></textarea>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-primary" id="btn-save-noc">
                        <i class="fa fa-upload"></i> Save NOC
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

<script>
    var submission_id = '{{ $id }}';
</script>

@endsection