@extends('dashboard.layouts.master')
@section('title', 'Promotion Detail | Admin Panel')

@push('after-styles')
<style>
    .badge           { display: inline-block; padding: 4px 10px; border-radius: 12px; font-size: 11px; font-weight: 700; }
    .badge-warning   { background: #fff3cd; color: #856404; }
    .badge-success   { background: #d4edda; color: #155724; }
    .badge-danger    { background: #f8d7da; color: #721c24; }
    .badge-info      { background: #cce5ff; color: #004085; }
    .badge-secondary { background: #e2e3e5; color: #383d41; }

    .detail-table td:first-child { font-weight: 600; width: 200px; color: #555; }
    .detail-table td             { padding: 10px 14px; vertical-align: middle; }
    .detail-table tr             { border-bottom: 1px solid #f0f0f0; }

    .status-strip {
        padding: 12px 18px; border-radius: 6px; margin-bottom: 18px;
        display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px;
    }
    .status-strip.pending  { background: #fff8e1; border: 1px solid #ffe082; }
    .status-strip.approved { background: #e8f5e9; border: 1px solid #a5d6a7; }
    .status-strip.rejected { background: #ffebee; border: 1px solid #ef9a9a; }
    .status-strip.hold     { background: #e3f2fd; border: 1px solid #90caf9; }

    .toggle-btn { min-width: 120px; }
</style>
@endpush

@section('content')
<div class="loader" id="loader"></div>
<div class="padding website-label">

    <div class="box">

        {{-- Header --}}
        <div class="box-header">
            <div class="box-header-left">
                <h3 class="d-block">Promotion Detail</h3>
                <small class="d-inline-block">
                    <a href="{{ route('adminHome') }}">{{ __('backend.dashboard') }}</a> /
                    <a href="{{ route('ads-promotion.index') }}">Promotion Queue</a> /
                    <span>{{ $businessName }}</span>
                </small>
            </div>
        </div>

        <div class="p-a">

            {{-- Status Strip --}}
            <div class="status-strip {{ $promotion->status }}">
                <div>
                    <strong>Current Status:</strong>
                    {!! \App\Models\Promotion::statusBadge($promotion->status) !!}
                    @if($promotion->reviewed_at)
                        <small class="text-muted ml-2">
                            Reviewed {{ \Carbon\Carbon::parse($promotion->reviewed_at)->format('Y-m-d H:i') }}
                            @if($promotion->reviewer) by {{ $promotion->reviewer->name }} @endif
                        </small>
                    @endif
                </div>

                {{-- Action Buttons --}}
                @if($canApprove && $promotion->status !== 'approved')
                <div class="btn-group">
                    @if($promotion->status !== 'approved')
                    <button class="btn btn-sm success" id="btnApprove">
                        <i class="fa fa-check"></i> Approve
                    </button>
                    @endif
                    @if($promotion->status !== 'rejected')
                    <button class="btn btn-sm danger" id="btnReject">
                        <i class="fa fa-times"></i> Reject
                    </button>
                    @endif
                    @if($promotion->status !== 'hold')
                    <button class="btn btn-sm btn-warning" id="btnHold">
                        <i class="fa fa-pause"></i> Hold
                    </button>
                    @endif
                </div>
                @endif
            </div>

            {{-- Detail Grid --}}
            <div class="row">
                <div class="col-md-7">
                    <div class="box m-b-0">
                        <div class="box-header dker"><h4 class="m-a-0" style="font-size:14px;">Promotion Information</h4></div>
                        <div class="p-a">
                            <table class="table detail-table m-a-0">
                                <tr><td>Business Owner</td><td><strong>{{ $businessName }}</strong></td></tr>
                                <tr><td>Promotion Type</td><td>{{ $promotion->promotionType->name ?? 'N/A' }}</td></tr>
                                <tr><td>Amount</td><td><strong>${{ number_format($promotion->amount, 2) }}</strong></td></tr>
                                <tr><td>Payment Mode</td><td>{{ ucfirst($promotion->payment_mode) }}</td></tr>
                                <tr><td>Payment Status</td><td>{!! \App\Models\Promotion::paymentStatusBadge($promotion->payment_status) !!}</td></tr>
                                <tr><td>Start Date</td><td>{{ $promotion->start_date ? $promotion->start_date->format('Y-m-d') : '—' }}</td></tr>
                                <tr><td>End Date</td><td>{{ $promotion->end_date ? $promotion->end_date->format('Y-m-d') : '—' }}</td></tr>
                                <tr><td>Active</td>
                                    <td>
                                        <span id="activeStatusBadge">
                                            @if($promotion->is_active)
                                                <span class="badge badge-success">Yes</span>
                                            @else
                                                <span class="badge badge-secondary">No</span>
                                            @endif
                                        </span>
                                        @if($canActivate)
                                        <button class="btn btn-xs toggle-btn {{ $promotion->is_active ? 'btn-default' : 'btn-primary' }} ml-2" id="btnToggleActive">
                                            {{ $promotion->is_active ? 'Deactivate' : 'Activate' }}
                                        </button>
                                        @endif
                                    </td>
                                </tr>
                                <tr><td>Requested On</td><td>{{ $promotion->created_at->format('Y-m-d H:i') }}</td></tr>
                            </table>
                        </div>
                    </div>
                </div>

                <div class="col-md-5">
                    <div class="box m-b-0">
                        <div class="box-header dker"><h4 class="m-a-0" style="font-size:14px;">Notes &amp; Remarks</h4></div>
                        <div class="p-a">
                            @if($promotion->notes)
                                <p class="m-b-sm"><strong>Admin Notes:</strong><br>{{ $promotion->notes }}</p>
                            @endif
                            @if($promotion->rejection_reason)
                                <div class="alert alert-danger m-b-0">
                                    <strong>Rejection Reason:</strong><br>{{ $promotion->rejection_reason }}
                                </div>
                            @endif
                            @if(!$promotion->notes && !$promotion->rejection_reason)
                                <p class="text-muted">No notes recorded.</p>
                            @endif
                        </div>
                    </div>

                    @if($canApprove && $promotion->payment_mode === 'offline' && $promotion->payment_status !== 'paid')
                    <div class="box m-b-0 m-t">
                        <div class="box-header dker"><h4 class="m-a-0" style="font-size:14px;">Offline Payment</h4></div>
                        <div class="p-a">
                            <p class="text-muted" style="font-size:13px;">Confirm that offline payment has been received before approving.</p>
                            <button class="btn btn-sm success" id="btnMarkPaid">
                                <i class="fa fa-money"></i> Mark Payment as Paid
                            </button>
                        </div>
                    </div>
                    @endif
                </div>
            </div>

        </div>

        {{-- Footer --}}
        <div class="box-footer">
            <a href="{{ route('ads-promotion.index') }}" class="btn btn-default">
                <i class="material-icons">&#xe5cd;</i> Back to Queue
            </a>
        </div>

    </div>
</div>

{{-- ── Modals ───────────────────────────────────────────────────────── --}}

{{-- Approve Modal --}}
@if($canApprove)
<div class="modal fade" id="approveModal" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">Approve Promotion</h4>
                <button type="button" class="close" data-dismiss="modal">&times;</button>
            </div>
            <div class="modal-body">
                <div class="alert alert-success">
                    Approving will set the status to <strong>Approved</strong> and <strong>activate</strong> the promotion immediately.
                </div>
                <div class="row">
                    <div class="col-md-6">
                        <div class="form-group">
                            <label class="form-control-label font-weight-bold">Start Date <span class="text-danger">*</span></label>
                            <input type="date" id="approveStartDate" class="form-control"
                                   value="{{ $promotion->start_date ? $promotion->start_date->format('Y-m-d') : now()->format('Y-m-d') }}">
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="form-group">
                            <label class="form-control-label font-weight-bold">End Date <span class="text-danger">*</span></label>
                            <input type="date" id="approveEndDate" class="form-control"
                                   value="{{ $promotion->end_date ? $promotion->end_date->format('Y-m-d') : now()->addDays(30)->format('Y-m-d') }}">
                        </div>
                    </div>
                </div>
                <div class="form-group">
                    <label class="form-control-label">Admin Notes (optional)</label>
                    <textarea id="approveNotes" class="form-control" rows="3" placeholder="Internal notes...">{{ $promotion->notes }}</textarea>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                <button type="button" class="btn success" id="confirmApproveBtn">
                    <i class="fa fa-check"></i> Yes, Approve
                </button>
            </div>
        </div>
    </div>
</div>

{{-- Reject Modal --}}
<div class="modal fade" id="rejectModal" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">Reject Promotion</h4>
                <button type="button" class="close" data-dismiss="modal">&times;</button>
            </div>
            <div class="modal-body">
                <div class="form-group">
                    <label class="form-control-label font-weight-bold">Rejection Reason <span class="text-danger">*</span></label>
                    <textarea id="rejectReason" class="form-control" rows="4"
                        placeholder="Enter rejection reason (will be recorded for audit)..."></textarea>
                    <small class="text-danger d-none" id="rejectReasonError">Rejection reason is required.</small>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                <button type="button" class="btn danger" id="confirmRejectBtn">
                    <i class="fa fa-times"></i> Confirm Rejection
                </button>
            </div>
        </div>
    </div>
</div>

{{-- Hold Modal --}}
<div class="modal fade" id="holdModal" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">Put Promotion on Hold</h4>
                <button type="button" class="close" data-dismiss="modal">&times;</button>
            </div>
            <div class="modal-body">
                <div class="alert alert-info">Promotion will be paused pending further review.</div>
                <div class="form-group">
                    <label class="form-control-label">Notes (optional)</label>
                    <textarea id="holdNotes" class="form-control" rows="3"
                        placeholder="Reason for hold..."></textarea>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-warning" id="confirmHoldBtn">
                    <i class="fa fa-pause"></i> Confirm Hold
                </button>
            </div>
        </div>
    </div>
</div>
@endif

@endsection

@push('after-scripts')
<script>
$(document).ready(function () {
    $.ajaxSetup({ headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') } });

    var encodedId = '{{ $id }}';

    function loader(show) { $('.loader').css('visibility', show ? 'visible' : 'hidden'); }

    function showAlert(cls, msg) {
        $('body').prepend('<div class="alert ' + cls + ' alert-dismissible" style="position:fixed;top:70px;right:20px;z-index:9999;min-width:300px;">'
            + '<button type="button" class="close" data-dismiss="alert">&times;</button>' + msg + '</div>');
        setTimeout(function () { $('.alert-dismissible').fadeOut(); }, 4000);
    }

    function ajaxPost(url, data, onSuccess) {
        loader(true);
        $.post(url, data, function (res) {
            loader(false);
            if (res.success) {
                showAlert('alert-success', res.msg);
                onSuccess(res);
            } else {
                showAlert('alert-danger', res.msg || 'Something went wrong.');
            }
        }).fail(function () {
            loader(false);
            showAlert('alert-danger', 'Request failed.');
        });
    }

    // ── Approve ──────────────────────────────────────────────────────
    $('#btnApprove').on('click', function () { $('#approveModal').modal('show'); });

    $('#confirmApproveBtn').on('click', function () {
        ajaxPost("{{ route('ads-promotion.approve', $id) }}", {
            start_date: $('#approveStartDate').val(),
            end_date:   $('#approveEndDate').val(),
            notes:      $('#approveNotes').val(),
        }, function () {
            $('#approveModal').modal('hide');
            setTimeout(function () { location.reload(); }, 1000);
        });
    });

    // ── Reject ───────────────────────────────────────────────────────
    $('#btnReject').on('click', function () {
        $('#rejectReason').val('');
        $('#rejectReasonError').addClass('d-none');
        $('#rejectModal').modal('show');
    });

    $('#confirmRejectBtn').on('click', function () {
        var reason = $('#rejectReason').val().trim();
        if (!reason) { $('#rejectReasonError').removeClass('d-none'); return; }
        ajaxPost("{{ route('ads-promotion.reject', $id) }}", { rejection_reason: reason }, function () {
            $('#rejectModal').modal('hide');
            setTimeout(function () { location.reload(); }, 1000);
        });
    });

    // ── Hold ─────────────────────────────────────────────────────────
    $('#btnHold').on('click', function () { $('#holdModal').modal('show'); });

    $('#confirmHoldBtn').on('click', function () {
        ajaxPost("{{ route('ads-promotion.hold', $id) }}", { notes: $('#holdNotes').val() }, function () {
            $('#holdModal').modal('hide');
            setTimeout(function () { location.reload(); }, 1000);
        });
    });

    // ── Toggle Activate ──────────────────────────────────────────────
    $('#btnToggleActive').on('click', function () {
        ajaxPost("{{ route('ads-promotion.activate', $id) }}", {}, function (res) {
            if (res.is_active) {
                $('#activeStatusBadge').html('<span class="badge badge-success">Yes</span>');
                $('#btnToggleActive').removeClass('btn-primary').addClass('btn-default').text('Deactivate');
            } else {
                $('#activeStatusBadge').html('<span class="badge badge-secondary">No</span>');
                $('#btnToggleActive').removeClass('btn-default').addClass('btn-primary').text('Activate');
            }
        });
    });

    // ── Mark Paid ────────────────────────────────────────────────────
    $('#btnMarkPaid').on('click', function () {
        if (!confirm('Confirm that offline payment has been received?')) return;
        ajaxPost("{{ route('ads-promotion.mark-paid', $id) }}", {}, function () {
            $('#btnMarkPaid').closest('.box').fadeOut();
        });
    });
});
</script>
@endpush