@extends('layouts.UserDashboard')
@section('user')
    <style>
        .form-control:focus {
            border-color: #86b7fe;
            box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
        }

        @media (max-width: 768px) {
            .col-md-8 {
                width: 100%;
                max-width: 100%;
            }
        }
    </style>

    <!-- start page title -->
    <div class="row mb-4">
        <div class="col-12">
            <div class="page-title-box d-sm-flex align-items-center justify-content-between">
                <h4 class="mb-sm-0 font-size-18">Request Buy Coin</h4>
                <div class="page-title-right">
                    <a href="{{ route('user.dashboard') }}" class="btn btn-secondary btn-sm">
                        ← Back
                    </a>
                </div>
            </div>
        </div>
    </div>
    <!-- end page title -->

    <!-- User Balance Info -->
    <div class="row mb-4">
        <div class="col-md-8 mx-auto">
            <div class="card">
                <div class="card-body text-center">
                    <h5 class="card-title">Your Current Balance</h5>
                    <h2 class="text-primary">{{ number_format(auth()->user()->seller_coin ?? 0, 2) }} Coins</h2>
                    <small class="text-muted">Available coins to send</small>
                </div>
            </div>
        </div>
    </div>

    <div class="row mb-3">
        <div class="col-md-8 mx-auto">
            <form action="{{ route('user.coins.purchase.request') }}" method="POST">
                @csrf
                <div class="card">
                    <div class="card-body">
                        @if (auth()->user()->hasRole('superadmin'))
                            <input type="hidden" name="request_target" value="master">
                        @endif
                        @if (!auth()->user()->hasRole('superadmin'))
                            <div class="mb-3">
                                <label class="form-label">Send Request To</label>
                                <select name="request_target" id="request_target" class="form-select" required>
                                    <option value="master">Master Admin</option>
                                    @if (auth()->user()->hasRole('directseller') || auth()->user()->hasRole('coinseller'))
                                        <option value="superadmin">Super Admin</option>
                                    @endif
                                    @if (auth()->user()->hasRole('coinseller'))
                                        <option value="directseller">Direct Seller</option>
                                    @endif
                                </select>
                            </div>

                            <div class="mb-3 target-wrapper" id="superadmin_list_wrapper" style="display: none;">
                                <label class="form-label">Select Superadmin</label>
                                <select name="superadmin_id" class="form-select target-id-input">
                                    <option value="">-- Choose Superadmin --</option>
                                    @foreach ($superadmins as $admin)
                                        <option value="{{ $admin->id }}">{{ $admin->name }} (#{{ $admin->user_id }})
                                        </option>
                                    @endforeach
                                </select>
                            </div>

                            <div class="mb-3 target-wrapper" id="directseller_list_wrapper" style="display: none;">
                                <label class="form-label">Select Direct Seller</label>
                                <select name="directseller_id" class="form-select target-id-input">
                                    <option value="">-- Choose Direct Seller --</option>
                                    @foreach ($directsellers as $seller)
                                        <option value="{{ $seller->id }}">{{ $seller->name }} (#{{ $seller->user_id }})
                                        </option>
                                    @endforeach
                                </select>
                            </div>
                            <input type="hidden" name="requested_to_id" id="final_requested_to_id">
                        @endif
                        <div class="mb-3">
                            <label class="form-label">Number of Coins</label>
                            <input type="number" name="requested_coin" class="form-control" placeholder="Enter amount"
                                required min="1">
                        </div>

                        <div class="alert alert-info">
                            This request will be sent to the selected authority for approval.
                        </div>

                        <div class="text-end">
                            <button type="submit" class="btn btn-success">Send Request</button>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>

    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-header">
                    <h5 class="card-title mb-0">Coin Purchase Request History</h5>
                </div>
                <div class="card-body">
                    <div class="table-responsive">
                        <table class="table table-striped table-hover">
                            <thead class="table-dark">
                                <tr>
                                    <th>Date & Time</th>
                                    <th>Amount</th>
                                    <th>Status</th>
                                    <th>Note/Reason</th>
                                </tr>
                            </thead>
                            <tbody>
                                @forelse($coin_requests as $request)
                                    <tr>
                                        <td>{{ $request->created_at->format('M d, Y h:i A') }}</td>
                                        <td>
                                            <span class="text-primary fw-bold">
                                                {{ number_format($request->requested_coin) }} Coins
                                            </span>
                                        </td>
                                        <td>
                                            @if ($request->status == 'pending')
                                                <span class="badge bg-warning text-dark">Pending</span>
                                            @elseif($request->status == 'approved')
                                                <span class="badge bg-success">Approved</span>
                                            @else
                                                <span class="badge bg-danger">Rejected</span>
                                            @endif
                                        </td>
                                        <td>
                                            <small class="text-muted">{{ $request->note ?? '---' }}</small>
                                        </td>
                                    </tr>
                                @empty
                                    <tr>
                                        <td colspan="4" class="text-center text-muted py-4">
                                            No purchase history found.
                                        </td>
                                    </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>

                    <div class="mt-3">
                        {{ $coin_requests->links() }}
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection
@section('js')
    <script>
        $(document).ready(function() {
            const $targetSelect = $('#request_target');
            const $superWrapper = $('#superadmin_list_wrapper');
            const $directWrapper = $('#directseller_list_wrapper');
            const $hiddenId = $('#final_requested_to_id');

            function handleTargetChange(value) {
                // Reset wrappers and requirements
                $('.target-wrapper').hide();
                $('.target-id-input').prop('required', false).val('');
                $hiddenId.val('');

                if (value === 'superadmin') {
                    $superWrapper.fadeIn();
                    $superWrapper.find('select').prop('required', true);
                } else if (value === 'directseller') { // Fixed: was elseif
                    $directWrapper.fadeIn();
                    $directWrapper.find('select').prop('required', true);
                }
            }

            // Sync hidden ID whenever a specific admin/seller is picked
            $(document).on('change', '.target-id-input', function() {
                $hiddenId.val($(this).val());
            });

            // Trigger on change
            $targetSelect.on('change', function() {
                handleTargetChange($(this).val());
            });

            // Run on page load (for validation redirects)
            handleTargetChange($targetSelect.val());
        });
    </script>
@endsection