@extends('layouts.app')

@section('title', 'Rate Calculator')

@section('page-wrapper')
    <div class="page-header d-print-none">
        <div class="container-fluid">
            <div class="row g-2 align-items-center">
                <div class="col d-flex justify-content-between align-items-center">
                    <h2 class="page-title">
                        Rate Calculator
                    </h2>
                </div>
            </div>
        </div>
    </div>
    <div class="page-body">
        <div class="container-fluid">
            <div class="row row-cards">
                <div class="col-12">
                    <div class="card">
                        <div class="card-header">
                            <h3 class="card-title">Calculate Shipping Rate</h3>
                        </div>
                        <div class="card-body">
                            <form id="rateForm" class="row g-2 align-items-end">
                                <input type="hidden" name="user_id" value="{{ auth()->user()->id }}">
                                <div class="col-md-2">
                                    <label class="form-label">Origin Pincode</label>
                                    <input type="text" class="form-control" name="origin_pincode"
                                        placeholder="Enter 6-digit origin pincode" maxlength="6" required>
                                </div>
                                <div class="col-md-2">
                                    <label class="form-label">Destination Pincode</label>
                                    <input type="text" class="form-control" name="destination_pincode"
                                        placeholder="Enter 6-digit destination pincode" maxlength="6" required>
                                </div>
                                <div class="col-md-2">
                                    <label class="form-label">Weight (kg)</label>
                                    <input type="number" class="form-control" name="weight"
                                        placeholder="Enter weight in kg" step="0.01" min="0" required>
                                </div>
                                <div class="col-md-2">
                                    <label class="form-label">Payment Mode</label>
                                    <select class="form-select" name="payment_mode" required>
                                        <option value="Pre-paid">Prepaid</option>
                                        <option value="COD">COD</option>
                                    </select>
                                </div>
                                <div class="col-md-2">
                                    <label class="form-label">Shipment Mode</label>
                                    <select class="form-select" name="shipment_mode" required>
                                        <option value="S">Standard</option>
                                        <option value="E">Express</option>
                                    </select>
                                </div>
                                <div class="col-md-2">
                                    <label class="form-label">Shipment Status</label>
                                    <select class="form-select" name="shipment_status" required>
                                        <option value="Delivered">Delivered</option>
                                        <option value="RTO">RTO</option>
                                        <option value="DTO">DTO</option>
                                    </select>
                                </div>
                                <div class="col-md-12 mt-3">
                                    <button type="submit" class="btn btn-primary w-100">Calculate Rate</button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
            <div id="rateResult" class="row row-cards mt-3"></div>
        </div>
    </div>
    </div>

    <div class="modal fade" id="bookingModal" tabindex="-1" aria-labelledby="bookingModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <form id="bookingForm" class="modal-content">
                @csrf
                <div class="modal-header">
                    <h5 class="modal-title" id="bookingModalLabel">Book Shipment</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <input type="hidden" name="account" id="bookingAccount">
                    <input type="hidden" name="courierSetupsId" id="courierSetupsId">

                    <div class="mb-3">
                        <label for="receiver_name" class="form-label">Receiver Name</label>
                        <input type="text" class="form-control" id="receiver_name" name="receiver_name" required>
                    </div>

                    <div class="mb-3">
                        <label for="receiver_address" class="form-label">Receiver Address</label>
                        <textarea class="form-control" id="receiver_address" name="receiver_address" rows="2" required></textarea>
                    </div>

                    <div class="mb-3">
                        <label for="contact_number" class="form-label">Contact Number</label>
                        <input type="text" class="form-control" id="contact_number" name="contact_number" required>
                    </div>

                    <!-- Add more fields as needed -->
                </div>
                <div class="modal-footer">
                    <button type="submit" class="btn btn-primary">Submit Booking</button>
                </div>
            </form>
        </div>
    </div>
@endsection

