@extends('layouts.admin-master')
@section('title', 'Deal Pipeline')
@section('style')
    @include('admin.style')
    <style>
        /* ── Status tab strip ── */
        .pipeline-tabs {
            display: flex;
            gap: 4px;
            background: #f3f4f6;
            border-radius: 12px;
            padding: 4px;
            width: fit-content;
        }
        .pipeline-tabs a {
            padding: 7px 18px;
            border-radius: 8px;
            font-size: 13px;
            font-weight: 500;
            color: #6b7280;
            text-decoration: none;
            transition: background .15s, color .15s;
            white-space: nowrap;
        }
        .pipeline-tabs a.active,
        .pipeline-tabs a:hover {
            background: #fff;
            color: #365CF5;
            box-shadow: 0 1px 4px rgba(0,0,0,.08);
        }
        .pipeline-tabs a.tab-accepted.active  { color: #0a5132; }
        .pipeline-tabs a.tab-rejected.active  { color: #842029; }
        .pipeline-tabs a.tab-pending.active   { color: #856404; }
        .pipeline-tabs a.tab-countered.active { color: #055160; }

        /* ── Override modal ── */
        .deal-modal .modal-content  { border: none; border-radius: 16px; box-shadow: 0 20px 60px rgba(0,0,0,.18); }
        .deal-modal .modal-header   { border-radius: 16px 16px 0 0; padding: 20px 24px; border-bottom: none; }
        .deal-modal .modal-header.close-header { background: linear-gradient(135deg,#c62828,#b71c1c); }
        .deal-modal .modal-header.flag-header  { background: linear-gradient(135deg,#e65100,#bf360c); }
        .deal-modal .modal-title    { color: #fff; font-weight: 700; font-size: 16px; }
        .deal-modal .btn-close      { filter: invert(1); opacity: .8; }
        .deal-modal .modal-body     { padding: 24px; }
        .deal-modal .modal-footer   { padding: 14px 24px 22px; border-top: 1px solid #f0f0f0; }

        .deal-modal textarea {
            width: 100%;
            border: 1.5px solid #e5e7eb;
            border-radius: 10px;
            padding: 12px 14px;
            font-size: 13px;
            color: #111;
            resize: vertical;
            min-height: 90px;
            transition: border-color .2s;
            outline: none;
        }
        .deal-modal textarea:focus { border-color: #365CF5; box-shadow: 0 0 0 3px rgba(54,92,245,.1); }
        .deal-modal label { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .4px; color: #6b7280; margin-bottom: 6px; display: block; }

        /* ── Row flag highlight ── */
        tr.is-flagged td { background: rgba(230,81,0,.04); }

        /* ── Flag reason icon + popover ── */
        .flag-reason-btn {
            background: #fff3e0; color: #e65100;
            border: none; border-radius: 8px;
            width: 32px; height: 32px;
            display: inline-flex; align-items: center; justify-content: center;
            cursor: pointer; font-size: 13px;
            transition: background .15s, transform .15s;
        }
        .flag-reason-btn:hover { background: #ffe0b2; transform: scale(1.08); }
        .flag-reason-btn:focus { outline: none; box-shadow: 0 0 0 3px rgba(230,81,0,.18); }

        /* ── Crop cell chip ── */
        .crop-chip {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            background: #e8f0fe;
            color: #365CF5;
            padding: 3px 10px;
            border-radius: 20px;
            font-size: 12px;
            font-weight: 600;
        }

        /* ── Action btn pair ── */
        .deal-actions { display: flex; gap: 5px; justify-content: flex-end; }
        .btn-close-deal {
            background: #fdecea; color: #c62828;
            border: none; border-radius: 8px;
            padding: 5px 12px; font-size: 12px; font-weight: 600;
            display: inline-flex; align-items: center; gap: 4px;
            transition: background .15s, transform .15s;
        }
        .btn-close-deal:hover { background: #f8b4b4; transform: scale(1.04); }
        .btn-flag-deal {
            background: #fff3e0; color: #e65100;
            border: none; border-radius: 8px;
            padding: 5px 12px; font-size: 12px; font-weight: 600;
            display: inline-flex; align-items: center; gap: 4px;
            transition: background .15s, transform .15s;
        }
        .btn-flag-deal:hover { background: #ffe0b2; transform: scale(1.04); }
        .btn-unflag-deal {
            background: #e8f5e9; color: #2e7d32;
            border: none; border-radius: 8px;
            padding: 5px 12px; font-size: 12px; font-weight: 600;
            display: inline-flex; align-items: center; gap: 4px;
            transition: background .15s, transform .15s;
        }
        .btn-unflag-deal:hover { background: #c8e6c9; transform: scale(1.04); }
    </style>
@endsection

@section('content')
<aside class="sidebar-nav-wrapper">@include('admin.sidenav')</aside>
<div class="overlay"></div>

<main class="main-wrapper">
    @include('admin.header')

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

            {{-- Page title --}}
            <div class="title-wrapper pt-30">
                <div class="row align-items-center">
                    <div class="col-md-6">
                        <div class="title"><h2>Deal Pipeline</h2></div>
                       
                    </div>
                    <div class="col-md-6"></div>
                </div>
            </div>

            <div class="row">
                <div class="col-lg-12">
                    <div class="card-style mb-30">

                        {{-- Toolbar: tabs + search --}}
                        <div class="d-flex flex-wrap align-items-center justify-content-between gap-3 mb-24">

                            {{-- Status tabs --}}
                            <div class="pipeline-tabs">
                                @foreach(['' => 'All', 'pending' => 'Pending', 'countered' => 'Countered', 'accepted' => 'Accepted', 'rejected' => 'Rejected'] as $val => $label)
                                <a href="{{ request()->fullUrlWithQuery(['status' => $val, 'page' => 1]) }}"
                                   class="{{ request('status','') === $val ? 'active' : '' }} tab-{{ $val ?: 'all' }}">
                                    {{ $label }}
                                </a>
                                @endforeach
                            </div>

                            {{-- Search --}}
                            <form method="GET" class="admin-search-bar">
                                @if(request('status'))
                                    <input type="hidden" name="status" value="{{ request('status') }}">
                                @endif
                                <div class="input-group" style="width:240px;">
                                    <input type="text" class="form-control" name="search"
                                        placeholder="Search crop name…" value="{{ request('search') }}">
                                    <button type="submit"><i class="lni lni-search-alt"></i></button>
                                </div>
                            </form>

                        </div>

                        <div class="table-responsive">
                            <table class="table top-selling-table">
                                <thead>
                                    <tr>
                                        <th><h6 class="text-sm text-medium">#</h6></th>
                                        <th><h6 class="text-sm text-medium">Crop</h6></th>
                                        <th><h6 class="text-sm text-medium">Farmer</h6></th>
                                        <th><h6 class="text-sm text-medium">Vendor</h6></th>
                                        <th><h6 class="text-sm text-medium">Offered Price</h6></th>
                                        <th><h6 class="text-sm text-medium">Qty</h6></th>
                                        <th><h6 class="text-sm text-medium">Status</h6></th>
                                        <th><h6 class="text-sm text-medium">Flag</h6></th>
                                        <th><h6 class="text-sm text-medium">Date</h6></th>
                                        <th class="text-end"><h6 class="text-sm text-medium">Actions</h6></th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @forelse($interests as $index => $interest)
                                    <tr class="{{ $interest->is_flagged ? 'is-flagged' : '' }}">
                                        <td class="text-sm">{{ ($interests->firstItem() ?? 1) + $index }}</td>

                                        <td>
                                            <span class="crop-chip">
                                                <i class="lni lni-leaf"></i>
                                                {{ $interest->farmerCrop->crop->crop_name ?? 'N/A' }}
                                            </span>
                                        </td>

                                        <td>
                                            <p class="text-sm fw-500 mb-0">{{ $interest->farmer->name ?? '—' }}</p>
                                        </td>

                                        <td>
                                            <p class="text-sm mb-0">{{ $interest->vendor->vendor_name ?? '—' }}</p>
                                        </td>

                                        <td>
                                            <span class="text-sm fw-500">₹{{ number_format($interest->offered_price, 2) }}</span>
                                        </td>

                                        <td class="text-sm">{{ $interest->quantity ?? '—' }}</td>

                                        <td>
                                            @php
                                                $badgeMap = [
                                                    'pending'   => 'badge-pending',
                                                    'countered' => 'badge-countered',
                                                    'accepted'  => 'badge-accepted',
                                                    'rejected'  => 'badge-rejected',
                                                ];
                                                $bc = $badgeMap[$interest->status] ?? 'badge-pending';
                                            @endphp
                                            <span class="badge-status {{ $bc }}">{{ ucfirst($interest->status) }}</span>
                                        </td>

                                        <td>
                                            @if($interest->is_flagged)
                                                <button type="button" class="flag-reason-btn"
                                                    title="View flag reason"
                                                    data-bs-toggle="modal" data-bs-target="#flagReasonModal"
                                                    onclick="showFlagReason(this)"
                                                    data-reason="{{ $interest->admin_remark ?: 'No reason was provided when this deal was flagged.' }}"
                                                    data-crop="{{ $interest->farmerCrop->crop->crop_name ?? 'N/A' }}"
                                                    data-farmer="{{ $interest->farmer->name ?? '—' }}">
                                                    <i class="fas fa-flag"></i>
                                                </button>
                                            @else
                                                <span class="text-muted">—</span>
                                            @endif
                                        </td>

                                        <td class="text-sm text-gray">{{ $interest->created_at->format('d M Y') }}</td>

                                        <td>
                                            <div class="deal-actions">
                                                @if($interest->status !== 'rejected')
                                                <button class="btn-close-deal"
                                                    data-bs-toggle="modal" data-bs-target="#overrideModal"
                                                    onclick="setOverride({{ $interest->id }}, 'close')">
                                                    <i class="fas fa-times-circle"></i> Close
                                                </button>
                                                @endif

                                                @if($interest->is_flagged)
                                                <form action="{{ route('deals.override', $interest->id) }}" method="POST" class="d-inline"
                                                    data-confirm="Remove flag from this deal?" data-confirm-title="Unflag Deal"
                                                    data-confirm-ok="Unflag" data-confirm-class="btn-success">
                                                    @csrf @method('PATCH')
                                                    <input type="hidden" name="action" value="unflag">
                                                    <button type="submit" class="btn-unflag-deal">
                                                        <i class="fas fa-flag-checkered"></i> Unflag
                                                    </button>
                                                </form>
                                                @else
                                                <button class="btn-flag-deal"
                                                    data-bs-toggle="modal" data-bs-target="#overrideModal"
                                                    onclick="setOverride({{ $interest->id }}, 'flag')">
                                                    <i class="fas fa-flag"></i> Flag
                                                </button>
                                                @endif
                                            </div>
                                        </td>
                                    </tr>
                                    @empty
                                    <tr>
                                        <td colspan="10" class="text-center py-5 text-muted">
                                            <i class="fas fa-handshake" style="font-size:32px;opacity:.25;"></i>
                                            <p class="mt-2 mb-0">No deals found for this filter</p>
                                        </td>
                                    </tr>
                                    @endforelse
                                </tbody>
                            </table>
                        </div>

                        <div class="pt-10 d-flex justify-content-between align-items-center flex-wrap gap-2">
                            <p class="text-sm text-gray mb-0">
                                Showing {{ $interests->firstItem() ?? 0 }} – {{ $interests->lastItem() ?? 0 }}
                                of {{ $interests->total() }} entries
                            </p>
                            {{ $interests->appends(request()->query())->links('pagination::bootstrap-4') }}
                        </div>

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

        </div>
    </section>

    @include('admin.footer')
</main>

{{-- ═══════════════════════════════════════
     Override Modal (Close / Flag)
═══════════════════════════════════════ --}}
<div class="modal fade deal-modal" id="overrideModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" style="max-width:460px;">
        <form id="overrideForm" method="POST">
            @csrf @method('PATCH')
            <input type="hidden" name="action" id="overrideAction">
            <div class="modal-content">

                <div class="modal-header close-header" id="overrideModalHeader">
                    <div class="d-flex align-items-center gap-2">
                        <div id="overrideIcon" style="width:32px;height:32px;border-radius:8px;background:rgba(255,255,255,.2);display:flex;align-items:center;justify-content:center;">
                            <i class="fas fa-times-circle" style="color:#fff;font-size:16px;"></i>
                        </div>
                        <h5 class="modal-title mb-0" id="overrideModalTitle">Close Deal</h5>
                    </div>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>

                <div class="modal-body">
                    <p class="text-sm text-gray mb-16" id="overrideModalDesc">
                        This will close the deal and mark it as rejected. Add an optional remark for the audit log.
                    </p>
                    <label>Admin Remark <span class="text-muted fw-normal">(optional)</span></label>
                    <textarea name="remark" id="overrideRemark" placeholder="Enter reason or remark…"></textarea>
                </div>

                <div class="modal-footer justify-content-end gap-2">
                    <button type="button" class="btn-cancel-rate" data-bs-dismiss="modal" style="background:linear-gradient(135deg,#c62828,#111); padding: 7px 20px; border-radius: 10px; color:#fff; border: none;">Cancel</button>
                    <button type="submit" id="overrideSubmitBtn" class="btn-save-rate" style="background:linear-gradient(135deg,#c62828,#b71c1c); padding: 7px 20px; border-radius: 10px; color:#fff; border: none;">
                        <i class="fas fa-times-circle"></i> Close Deal
                    </button>
                </div>

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

{{-- ═══════════════════════════════════════
     Flag Reason Modal (read-only)
═══════════════════════════════════════ --}}
<div class="modal fade deal-modal" id="flagReasonModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" style="max-width:460px;">
        <div class="modal-content">

            <div class="modal-header flag-header">
                <div class="d-flex align-items-center gap-2">
                    <div style="width:32px;height:32px;border-radius:8px;background:rgba(255,255,255,.2);display:flex;align-items:center;justify-content:center;">
                        <i class="fas fa-flag" style="color:#fff;font-size:16px;"></i>
                    </div>
                    <h5 class="modal-title mb-0">Flag Reason</h5>
                </div>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>

            <div class="modal-body">
                <p class="text-sm text-gray mb-16" id="flagReasonMeta"></p>
                <label>Reason for flagging</label>
                <div id="flagReasonText"
                    style="border:1.5px solid #e5e7eb;border-radius:10px;padding:12px 14px;font-size:13px;color:#111;line-height:1.6;white-space:pre-wrap;word-break:break-word;background:#fafafa;">
                </div>
            </div>

            <div class="modal-footer justify-content-end">
                <button type="button" class="btn-cancel-rate" data-bs-dismiss="modal" style="background:linear-gradient(135deg,#e65100,#111); padding: 7px 20px; border-radius: 10px; color:#fff; border: none;">Close</button>
            </div>

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

@endsection

@section('script')
@include('admin.script')
<script>
function setOverride(id, action) {
    const base = "{{ url('dashboard/deals') }}/" + id + "/override";
    document.getElementById('overrideForm').action = base;
    document.getElementById('overrideAction').value = action;
    document.getElementById('overrideRemark').value = '';

    const header = document.getElementById('overrideModalHeader');
    const icon   = document.getElementById('overrideIcon').querySelector('i');
    const title  = document.getElementById('overrideModalTitle');
    const desc   = document.getElementById('overrideModalDesc');
    const submit = document.getElementById('overrideSubmitBtn');

    if (action === 'close') {
        header.className = 'modal-header close-header';
        icon.className   = 'fas fa-times-circle';
        title.textContent = 'Close Deal';
        desc.textContent  = 'This will close the deal and mark it as rejected. Add an optional remark for the audit log.';
        submit.innerHTML  = '<i class="fas fa-times-circle"></i> Close Deal';
        submit.style.background = 'linear-gradient(135deg,#c62828,#b71c1c)';
    } else {
        header.className = 'modal-header flag-header';
        icon.className   = 'fas fa-flag';
        title.textContent = 'Flag as Suspicious';
        desc.textContent  = 'This deal will be flagged for review. Add an optional remark explaining the concern.';
        submit.innerHTML  = '<i class="fas fa-flag"></i> Flag Deal';
        submit.style.background = 'linear-gradient(135deg,#e65100,#bf360c)';
    }
}

// Populate the Flag Reason modal from the clicked flag icon
function showFlagReason(btn) {
    const reason = btn.getAttribute('data-reason') || '';
    const crop   = btn.getAttribute('data-crop') || '';
    const farmer = btn.getAttribute('data-farmer') || '';

    document.getElementById('flagReasonText').textContent = reason;
    document.getElementById('flagReasonMeta').textContent =
        'Deal for ' + crop + ' — ' + farmer;
}
</script>
@endsection