@extends('backEnd.layouts.master')
@section('title','Incomplete Orders')

@push('styles')
<style>
.inc-stats .inc-stat-card {
    background:#fff; border:1px solid #e5e7eb; border-radius:6px;
    border-left:4px solid var(--inc-color); overflow:hidden;
}
.inc-stats .inc-stat-icon {
    width:48px; height:48px; border-radius:50%; background:var(--inc-color);
    color:#fff; display:flex; align-items:center; justify-content:center; font-size:20px;
}
.inc-filter-pill {
    padding:5px 14px; border-radius:5px; font-size:12px; font-weight:700;
    text-decoration:none; display:inline-block;
}
.inc-filter-pill.is-active { color:#fff; }
.inc-filter-pill.is-muted { background:#f3f4f6; color:#6b7280; }
.inc-filter-pill.is-muted:hover { background:#e5e7eb; }

.inc-panel {
    background:#fff; border:1px solid #e5e7eb; border-radius:4px; overflow:hidden;
}
.inc-panel-head {
    padding:14px 16px 10px; border-bottom:1px solid #e5e7eb;
}
.inc-table { width:100%; margin:0; border-collapse:collapse; font-size:12px; }
.inc-table thead th {
    background:#f3f4f6; border-bottom:1px solid #d1d5db;
    padding:10px 12px; font-size:12px; font-weight:700; color:#374151; white-space:nowrap;
}
.inc-table tbody td {
    border-bottom:1px solid #e5e7eb; padding:12px; vertical-align:top;
}
.inc-table tbody tr:nth-child(even) { background:#f9fafb; }
.inc-table tbody tr:nth-child(odd)  { background:#fff; }
.inc-table tbody tr:hover { background:#f3f4f6 !important; }
.inc-table tbody tr:last-child td { border-bottom:none; }

.inc-id { font-weight:800; color:#2563eb; font-size:13px; }
.inc-source {
    display:inline-flex; align-items:center; justify-content:center;
    width:18px; height:18px; border-radius:50%; font-size:10px; font-weight:800; color:#fff;
    margin-top:4px;
}
.inc-source.is-facebook { background:#1877f2; }
.inc-source.is-google   { background:#ea4335; }
.inc-source.is-direct   { background:#6366f1; }
.inc-source.is-organic  { background:#22c55e; }
.inc-source.is-unknown  { background:#94a3b8; }

.inc-customer-name { font-weight:700; color:#15803d; margin-bottom:2px; }
.inc-customer-phone { color:#374151; font-weight:600; }
.inc-customer-ip { color:#6b7280; font-size:10px; margin-top:2px; }
.inc-location-main { font-weight:600; color:#111827; }
.inc-location-sub { color:#6b7280; font-size:11px; }
.inc-amount { font-size:16px; font-weight:800; color:#111827; }
.inc-items-badge {
    display:inline-block; background:#2563eb; color:#fff;
    font-size:10px; font-weight:700; padding:2px 8px; border-radius:3px; margin-top:4px;
}
.inc-date { font-size:11px; color:#6b7280; margin-bottom:4px; }
.inc-note-cell { min-width:220px; max-width:320px; }
.inc-note-cell .order-note-list { margin-top: 4px; }
.inc-thumb {
    width:40px; height:40px; object-fit:cover; border-radius:4px;
    border:1px solid #e5e7eb; margin-bottom:4px;
}
.inc-act {
    display:inline-flex; align-items:center; justify-content:center;
    min-width:30px; height:30px; border-radius:4px; border:none;
    text-decoration:none; cursor:pointer; color:#fff; font-size:11px; font-weight:700;
    padding:0 8px; margin:0 2px;
}
.inc-act-create { background:#22c55e; }
.inc-act-call   { background:#15803d; }
.inc-act-view   { background:#06b6d4; }
.inc-act-note   { background:#f59e0b; }
.inc-act-delete { background:#ef4444; }
</style>
@endpush

@section('content')
<div class="container-fluid py-3">

    {{-- Stats --}}
    <div class="row g-3 mb-3 inc-stats">
        @foreach([
            ['label'=>'TOTAL INCOMPLETE','key'=>'all','color'=>'#6366f1','icon'=>'fa-exclamation-circle','active'=>'primary'],
            ['label'=>'TODAY',           'key'=>'today','color'=>'#22c55e','icon'=>'fa-calendar-day','active'=>'success'],
            ['label'=>'THIS WEEK',       'key'=>'week','color'=>'#06b6d4','icon'=>'fa-calendar-week','active'=>'info'],
            ['label'=>'THIS MONTH',      'key'=>'month','color'=>'#f59e0b','icon'=>'fa-calendar','active'=>'warning'],
        ] as $stat)
        <div class="col-md-3 col-6">
            <div class="inc-stat-card" style="--inc-color:{{ $stat['color'] }}">
                <div class="card-body py-3 d-flex align-items-center gap-3">
                    <div class="inc-stat-icon"><i class="fas {{ $stat['icon'] }}"></i></div>
                    <div>
                        <div class="small text-muted fw-semibold text-uppercase" style="font-size:10px">{{ $stat['label'] }}</div>
                        <div class="fw-bold fs-3 lh-1">{{ $counts[$stat['key']] }}</div>
                    </div>
                </div>
            </div>
        </div>
        @endforeach
    </div>

    <div class="inc-panel">
        <div class="inc-panel-head">
            <div class="d-flex justify-content-between align-items-center flex-wrap gap-2 mb-3">
                <h5 class="fw-bold mb-0"><i class="fas fa-exclamation-circle me-2 text-warning"></i>Incomplete Orders List</h5>
                <form method="POST" action="{{ route('admin.incomplete-orders.bulk-delete') }}" id="bulkForm">
                    @csrf @method('DELETE')
                    <input type="hidden" name="ids" id="bulkIds">
                    <button type="button" class="btn btn-danger btn-sm px-3" onclick="bulkDelete()">
                        <i class="fas fa-trash me-1"></i> Bulk Delete
                    </button>
                </form>
            </div>

            <div class="d-flex gap-2 flex-wrap align-items-center mb-2">
                @foreach([
                    ['all','All','#6366f1'],
                    ['today','Today','#22c55e'],
                    ['week','This Week','#06b6d4'],
                    ['month','This Month','#f59e0b'],
                ] as [$k,$l,$color])
                <a href="{{ request()->fullUrlWithQuery(['filter'=>$k]) }}"
                   class="inc-filter-pill {{ $filter===$k ? 'is-active' : 'is-muted' }}"
                   style="{{ $filter===$k ? 'background:'.$color : '' }}">
                    {{ $l }} ({{ $counts[$k] }})
                </a>
                @endforeach

                <form method="GET" class="d-flex gap-1 ms-auto align-items-center flex-wrap">
                    <input type="hidden" name="filter" value="{{ $filter }}">
                    <input type="date" name="start_date" class="form-control form-control-sm" style="width:140px" value="{{ request('start_date') }}">
                    <input type="date" name="end_date" class="form-control form-control-sm" style="width:140px" value="{{ request('end_date') }}">
                    <button class="btn btn-sm btn-primary"><i class="fas fa-filter"></i></button>
                </form>
            </div>

            <div class="d-flex gap-2 align-items-center flex-wrap">
                <select class="form-select form-select-sm" style="width:200px" id="bulkAction">
                    <option value="">Select Action</option>
                    <option value="delete">Delete Selected</option>
                </select>
                <form method="GET" class="d-flex gap-1 ms-auto">
                    <input type="hidden" name="filter" value="{{ $filter }}">
                    @if(request('start_date'))<input type="hidden" name="start_date" value="{{ request('start_date') }}">@endif
                    @if(request('end_date'))<input type="hidden" name="end_date" value="{{ request('end_date') }}">@endif
                    <div class="live-search-wrap">
                        <input type="text" name="search" value="{{ request('search') }}"
                               class="form-control form-control-sm live-search-input"
                               style="width:min(280px, 100%)"
                               placeholder="Search name, phone, address…"
                               autocomplete="off">
                    </div>
                    <button type="submit" class="btn btn-primary btn-sm"><i class="fas fa-search"></i> Search</button>
                </form>
            </div>
        </div>

        <div id="liveSearchResults">
        <div class="table-responsive">
            <table class="inc-table">
                <thead>
                    <tr>
                        <th width="36"><input type="checkbox" id="checkAll" onclick="toggleAll(this)"></th>
                        <th>ID</th>
                        <th>Customer</th>
                        <th>Location</th>
                        <th>Products</th>
                        <th>Date / Note</th>
                        <th class="text-center">Action</th>
                    </tr>
                </thead>
                <tbody>
                    @php
                    $sourceMap = [
                        'facebook' => ['class'=>'is-facebook','label'=>'F'],
                        'fb'       => ['class'=>'is-facebook','label'=>'F'],
                        'google'   => ['class'=>'is-google','label'=>'G'],
                        'direct'   => ['class'=>'is-direct','label'=>'D'],
                        'organic'  => ['class'=>'is-organic','label'=>'S'],
                    ];
                    @endphp
                    @forelse($orders as $order)
                    @php
                        $thumb = $order->items->first()?->product_thumbnail ?? $order->items->first()?->product?->thumbnail;
                        $src = strtolower($order->utm_source ?? 'direct');
                        $srcInfo = $sourceMap[$src] ?? ['class'=>'is-unknown','label'=>'?'];
                    @endphp
                    <tr>
                        <td><input type="checkbox" class="row-check" value="{{ $order->id }}"></td>
                        <td>
                            <div class="inc-id">#{{ $order->id }}</div>
                            <span class="inc-source {{ $srcInfo['class'] }}" title="{{ ucfirst($src) }}">{{ $srcInfo['label'] }}</span>
                        </td>
                        <td>
                            <div class="inc-customer-name">{{ $order->customer_name }}</div>
                            <a href="tel:{{ preg_replace('/\s+/', '', $order->customer_phone) }}" class="inc-customer-phone text-decoration-none">{{ $order->customer_phone }}</a>
                            @if($order->ip_address)
                            <div class="inc-customer-ip">{{ $order->ip_address }}</div>
                            @endif
                        </td>
                        <td>
                            @if($order->district || $order->upazila)
                            <div class="inc-location-main">{{ $order->district ?: '—' }}</div>
                            @if($order->upazila)<div class="inc-location-sub">{{ $order->upazila }}</div>@endif
                            @elseif($order->shipping_address && $order->shipping_address !== '—')
                            <div class="inc-location-main">{{ Str::limit($order->shipping_address, 40) }}</div>
                            @else
                            <span class="text-muted small">Not specified</span>
                            @endif
                        </td>
                        <td>
                            @if($thumb)<img src="{{ asset($thumb) }}" class="inc-thumb" alt="">@endif
                            <div class="inc-amount">৳{{ number_format($order->amount) }}</div>
                            <span class="inc-items-badge">{{ $order->items->count() }} Items</span>
                        </td>
                        <td class="inc-note-cell">
                            <div class="inc-date">{{ $order->created_at->format('d M Y g:i A') }}</div>
                            @if($order->admin_note)
                            @include('backEnd.order.partials.order-note-list', ['noteText' => $order->admin_note])
                            @endif
                        </td>
                        <td class="text-center">
                            <a href="tel:{{ preg_replace('/\s+/', '', $order->customer_phone) }}" class="inc-act inc-act-call" title="Call customer">
                                <i class="fas fa-phone"></i>
                            </a>
                            <a href="{{ route('admin.orders.create') }}?phone={{ $order->customer_phone }}" class="inc-act inc-act-create" title="Create Order">
                                <i class="fas fa-plus"></i> Create
                            </a>
                            <a href="{{ route('admin.orders.show', $order->id) }}" class="inc-act inc-act-view" title="View"><i class="fas fa-eye"></i></a>
                            <button type="button" class="inc-act inc-act-note" title="Note"
                                    onclick="openNoteModal({{ $order->id }}, @json($order->invoice_id), @json($order->admin_note))">
                                <i class="fas fa-exclamation-triangle"></i>
                            </button>
                            <form action="{{ route('admin.orders.destroy', $order->id) }}" method="POST" class="d-inline" id="del-inc-{{ $order->id }}">
                                @csrf @method('DELETE')
                                <button type="button" class="inc-act inc-act-delete delete-confirm" data-form="#del-inc-{{ $order->id }}" title="Delete">
                                    <i class="fas fa-trash"></i>
                                </button>
                            </form>
                        </td>
                    </tr>
                    @empty
                    <tr>
                        <td colspan="7" class="text-center py-5 text-muted">
                            <i class="fas fa-check-circle fa-2x d-block mb-2 text-success opacity-50"></i>
                            No incomplete orders!
                        </td>
                    </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
        @if($orders->hasPages())<div class="p-3">{{ $orders->links() }}</div>@endif
        </div>
    </div>
</div>

{{-- Note Modal --}}
<div class="modal fade" id="noteModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header py-2">
                <h6 class="modal-title fw-bold">Add Note — <span id="noteModalInvoice"></span></h6>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <div id="existingNotesWrap" class="mb-3" style="display:none">
                    <label class="form-label fw-semibold small text-muted">Previous Notes</label>
                    <div id="existingNotes" class="order-note-list d-flex flex-column gap-1"></div>
                </div>
                <label class="form-label fw-semibold small">New Note</label>
                <textarea id="noteText" class="form-control" rows="4" placeholder="e.g. Pore janabe / Call dhore nai…"></textarea>
            </div>
            <div class="modal-footer py-2">
                <button class="btn btn-secondary btn-sm" data-bs-dismiss="modal">Close</button>
                <button class="btn btn-primary btn-sm" id="saveNoteBtn" onclick="submitNote()">Save</button>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
const CSRF = document.querySelector('meta[name=csrf-token]').content;
let noteOrderId = null;

function toggleAll(cb) { document.querySelectorAll('.row-check').forEach(c => c.checked = cb.checked); }

function bulkDelete() {
    const ids = [...document.querySelectorAll('.row-check:checked')].map(c => c.value);
    if (!ids.length) { alert('Select at least one order.'); return; }
    if (!confirm('Delete ' + ids.length + ' orders?')) return;
    document.getElementById('bulkIds').value = JSON.stringify(ids);
    document.getElementById('bulkForm').submit();
}

document.getElementById('bulkAction')?.addEventListener('change', function () {
    if (this.value === 'delete') bulkDelete();
    this.value = '';
});

function openNoteModal(id, invoice, existingNote) {
    noteOrderId = id;
    document.getElementById('noteModalInvoice').textContent = invoice;
    document.getElementById('noteText').value = '';
    const wrap = document.getElementById('existingNotesWrap');
    const box  = document.getElementById('existingNotes');
    if (existingNote) {
        OrderNotes.renderList(box, existingNote);
        wrap.style.display = '';
    } else {
        OrderNotes.renderList(box, '');
        wrap.style.display = 'none';
    }
    new bootstrap.Modal(document.getElementById('noteModal')).show();
}

function submitNote() {
    const note = document.getElementById('noteText').value.trim();
    if (!note) {
        toastr.warning('Please write a note first.');
        return;
    }
    const btn = document.getElementById('saveNoteBtn');
    btn.disabled = true;
    fetch(`{{ url('admin/orders') }}/${noteOrderId}/note`, {
        method: 'POST',
        headers: {'X-CSRF-TOKEN': CSRF, 'Content-Type': 'application/json', 'Accept': 'application/json'},
        body: JSON.stringify({note})
    }).then(async r => {
        const data = await r.json().catch(() => ({}));
        if (!r.ok || !data.ok) throw new Error(data.message || 'Could not save note.');
        return data;
    }).then(() => {
        bootstrap.Modal.getInstance(document.getElementById('noteModal'))?.hide();
        toastr.success('Note saved.');
        location.reload();
    }).catch(err => {
        toastr.error(err.message || 'Could not save note.');
    }).finally(() => {
        btn.disabled = false;
    });
}
</script>
@endpush