{{-- resources/views/withdrawals/create.blade.php --}}
@extends('layouts.main')

@section('title', 'Withdrawal Management - Create Withdrawal')

@section('content')
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/css/bootstrap-datepicker.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/css/select2.min.css">

<style>
    .error-text {
        color: red;
        font-size: 13px;
    }
    .btn-loading {
        position: relative;
        pointer-events: none;
        opacity: 0.8;
    }
    .required-field::after {
        content: " *";
        color: red;
    }
    .amount-preview {
        background: #f8f9fa;
        padding: 10px;
        border-radius: 5px;
        margin-top: 10px;
        border-left: 3px solid #dc3545;
    }
    .balance-info {
        background: #e7f3ff;
        padding: 8px 12px;
        border-radius: 4px;
        margin-top: 5px;
        font-size: 14px;
    }
</style>

<div class="main-content app-content">
    <div class="container-fluid">
        <div class="d-md-flex d-block align-items-center justify-content-between page-header-breadcrumb">
            <h1 class="page-title mb-0 text-primary">Create Withdrawal</h1>
            <div class="ms-auto">
                <a href="{{ route('withdrawals.index') }}" class="btn btn-secondary">
                    <i class="fas fa-arrow-left"></i> Back to List
                </a>
            </div>
        </div>

        <div class="row">
            <div class="col-12">
                <div class="card">
                    <div class="card-header">
                        <h3 class="card-title">Withdrawal Information</h3>
                    </div>
                    <div class="card-body">
                        <form id="withdrawalForm" action="{{ route('withdrawals.store') }}" method="POST">
                            @csrf
                            <div class="row">
                                <div class="col-md-6 mb-3">
                                    <label for="partner_id" class="form-label required-field">Partner</label>
                                    <select class="form-select @error('partner_id') is-invalid @enderror" 
                                            id="partner_id" name="partner_id" required>
                                        <option value="">Select Partner</option>
                                        @foreach($partners as $partner)
                                            <option value="{{ $partner->id }}" 
                                                    data-available-balance="{{ $partner->available_balance ?? 0 }}"
                                                    {{ old('partner_id') == $partner->id ? 'selected' : '' }}>
                                                {{ $partner->full_name }}
                                            </option>
                                        @endforeach
                                    </select>
                                    @error('partner_id')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                   
                                </div>

                                <div class="col-md-6 mb-3">
                                    <label for="withdrawal_date" class="form-label required-field">Withdrawal Date</label>
                                    <input type="date" class="form-control @error('withdrawal_date') is-invalid @enderror" 
                                        id="withdrawal_date" name="withdrawal_date" value="{{ old('withdrawal_date', date('Y-m-d')) }}" 
                                        required>
                                    @error('withdrawal_date')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>

                                <div class="col-md-6 mb-3">
                                    <label for="amount" class="form-label required-field">Amount</label>
                                    <input type="number" step="0.01" class="form-control @error('amount') is-invalid @enderror" 
                                        id="amount" name="amount" value="{{ old('amount') }}" 
                                        placeholder="0.00" required>
                                    @error('amount')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                    <!-- <small class="text-muted">Enter the withdrawal amount</small> -->
                                </div>

                                <div class="col-md-6 mb-3">
                                    <label for="payment_method" class="form-label required-field">Payment Method</label>
                                    <select class="form-select @error('payment_method') is-invalid @enderror" 
                                            id="payment_method" name="payment_method" required>
                                        <option value="">Select Payment Method</option>
                                        <option value="Cash" {{ old('payment_method') == 'Cash' ? 'selected' : '' }}>Cash</option>
                                        <option value="Bank Transfer" {{ old('payment_method') == 'Bank Transfer' ? 'selected' : '' }}>Bank Transfer</option>
                                        <option value="Cheque" {{ old('payment_method') == 'Cheque' ? 'selected' : '' }}>Cheque</option>
                                    </select>
                                    @error('payment_method')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>

                                <div class="col-md-12 mb-3" id="reference_field">
                                    <label for="reference_number" class="form-label">Reference Number</label>
                                    <input type="text" class="form-control @error('reference_number') is-invalid @enderror" 
                                        id="reference_number" name="reference_number" value="{{ old('reference_number') }}" 
                                        placeholder="e.g., Cheque No., Transaction ID, Receipt No.">
                                    @error('reference_number')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                    <!-- <small class="text-muted">Required for Bank Transfer, Cheque, and Online Payment</small> -->
                                </div>

                                <div class="col-12 mb-3">
                                    <label for="notes" class="form-label">Notes</label>
                                    <textarea class="form-control @error('notes') is-invalid @enderror" 
                                            id="notes" name="notes" rows="3" 
                                            placeholder="Additional notes about this withdrawal">{{ old('notes') }}</textarea>
                                    @error('notes')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>

                                <!-- Preview Section -->
                                <!-- <div class="col-12 mb-3" id="previewSection" style="display: none;">
                                    <div class="amount-preview">
                                        <strong>Withdrawal Summary:</strong><br>
                                        Partner: <span id="previewPartnerName"></span><br>
                                        Amount: <span id="previewAmount"></span><br>
                                        Payment Method: <span id="previewMethod"></span><br>
                                        Date: <span id="previewDate"></span>
                                    </div>
                                </div> -->
                            </div>

                            <div class="col-md-12 mt-4 text-end">
                                <button type="reset" class="btn btn-secondary me-2">Reset</button>
                                <button type="submit" class="btn btn-primary" id="submitBtn">Create Withdrawal</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/js/select2.min.js"></script>

