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

<style>
    .license-doc-frame { width: 100%; height: 420px; border: 1px solid #dee2e6; border-radius: 4px; }
    .license-doc-overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,.75); color: #6c757d; border-radius: 4px; z-index: 2; }
    .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; }
    .status-badge-renewed           { background: #20c997; 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

            @php
                $isFinalized = in_array($submission['status'] ?? '', ['verified', 'rejected']);
            @endphp

            {{-- Top row: PDF viewer + Vendor declared data --}}
            <div class="row">
                {{-- PDF / Document viewer: License + NOC + Additional tabs share one preview frame --}}
                @php
                    $documentTabs = [
                        'license' => [
                            'label'   => 'License Document',
                            'url'     => $submission['document_url'] ?? null,
                            'exists'  => $submission['document_exists'] ?? false,
                            'empty'   => 'No document uploaded',
                        ],
                        'noc' => [
                            'label'   => 'NOC Document',
                            'url'     => $submission['noc_document_url'] ?? null,
                            'exists'  => $submission['noc_document_exists'] ?? false,
                            'empty'   => 'NOC Document not available.',
                        ],
                        'additional' => [
                            'label'   => 'Additional Document',
                            'url'     => $submission['additional_document_url'] ?? null,
                            'exists'  => $submission['additional_document_exists'] ?? false,
                            'empty'   => 'No additional document uploaded.',
                        ],
                    ];
                    $activeDoc = $documentTabs['license'];
                @endphp
                <div class="col-md-5">
                    <div class="card card-primary card-outline card-outline-tabs">
                        <div class="card-header p-0 border-bottom-0">
                            <ul class="nav nav-tabs" id="doc-tabs" role="tablist">
                                @foreach($documentTabs as $key => $tab)
                                <li class="nav-item">
                                    <a class="nav-link {{ $key === 'license' ? 'active' : '' }}" href="#" role="tab"
                                        data-doc-key="{{ $key }}"
                                        data-doc-label="{{ $tab['label'] }}"
                                        data-doc-url="{{ $tab['url'] }}"
                                        data-doc-exists="{{ $tab['exists'] ? '1' : '0' }}"
                                        data-doc-empty="{{ $tab['empty'] }}"
                                        aria-selected="{{ $key === 'license' ? 'true' : 'false' }}">
                                        <i class="fa {{ $key === 'license' ? 'fa-file-pdf-o' : 'fa-paperclip' }}"></i> {{ $tab['label'] }}
                                    </a>
                                </li>
                                @endforeach
                            </ul>
                        </div>
                        <div class="card-body p-2">
                            <div class="position-relative">
                                <div id="doc-loading" class="license-doc-overlay" style="display:none;">
                                    <i class="fa fa-spinner fa-spin fa-2x"></i>
                                </div>
                                <iframe id="doc-frame" class="license-doc-frame"
                                    src="{{ $activeDoc['url'] && $activeDoc['exists'] ? $activeDoc['url'] : 'about:blank' }}"
                                    title="{{ $activeDoc['label'] }}"
                                    style="{{ $activeDoc['url'] && $activeDoc['exists'] ? '' : 'display:none;' }}">
                                </iframe>
                                <div id="doc-empty" class="align-items-center justify-content-center license-doc-frame text-muted"
                                    style="display:{{ $activeDoc['url'] && $activeDoc['exists'] ? 'none' : 'flex' }};">
                                    <div class="text-center px-3">
                                        <i class="fa {{ $activeDoc['url'] ? 'fa-exclamation-triangle' : 'fa-file-o' }} fa-3x mb-2"></i>
                                        <p id="doc-empty-message">
                                            {{ $activeDoc['url'] ? $activeDoc['label'] . ' could not be found. The file may have been moved or deleted.' : $activeDoc['empty'] }}
                                        </p>
                                    </div>
                                </div>
                            </div>
                            <a id="doc-open-link" href="{{ $activeDoc['url'] ?: '#' }}" target="_blank"
                                class="btn btn-sm btn-outline-primary mt-2 w-100"
                                style="{{ $activeDoc['url'] && $activeDoc['exists'] ? '' : 'display:none;' }}">
                                <i class="fa fa-external-link"></i> Open in New Tab
                            </a>
                        </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['is_renewed'] ? 'renewed' : $submission['status'] }} px-2 py-1">
                                    {{ $submission['is_renewed'] ? 'Renewed' : ($submission['status'] === 'renewal_pending' ? 'Expired' : 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" {{ $isFinalized ? 'disabled' : '' }}>Select All</button>
                                <button type="button" class="btn btn-xs btn-default" id="deselect-all-services" {{ $isFinalized ? 'disabled' : '' }}>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' : '' }}
                                                {{ $isFinalized ? 'disabled' : '' }}>
                                            <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>

            {{-- Action buttons --}}
            <div class="row mb-4">
                <div class="col-12">
                    <div class="card">
                        <div class="card-body">
                            @php
                                $finalizedTitle = $isFinalized ? 'title="This submission has already been ' . $submission['status'] . '"' : '';
                            @endphp
                            <button type="button" class="btn btn-warning mr-2" id="btn-clarification"
                                {{ $isFinalized || ($submission['clarification_count'] ?? 0) >= 1 ? 'disabled' : '' }}
                                {!! $isFinalized ? $finalizedTitle : (($submission['clarification_count'] ?? 0) >= 1 ? '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"
                                {!! $isFinalized ? 'disabled' : 'data-toggle="modal" data-target="#nocModal"' !!}
                                {!! $finalizedTitle !!}>
                                <i class="fa fa-paperclip"></i> Upload NOC
                            </button>
                            <button type="button" class="btn btn-danger mr-2" id="btn-reject"
                                {!! $isFinalized ? 'disabled' : 'data-toggle="modal" data-target="#rejectModal"' !!}
                                {!! $finalizedTitle !!}>
                                <i class="fa fa-times"></i> Reject
                            </button>
                            <button type="button" class="btn btn-success" id="btn-approve"
                                {{ $isFinalized ? 'disabled' : '' }}
                                {!! $finalizedTitle !!}>
                                <i class="fa fa-check"></i> Approve Selected Services
                            </button>
                            @if(($submission['status'] ?? '') === 'verified')
                                <a href="{{ url('/subscription/payments/create?vendor_id=' . $submission['vendor_id']) }}"
                                    class="btn btn-primary ml-2" id="btn-make-payment">
                                    <i class="fa fa-credit-card"></i> Make Payment
                                </a>
                            @else
                                <button type="button" class="btn btn-primary ml-2" id="btn-make-payment" disabled
                                    title="Available once the submission is verified">
                                    <i class="fa fa-credit-card"></i> Make Payment
                                </button>
                            @endif
                        </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