@section('scripts')
    <script>
        $(document).ready(function() {
            $('#rateForm').on('submit', function(e) {
                e.preventDefault();
                const formData = $(this).serializeArray();
                const data = {};
                formData.forEach(item => data[item.name] = item.value);

                $('#rateResult').html(
                    '<div class="col-12"><div class="alert alert-info">Loading...</div></div>');

                $.ajax({
                    url: '/api/delhivery/rate',
                    type: 'POST',
                    data: data,
                    success: function(response) {
                        if (response.status === 'success') {
                            let html = '';
                            $.each(response.data, function(account, result) {
                                if (result.error) {
                                    html += `<div class="col-md-3">
                                        <div class="card">
                                            <div class="card-header">
                                                <h3 class="card-title">${account}</h3>
                                            </div>
                                            <div class="card-body">
                                                <p class="text-danger">Error: ${result.error}</p>
                                            </div>
                                        </div>
                                    </div>`;
                                } else {
                                    html += `<div class="col-md-12 col-md-3 d-flex-1">
                                        <div class="card mb-3">
                                            <div class="card-body">
                                                <p class="mb-3 col d-flex justify-content-between align-items-center">${account}<strong><button class="btn btn-primary book-now" data-account="${account}" data-courier-setups-business-name="${result.courier_setups_business_name}" data-courier-setups-id="${result.courier_setups_id}" data-gross-amount="${result.gross_amount}" data-net-amount="${result.net_amount}" data-user-id="${result.user_id}" data-admin-commission-amount="${result.admin_commission_amount}" data-superadmin-commission-amount="${result.superadmin_commission_amount}">Book Now</button></strong></p>
                                            <div class="row">
                                                <div class="col-auto d-flex align-items-center pe-2">
                                                    <span class="legend me-2 bg-primary"></span>
                                                        <span>Gross Amount:</span>
                                                        <span class="d-none d-md-inline d-lg-none d-xxl-inline ms-2 text-secondary">₹${result.gross_amount}</span>
                                                </div>
                                                <div class="col-auto d-flex align-items-center px-2">
                                                    <span class="legend me-2 bg-info"></span>
                                                        <span>Swacch Bharat Tax:</span>
                                                        <span class="d-none d-md-inline d-lg-none d-xxl-inline ms-2 text-secondary">₹${result.swacch_bharat_tax}</span>
                                                </div>
                                                <div class="col-auto d-flex align-items-center px-2">
                                                    <span class="legend me-2 bg-success"></span>
                                                    <span>Service Tax:</span>
                                                    <span class="d-none d-md-inline d-lg-none d-xxl-inline ms-2 text-secondary">₹${result.service_tax}</span>
                                                </div>
                                                <div class="col-auto d-flex align-items-center px-2">
                                                    <span class="legend me-2 bg-gradient"></span>
                                                    <span>SGST:</span>
                                                    <span class="d-none d-md-inline d-lg-none d-xxl-inline ms-2 text-secondary">₹${result.sgst}</span>
                                                </div>
                                                <div class="col-auto d-flex align-items-center px-2">
                                                    <span class="legend me-2 bg-primary">
                                                    </span><span>CGST:</span>
                                                    <span class="d-none d-md-inline d-lg-none d-xxl-inline ms-2 text-secondary">₹${result.cgst}</span>
                                                </div>
                                                <div class="col-auto d-flex align-items-center px-2">
                                                    <span class="legend me-2 bg-success"></span>
                                                    <span>IGST:</span>
                                                    <span class="d-none d-md-inline d-lg-none d-xxl-inline ms-2 text-secondary">₹${result.igst}</span>
                                                </div>
                                                <div class="col-auto d-flex align-items-center px-2">
                                                    <span class="legend me-2 bg-info"></span>
                                                    <span>Total Amount:</span> 
                                                    <span class="d-none d-md-inline d-lg-none d-xxl-inline ms-2 text-secondary">₹${result.total_amount}</span>
                                                </div>
                                                <div class="col-auto d-flex align-items-center px-2">
                                                    <span class="legend me-2 bg-gradient"></span>
                                                    <span>Admin Commission:</span>
                                                    <span class="d-none d-md-inline d-lg-none d-xxl-inline ms-2 text-secondary">${result.admin_commission_percentage}% (₹${result.admin_commission_amount})</span>
                                                </div>
                                                <div class="col-auto d-flex align-items-center px-2">
                                                    <span class="legend me-2 bg-success"></span>
                                                    <span>Super Admin Commission:</span>
                                                    <span class="d-none d-md-inline d-lg-none d-xxl-inline ms-2 text-secondary">${result.superadmin_commission_percentage}% (₹${result.superadmin_commission_percentage})</span>
                                                </div>
                                                <div class="col-auto d-flex align-items-center px-2">
                                                    <span class="legend me-2 bg-primary"></span>
                                                    <span>Net Amount:</span>
                                                    <span class="d-none d-md-inline d-lg-none d-xxl-inline ms-2 text-secondary">₹${result.net_amount}</span>
                                                </div>
                                            </div>
                                            </div>
                                        </div>
                                    </div>`;
                                }
                            });
                            $('#rateResult').html(html);
                        } else {
                            $('#rateResult').html(
                                `<div class="col-12"><div class="alert alert-danger">Error: ${response.message}</div></div>`
                            );
                        }
                    },
                    error: function(xhr) {
                        $('#rateResult').html(
                            `<div class="col-12"><div class="alert alert-danger">Error: ${xhr.responseJSON?.message || 'Request failed'}</div></div>`
                        );
                    }
                });
            });
        });

        /*$(document).on('click', '.book-now', function() {
            const account = $(this).data('account');
            const courierSetupsId = $(this).data('courier-setups-id');
            const grossAmount = $(this).data('gross-amount');
            const netAmount = $(this).data('net-amount');
            window.location.href =
                `/bookings/create?account=${encodeURIComponent(account)}&courierSetupsId=${encodeURIComponent(courierSetupsId)}&grossAmount=${encodeURIComponent(grossAmount)}&netAmount=${encodeURIComponent(netAmount)}`;
        });*/

        $(document).on('click', '.book-now', function() {
            const account = $(this).data('account');
            const courierSetupsId = $(this).data('courier-setups-id');
            const grossAmount = parseFloat($(this).data('gross-amount'));
            const netAmount = parseFloat($(this).data('net-amount'));
            const adminCommissionAmount = parseFloat($(this).data('admin-commission-amount'));
            const superadminCommissionAmount = parseFloat($(this).data('superadmin-commission-amount'));
            const userId = $(this).data('user-id'); // make sure this is available

            $.ajax({
                url: `/bookings/checkBalance/${userId}`,
                method: 'GET',
                success: function(response) {
                    if (response.success) {
                        if (response.balance >= netAmount) {
                            // Encrypt parameters via AJAX
                            $.ajax({
                                url: '/bookings/encrypt-params',
                                method: 'POST',
                                data: {
                                    _token: '{{ csrf_token() }}',
                                    account: account,
                                    courierSetupsId: courierSetupsId,
                                    grossAmount: grossAmount,
                                    netAmount: netAmount,
                                    adminCommissionAmount: adminCommissionAmount,
                                    superadminCommissionAmount: superadminCommissionAmount
                                },
                                success: function(encryptResponse) {
                                    if (encryptResponse.status === 'success') {
                                        // Redirect with encrypted data
                                        window.location.href =
                                            `/bookings/create?data=${encodeURIComponent(encryptResponse.encrypted)}`;
                                    } else {
                                        toastr.error('Failed to encrypt parameters.');
                                    }
                                },
                                error: function() {
                                    toastr.error('Error encrypting parameters.');
                                }
                            });
                        } else {
                            toastr.error('Insufficient wallet balance to proceed with booking.');
                        }
                    } else {
                        toastr.error('Could not check wallet balance.');
                    }
                },
                error: function() {
                    toastr.error('Something went wrong while checking balance.');
                }
            });
        });
    </script>
@endsection