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

@section('title', 'Withdrawal Management - Edit 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;
    }
    .select2-container--bootstrap-5 .select2-selection {
        min-height: 38px;
    }
</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">Edit 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">Edit Withdrawal Information</h3>
                    </div>
                    <div class="card-body">
                        <form id="withdrawalForm" action="{{ route('withdrawals.update', $withdrawal->id) }}" method="POST">
                            @csrf
                            @method('PUT')
                            <div class="row">
                                <!-- Branch Selection -->
                                <div class="col-md-6 mb-3">
                                    <label for="branch_id" class="form-label required-field">Branch</label>
                                    <select class="form-select @error('branch_id') is-invalid @enderror" 
                                            id="branch_id" name="branch_id" required>
                                        <option value="">Select Branch</option>
                                        @foreach($branches as $branch)
                                            <option value="{{ $branch->id }}" 
                                                    {{ old('branch_id', $withdrawal->branch_id) == $branch->id ? 'selected' : '' }}>
                                                {{ $branch->branch_name }} ({{ $branch->branch_code }})
                                            </option>
                                        @endforeach
                                    </select>
                                    @error('branch_id')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>

                                <!-- Partner Selection (Dependent on Branch) -->
                                <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 Branch First</option>
                                    </select>
                                    @error('partner_id')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                                
                                <!-- Calculation Preview -->
                                <div class="col-md-12 mt-3" id="calculationPreview" 
                                     style="{{ $withdrawal->branch_id ? 'display: block;' : 'display: none;' }}">
                                    <div class="card bg-light">
                                        <div class="card-body">
                                            <h5 class="card-title text-primary">Withdrawal Calculation Preview</h5>
                                            <div class="row">
                                                <div class="col-md-3">
                                                    <div class="info-box">
                                                        <label class="text-muted">Net Profit</label>
                                                        <h5 class="mb-0" id="netProfit">0.00</h5>
                                                    </div>
                                                </div>
                                                <div class="col-md-3">
                                                    <div class="info-box">
                                                        <label class="text-muted">Management Fee (<span id="feePercentDisplay">0</span>%)</label>
                                                        <h5 class="mb-0 text-danger" id="feeAmount">0.00</h5>
                                                    </div>
                                                </div>
                                                <div class="col-md-3">
                                                    <div class="info-box">
                                                        <label class="text-muted">Amount After Fee</label>
                                                        <h5 class="mb-0 text-success" id="amountAfterFee">0.00</h5>
                                                    </div>
                                                </div>
                                                <div class="col-md-3">
                                                    <div class="info-box">
                                                        <label class="text-muted">Partner Share (<span id="equityPercentDisplay">0</span>%)</label>
                                                        <h5 class="mb-0 text-primary" id="partnerShare">0.00</h5>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="mt-2 text-muted small" id="partnerNameDisplay"></div>
                                        </div>
                                    </div>
                                </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', \Carbon\Carbon::parse($withdrawal->withdrawal_date)->format('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', $withdrawal->amount) }}" 
                                        placeholder="0.00" required>
                                    @error('amount')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </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', $withdrawal->payment_method) == 'Cash' ? 'selected' : '' }}>Cash</option>
                                        <option value="Bank Transfer" {{ old('payment_method', $withdrawal->payment_method) == 'Bank Transfer' ? 'selected' : '' }}>Bank Transfer</option>
                                        <option value="Cheque" {{ old('payment_method', $withdrawal->payment_method) == 'Cheque' ? 'selected' : '' }}>Cheque</option>
                                    </select>
                                    @error('payment_method')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>

                                <div class="col-md-6 mb-3" id="reference_field" 
                                     style="display: {{ in_array($withdrawal->payment_method, ['Bank Transfer', 'Cheque']) ? 'block' : 'none' }};">
                                    <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', $withdrawal->reference_number) }}" 
                                        placeholder="e.g., Cheque No., Transaction ID, Receipt No."
                                        {{ in_array($withdrawal->payment_method, ['Bank Transfer', 'Cheque']) ? 'required' : '' }}>
                                    @error('reference_number')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </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', $withdrawal->notes) }}</textarea>
                                    @error('notes')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </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">Update 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() {
        // Toastr configuration
        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

        // Branch change event - Load partners (same as create)
        $('#branch_id').on('change', function() {
            var branchId = $(this).val();
            var partnerSelect = $('#partner_id');
            
            // Clear existing options
            partnerSelect.empty().append('<option value="">Select Partner</option>');
            
            if (!branchId) {
                partnerSelect.prop('disabled', true);
                $('#calculationPreview').hide();
                return;
            }

            // Show loading state
            partnerSelect.prop('disabled', true);
            partnerSelect.append('<option value="" disabled selected>Loading partners...</option>');

            // AJAX request to fetch partners for this branch
            $.ajax({
                url: "{{ route('api.branch.partners') }}",
                type: "GET",
                data: { branch_id: branchId },
                dataType: "json",
                success: function(response) {
                    partnerSelect.prop('disabled', false).empty();
                    partnerSelect.append('<option value="">Select Partner</option>');
                    
                    if (response.success && response.data.length > 0) {
                        $.each(response.data, function(index, partner) {
                            var option = $('<option></option>')
                                .attr('value', partner.id)
                                .data('available-balance', partner.available_balance || 0)
                                .text(partner.full_name + ' (ID: ' + partner.partner_code + ')');
                            
                            // Check if this matches the current withdrawal's partner
                            if ("{{ old('partner_id', $withdrawal->partner_id) }}" == partner.id) {
                                option.attr('selected', 'selected');
                            }
                            
                            partnerSelect.append(option);
                        });
                        partnerSelect.trigger('change');
                    } else {
                        partnerSelect.append('<option value="" disabled>No partners found for this branch</option>');
                    }
                },
                error: function(xhr) {
                    console.error('Error fetching partners:', xhr);
                    toastr.error('Failed to load partners. Please try again.');
                    partnerSelect.prop('disabled', false).empty();
                    partnerSelect.append('<option value="">Select Partner</option>');
                }
            });
        });

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

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

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

            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') && !$('#reference_number').val()) {
                errorMessages.push('Reference number is required for ' + method + ' 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>Updating withdrawal...');
            toastr.info('Updating withdrawal...');
        });

        // Fetch branch details function (same as create)
        function fetchBranchDetails() {
            var branchId = $('#branch_id').val();
            var partnerId = $('#partner_id').val();
            var withdrawalDate = $('#withdrawal_date').val();
            
            if (!branchId) {
                $('#calculationPreview').hide();
                return;
            }
            
            // If no withdrawal date, use current month
            var month = withdrawalDate ? withdrawalDate.substring(0, 7) : new Date().toISOString().substring(0, 7);
            
            // Show loading state
            $('#calculationPreview').show();
            $('#netProfit').text('Loading...');
            $('#feeAmount').text('Loading...');
            $('#amountAfterFee').text('Loading...');
            $('#partnerShare').text('Loading...');
            
            $.ajax({
                url: "{{ route('api.branch.details') }}",
                type: "GET",
                data: {
                    branch_id: branchId,
                    partner_id: partnerId || null,
                    month: month
                },
                dataType: "json",
                success: function(response) {
                    if (response.success) {
                        var data = response.data;
                        
                        // Format currency
                        var formatCurrency = function(amount) {
                            if (amount === null || amount === undefined) return '0.00';
                            return '' + parseFloat(amount).toLocaleString('en-US', {
                                minimumFractionDigits: 2,
                                maximumFractionDigits: 2
                            });
                        };
                        
                        $('#netProfit').text(formatCurrency(data.net_profit));
                        $('#feePercentDisplay').text(data.fee_percentage || 0);
                        $('#feeAmount').text(formatCurrency(data.fee_amount));
                        $('#amountAfterFee').text(formatCurrency(data.amount_after_fee));
                        
                        if (data.partner_share !== null && data.partner_share !== undefined) {
                            $('#partnerShare').text(formatCurrency(data.partner_share));
                            $('#equityPercentDisplay').text(data.equity_percentage || 0);
                            $('#partnerNameDisplay').html('Partner: <strong>' + (data.partner_name || 'Selected Partner') + '</strong>');
                            $('#calculationPreview').show();
                        } else if (partnerId) {
                            $('#partnerShare').text('No equity data found');
                            $('#equityPercentDisplay').text('0');
                            $('#partnerNameDisplay').text('');
                            $('#calculationPreview').show();
                        } else {
                            $('#partnerShare').text('Select partner to calculate share');
                            $('#equityPercentDisplay').text('0');
                            $('#partnerNameDisplay').text('');
                            $('#calculationPreview').show();
                        }
                    } else {
                        $('#calculationPreview').hide();
                        toastr.warning(response.message || 'No data available for this selection');
                    }
                },
                error: function(xhr) {
                    console.error('Error fetching branch details:', xhr);
                    // Don't hide preview on error, show some default values
                    $('#netProfit').text('0.00');
                    $('#feeAmount').text('0.00');
                    $('#amountAfterFee').text('0.00');
                    $('#partnerShare').text('0.00');
                    $('#calculationPreview').show();
                }
            });
        }
        
        // Trigger events for calculation preview
        $('#branch_id, #partner_id, #withdrawal_date').on('change', function() {
            fetchBranchDetails();
        });
        
        // Load partners and calculation preview on page load if branch exists
        @if ($withdrawal->branch_id)
            $(document).ready(function() {
                // First load the partners for the branch
                $('#branch_id').trigger('change');
                
                // Then after a delay, load the calculation preview
                setTimeout(function() {
                    fetchBranchDetails();
                }, 1000);
            });
        @endif
    });
</script>
@endsection