<script>
    $(document).ready(function() {
        $('.select2').select2({
            theme: 'bootstrap-5',
            placeholder: 'Select Partner',
            allowClear: true
        });

        toastr.options = {
            "closeButton": true,
            "progressBar": true,
            "positionClass": "toast-top-right",
            "timeOut": "4000"
        }

        @if (session('success'))
            toastr.success("{{ session('success') }}");
        @endif

        @if (session('error'))
            toastr.error("{{ session('error') }}");
        @endif

        // Show available balance when partner is selected
        $('#partner_id').on('change', function() {
            var selectedOption = $(this).find('option:selected');
            var balance = selectedOption.data('available-balance');
            
            if (balance !== undefined) {
                $('#availableBalance').text(parseFloat(balance).toLocaleString('en-US', {
                    minimumFractionDigits: 2,
                    maximumFractionDigits: 2
                }));
                $('#balanceInfo').show();
                updatePreview();
            } else {
                $('#balanceInfo').hide();
            }
        });

        // Show/hide reference number field based on payment method
        // $('#payment_method').on('change', function() {
        //     var method = $(this).val();
        //     if (method === 'bank_transfer' || method === 'cheque' || method === 'online') {
        //         $('#reference_field').show();
        //         $('#reference_number').prop('required', true);
        //     } else {
        //         $('#reference_field').hide();
        //         $('#reference_number').prop('required', false);
        //     }
        //     updatePreview();
        // });

        // Update preview
        function updatePreview() {
            var partnerName = $('#partner_id option:selected').text();
            var amount = $('#amount').val();
            var method = $('#payment_method option:selected').text();
            var date = $('#withdrawal_date').val();
            
            if (partnerName && (amount || method)) {
                $('#previewPartnerName').text(partnerName || '-');
                $('#previewAmount').text(amount ? parseFloat(amount).toLocaleString('en-US', {
                    minimumFractionDigits: 2,
                    maximumFractionDigits: 2
                }) : '0.00');
                $('#previewMethod').text(method || '-');
                $('#previewDate').text(date ? new Date(date).toLocaleDateString('en-GB') : '-');
                $('#previewSection').show();
            } else {
                $('#previewSection').hide();
            }
        }

        $('#partner_id, #amount, #payment_method, #withdrawal_date').on('change keyup', function() {
            updatePreview();
        });

        // Validate amount against available balance
        $('#amount').on('change', function() {
            var amount = parseFloat($(this).val());
            var balance = parseFloat($('#availableBalance').text().replace(/,/g, ''));
            
            if (amount > balance) {
                toastr.error('Withdrawal amount cannot exceed available balance of ' + balance.toLocaleString());
                $(this).val('');
            }
        });

        // Form validation
        $('#withdrawalForm').on('submit', function(e) {
            var isValid = true;
            var errorMessages = [];

            if (!$('#partner_id').val()) {
                errorMessages.push('Please select a partner');
                isValid = false;
            }

            if (!$('#withdrawal_date').val()) {
                errorMessages.push('Please select a withdrawal date');
                isValid = false;
            }

            var amount = parseFloat($('#amount').val());
            if (isNaN(amount) || amount <= 0) {
                errorMessages.push('Please enter a valid amount greater than 0');
                isValid = false;
            }

            if (!$('#payment_method').val()) {
                errorMessages.push('Please select a payment method');
                isValid = false;
            }

            var method = $('#payment_method').val();
            if ((method === 'bank_transfer' || method === 'cheque' || method === 'online') && !$('#reference_number').val()) {
                errorMessages.push('Reference number is required for ' + method.replace('_', ' ') + ' payment method');
                isValid = false;
            }

            if (!isValid) {
                e.preventDefault();
                errorMessages.forEach(function(message) {
                    toastr.error(message);
                });
                return false;
            }

            const btn = $('#submitBtn');
            btn.prop('disabled', true)
               .html('<span class="spinner-border spinner-border-sm me-2"></span>Creating withdrawal...');
            toastr.info('Processing withdrawal...');
        });
    });
</script>
@endsection