@extends('backend.manager.layouts.manager-app')

@section('title', 'Submit Ledger Entry')

@push('style')
    <style>
        .ledger-form-card {
            max-width: 640px;
            margin: 0 auto;
            border: 1px solid #e8edf6;
            border-radius: 1rem;
            box-shadow: 0 12px 32px rgba(20, 28, 55, 0.07);
        }

        .ledger-form-card .card-header {
            background: linear-gradient(135deg, #0c1f3f, #304b92);
            color: #fff;
            border-radius: 1rem 1rem 0 0;
            padding: 1.25rem 1.5rem;
        }

        .ledger-form-card .card-header h5 {
            margin: 0;
            font-weight: 700;
            font-size: 1rem;
        }

        .ledger-form-card .card-header p {
            margin: 0.25rem 0 0;
            font-size: 0.8rem;
            opacity: 0.75;
        }

        .pending-notice {
            background: #fff8e6;
            border: 1px solid #ffe8a3;
            border-radius: 0.6rem;
            padding: 0.75rem 1rem;
            font-size: 0.82rem;
            color: #92670c;
            display: flex;
            align-items: center;
            gap: 0.5rem;
            margin-bottom: 1.25rem;
        }

        .raffle-summary {
            background: #f8faff;
            border: 1px solid #e8edf6;
            border-radius: 0.75rem;
            padding: 1rem 1.25rem;
            margin-bottom: 1.25rem;
        }

        .raffle-summary .stat-label {
            font-size: 0.75rem;
            color: #6c757d;
            text-transform: uppercase;
            letter-spacing: 0.03em;
            margin-bottom: 0.15rem;
        }

        .raffle-summary .stat-value {
            font-size: 1rem;
            font-weight: 700;
            color: #0c1f3f;
        }

        .fee-card {
            background: #f0f4fe;
            border: 1px solid #d6e2f8;
            border-radius: 0.75rem;
            padding: 1rem 1.25rem;
        }

        .fee-row {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0.35rem 0;
        }

        .fee-row + .fee-row {
            border-top: 1px dashed #d6e2f8;
        }

        .fee-row .label {
            font-size: 0.85rem;
            color: #2a3b6b;
        }

        .fee-row .label small {
            color: #7a8ab0;
        }

        .fee-row .value {
            font-weight: 700;
            color: #0c1f3f;
        }

        .fee-row.total .label,
        .fee-row.total .value {
            font-size: 1rem;
            color: #0c1f3f;
        }

        .fee-row .value.text-muted {
            color: #adb5bd;
        }

        #fee-loader {
            display: none;
            color: #6c757d;
            font-size: 0.8rem;
        }

        #fee-loader.show {
            display: inline-flex;
            align-items: center;
            gap: 0.35rem;
        }

        .spinner {
            display: inline-block;
            width: 0.8rem;
            height: 0.8rem;
            border: 2px solid #d6e2f8;
            border-top-color: #0c1f3f;
            border-radius: 50%;
            animation: spin 0.6s linear infinite;
        }

        @keyframes spin {
            to { transform: rotate(360deg); }
        }

        .select2-container {
            width: 100% !important;
        }

        .select2-container--bootstrap-5 .select2-selection {
            min-height: 38px !important;
            border: 1px solid #ced4da !important;
            border-radius: 0.375rem !important;
            padding: 0.375rem 0.75rem !important;
            display: flex !important;
            align-items: center !important;
        }

        .select2-container--bootstrap-5 .select2-selection__rendered {
            padding-left: 0 !important;
            line-height: normal !important;
            color: #212529;
        }

        .select2-container--bootstrap-5 .select2-selection__placeholder {
            color: #6c757d;
        }

        .select2-container--bootstrap-5 .select2-selection__arrow {
            height: 100% !important;
        }

        .select2-container--bootstrap-5.select2-container--focus .select2-selection,
        .select2-container--bootstrap-5.select2-container--open .select2-selection {
            border-color: #86b7fe !important;
            box-shadow: 0 0 0 .25rem rgba(13,110,253,.25) !important;
        }

        .select2-container--bootstrap-5 .select2-dropdown {
            border: 1px solid #ced4da;
            border-radius: 0.375rem;
            overflow: hidden;
            box-shadow: 0 0.5rem 1rem rgba(0,0,0,.15);
        }

        .select2-container--bootstrap-5 .select2-search__field {
            border: 1px solid #ced4da !important;
            border-radius: 0.375rem !important;
            padding: 0.375rem 0.75rem !important;
        }

        .select2-container--bootstrap-5 .select2-results__option--highlighted {
            background-color: #0d6efd !important;
            color: white !important;
        }
    </style>
