@extends('admin.layouts.app')

@section('title', 'Redeem Requests')

@section('content')
    <div class="card mb-2">
        <div class="card-body py-2">
            <div class="row d-flex justify-content-between align-items-center">
                <div class="col-lg-6 d-flex" style="gap:6px;">
                    <h4>Redeem Requests</h4>
                </div>
                <div class="col-lg-6 d-flex justify-content-end" style="gap:6px;">

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

    <div class="card">
        <div class="card-body">
            @include('admin.redeem_requests.filters')

            <div class="border">
                <table class="table table-striped ">
                    <thead>
                        <tr>
                            <th scope="col">#</th>
                            <th scope="col" style="width: 80px;">Image</th>
                            <th scope="col">Name</th>
                            <th scope="col">Requested By</th>
                            <th scope="col" class="text-center">Request Date</th>
                            <th scope="col" class="text-center">Status</th>
                            <th scope="col" class="text-center">Updated By / At</th>
                            <th scope="col" class="text-center">Action</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse ($redeemRequests as $redeemRequest)
                            <tr>
                                <td class="align-middle">
                                    {{ $loop->iteration + ($redeemRequests->firstItem() - 1) }}
                                </td>
                                <td>
                                    <img src="{{ asset($redeemRequest?->gift->image) }}" class="rounded"
                                        width="70px">
                                </td>
                                <td class="align-middle">
                                    <p class="mb-2">
                                        {{ \Illuminate\Support\Str::words($redeemRequest?->gift->name, 6, ' ...') }}</p>
                                    <span>
                                        <span class="badge badge-info">{{ $redeemRequest->bonus_points }}</span> Points
                                    </span>
                                </td>
                                <td class="align-middle">
                                    <a href="{{ route('users.show', $redeemRequest?->user->id) }}" target="_blank">
                                        {{ $redeemRequest?->user->name }}
                                        <br>
                                        {{ $redeemRequest?->user->email }}
                                        <br>
                                        {{ $redeemRequest?->user->mobile }}
                                    </a>
                                </td>
                                <td class="text-center align-middle">
                                    {{ $redeemRequest->created_at->format('d-M-y h:i A') }}
                                </td>
                                <td class="text-capitalize align-middle text-center">
                                    <span
                                        class="badge
                                            {{ $redeemRequest->status == 'completed'
                                                ? 'badge-success'
                                                : ($redeemRequest->status == 'canceled'
                                                    ? 'badge-danger'
                                                    : 'badge-warning') }}">
                                        {{ str_replace('_', ' ', $redeemRequest->status) }}
                                    </span>
                                </td>
                                <td class="align-middle text-center">
                                    {{ $redeemRequest?->updatedBy->name ?? 'N/A' }}
                                    @if ($redeemRequest->updated_by)
                                        <br>
                                        {{ $redeemRequest->updated_at->format('d-M-y h:i A') }}
                                    @endif
                                </td>
                                <td class="align-middle text-center">
                                    @if (in_array($redeemRequest->status, ['pending', 'in_progress']))
                                        @can('redeem_request.edit')
                                            <button type="button" class="update-status btn btn-sm btn-primary px-2"
                                                data-toggle="modal" data-target="#updateStatusModal"
                                                data-status="{{ $redeemRequest->status }}" data-id="{{ $redeemRequest->id }}">
                                                <i class="mdi mdi-check"></i> Update Status
                                            </button>
                                        @endcan
                                    @elseif ($redeemRequest->status == 'canceled')
                                        <button type="button" class="canceled-reason btn btn-sm btn-info px-2"
                                            data-toggle="modal" data-target="#reasonModal"
                                            data-reason="{{ $redeemRequest->cancel_reason }}" data-refund="{{$redeemRequest->refund}}">
                                            <i class="mdi mdi-check"></i> Canceled Reason
                                        </button>
                                    @else
                                        -
                                    @endif
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td class="text-center" colspan="8">No record found.</td>
                            </tr>
                        @endforelse
                    <tbody>
                </table>
            </div>
            <x-pagination-summary :items="$redeemRequests" />
        </div>
    </div>

    @include('admin.redeem_requests.modals')

@endsection

@section('scripts')
    @if (session('modal_id'))
        <script>
            $(document).ready(function() {
                let modal = $('#updateStatusModal');
                modal.find('input[name="id"]').val('{{ session('modal_id') }}');
                modal.find('select[name="status"]').val('{{ session('modal_status') }}');
                modal.modal('show');

                if ('{{ session('modal_status') }}' == 'canceled') {
                    $('#canceledDiv').show();
                }
            });
        </script>
    @endif

    <script>
        $(document).ready(function() {
            $('.update-status').on('click', function() {
                let status = $(this).data('status');
                let id = $(this).data('id');
                let modal = $('#updateStatusModal');

                // Manually reset all fields
                modal.find('input[name="id"]').val('');
                modal.find('select[name="status"]').val('');
                modal.find('textarea[name="cancel_reason"]').val('');
                // modal.find('input[name="refund"]').prop('checked', false);
                modal.find('#cancelReason').text('');
                $('#canceledDiv').hide();

                // Set selected value in modal select
                modal.find('select[name="status"]').val(status);
                modal.find('input[name="id"]').val(id);
            });

            $('#modalStatus').on('change', function() {
                let status = $(this).val();
                if (status == 'canceled') {
                    $('#canceledDiv').show();
                } else {
                    $('#canceledDiv').hide();
                }
            });

            $('.canceled-reason').on('click', function() {
                let reason = $(this).data('reason');
                let refund = $(this).data('refund');
                let modal = $('#reasonModal');

                // Set selected value in modal select
                modal.find('#reason').text(reason);
                if (refund == 1) {
                    modal.find('#bonusRefund').show();
                    modal.find('#bonusHold').hide();
                } else {
                    modal.find('#bonusHold').show();
                    modal.find('#bonusRefund').hide();
                }
            });
        });
    </script>
@endsection