@endpush

@section('content')
    <div class="page-header">
        <div>
            <h1 class="page-title">Submit Ledger Entry</h1>
        </div>
        <div class="ms-auto pageheader-btn">
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="{{ route('store-manager.dashboard') }}">Dashboard</a></li>
                <li class="breadcrumb-item"><a href="{{ route('store-manager.ledger.index') }}">Ledger</a></li>
                <li class="breadcrumb-item active" aria-current="page">Add Entry</li>
            </ol>
        </div>
    </div>

    <div class="row justify-content-center">
        <div class="col-12">
            <div class="card ledger-form-card">
                <div class="card-header">
                    <h5>New Ledger Entry</h5>
                    <p>{{ $store->name }}</p>
                </div>
                <div class="p-4 card-body">

                    <div class="raffle-summary">
                        <div class="row g-3">
                            <div class="col-md-6">
                                <div class="stat-label">Property</div>
                                <div class="stat-value">{{ $raffle->property?->title ?? '—' }}</div>
                            </div>
                            <div class="col-4 col-md-2">
                                <div class="stat-label">Price</div>
                                <div class="stat-value">Rp {{ number_format($raffle->ticket_price, 0) }}</div>
                            </div>
                            <div class="col-4 col-md-2">
                                <div class="stat-label">Available</div>
                                <div class="stat-value">{{ $raffle->tickets_available }}</div>
                            </div>
                            {{-- <div class="col-4 col-md-2">
                                <div class="stat-label">Max/User</div>
                                <div class="stat-value">{{ $raffle->max_tickets_per_user }}</div>
                            </div> --}}
                        </div>
                    </div>

                    <div class="pending-notice">
                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                            <path stroke-linecap="round" stroke-linejoin="round" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/>
                        </svg>
                        This entry will be submitted as <strong>Pending</strong> and the admin will be notified to review it.
                    </div>

                    @if($errors->any())
                        <div class="alert alert-danger">
                            <ul class="mb-0">
                                @foreach($errors->all() as $error)
                                    <li>{{ $error }}</li>
                                @endforeach
                            </ul>
                        </div>
                    @endif

                    <form method="POST" action="{{ route('store-manager.ledger.store') }}">
                        @csrf
                        <input type="hidden" name="raffle_id" value="{{ $raffle->id }}">

                        <div class="row g-3">
                            <div class="col-12">
                                <label class="form-label fw-semibold" for="user_id">User <span class="text-danger">*</span></label>
                                <select class="form-control select2-ajax @error('user_id') is-invalid @enderror"
                                        id="user_id" name="user_id"
                                        style="width: 100%;" required>
                                </select>
                                @error('user_id')
                                    <div class="invalid-feedback d-block">{{ $message }}</div>
                                @enderror
                            </div>

                            <div class="col-12">
                                <label class="form-label fw-semibold" for="quantity">
                                    Number of Tickets <span class="text-danger">*</span>
                                </label>
                                <input type="number" id="quantity" name="quantity"
                                       class="form-control @error('quantity') is-invalid @enderror"
                                       value="{{ old('quantity') }}"
                                       min="1" max="{{ $raffle->tickets_available }}"
                                       placeholder="e.g. 1" required>
                                @error('quantity')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>

                            <div class="col-12">
                                <div class="fee-card">
                                    <div class="mb-2 d-flex justify-content-between align-items-center">
                                        <span class="fw-semibold" style="color:#0c1f3f;">Fee Breakdown</span>
                                        <span id="fee-loader">
                                            <span class="spinner"></span> Calculating…
                                        </span>
                                    </div>
                                    <div class="fee-row total">
                                        <span class="label">Total Amount</span>
                                        <span class="value" id="disp-total">—</span>
                                    </div>
                                    <div class="fee-row">
                                        <span class="label">Platform Fee <small>( {{ 100 - config('app.store_comission') }}  %)</small></span>
                                        <span class="value" id="disp-platform">—</span>
                                    </div>
                                    <div class="fee-row">
                                        <span class="label">Store Fee <small>( {{ config('app.store_comission') }} %)</small></span>
                                        <span class="value" id="disp-store">—</span>
                                    </div>
                                </div>
                            </div>

                            <div class="col-12">
                                <label class="form-label fw-semibold" for="note">Note <span class="text-muted">(optional)</span></label>
                                <textarea class="form-control @error('note') is-invalid @enderror"
                                          id="note" name="note" rows="3"
                                          placeholder="Any additional context for the admin…">{{ old('note') }}</textarea>
                                @error('note')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>

                            <div class="gap-2 pt-1 col-12 d-flex">
                                <button type="submit" class="px-4 btn btn-primary" id="submit-btn">
                                    <i class="fe fe-send me-1"></i> Submit Entry
                                </button>
                                <a href="{{ route('store-manager.ledger.index') }}" class="px-4 btn btn-light">Cancel</a>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
    <script>
        function formatNumber(n) {
            return Number(n).toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 });
        }

        $(document).ready(function() {
            $('#user_id').select2({
                placeholder: 'Select a user',
                ajax: {
                    url: '{{ route('store-manager.users.search') }}',
                    dataType: 'json',
                    delay: 250,
                    data: function(params) {
                        return { q: params.term, page: params.page || 1 };
                    },
                    processResults: function(data, params) {
                        params.page = params.page || 1;
                        return {
                            results: data.data.map(function(user) {
                                return { id: user.id, text: user.name + ' (' + user.email + ')' };
                            }),
                            pagination: { more: data.current_page < data.last_page }
                        };
                    },
                    cache: true
                }
            });

            var debounceTimer;
            var $quantity = $('#quantity');
            var $loader = $('#fee-loader');
            var $dispTotal = $('#disp-total');
            var $dispPlatform = $('#disp-platform');
            var $dispStore = $('#disp-store');
            var $submitBtn = $('#submit-btn');
            var raffleId = $('input[name="raffle_id"]').val();

            $quantity.on('input change', function() {
                clearTimeout(debounceTimer);
                var qty = parseInt($(this).val(), 10);

                if (!qty || qty < 1) {
                    $dispTotal.text('—');
                    $dispPlatform.text('—');
                    $dispStore.text('—');
                    return;
                }

                debounceTimer = setTimeout(function() {
                    $loader.addClass('show');
                    $submitBtn.prop('disabled', true);

                    $.getJSON('{{ route('store-manager.ledger.calculate-fees') }}', {
                        raffle_id: raffleId,
                        quantity: qty
                    })
                    .done(function(res) {
                        $dispTotal.text('Rp ' + formatNumber(res.total_amount));
                        $dispPlatform.text('Rp ' + formatNumber(res.platform_fee));
                        $dispStore.text('Rp ' + formatNumber(res.store_fee));
                    })
                    .fail(function(xhr) {
                        var msg = 'Calculation failed.';
                        if (xhr.responseJSON && xhr.responseJSON.errors) {
                            var errs = Object.values(xhr.responseJSON.errors).flat();
                            msg = errs.join(', ');
                        }
                        $dispTotal.text('Error');
                        $dispPlatform.text('Error');
                        $dispStore.text('Error');
                        console.error('Fee calculation error:', xhr.responseJSON || xhr);
                    })
                    .always(function() {
                        $loader.removeClass('show');
                        $submitBtn.prop('disabled', false);
                    });
                }, 350);
            });
        });
    </script>
@endpush