@extends('layouts.dashboard-app')
@section('main-content')
    <div class="content-body">
        <div class="container">
            <div class="row page-titles">
                <div class="col p-0">
                    <h4>Hello, <span>Welcome {{ auth()->user()->name }}</span></h4>

                </div>
                <div class="col p-0">
                    <ol class="breadcrumb">
                        <li class="breadcrumb-item"><a href="javascript:void(0)">From</a>
                        </li>
                        <li class="breadcrumb-item active">Basic</li>
                    </ol>
                </div>
            </div>
            <div class="row">
                <div class="col-lg-12">
                    <div class="card">
                        <div class="card-body">
                            @if ($errors->any())
                                <div class="alert alert-danger" role="alert">
                                    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                                        <span aria-hidden="true">×</span>
                                    </button>

                                    @foreach ($errors->all() as $error)
                                        {{ $error }}<br />
                                    @endforeach
                                </div>
                            @endif

                            <form class="form-horizontal form-label-left input_mask" method="post" id="calculate_revenue"
                                autocomplete="off">
                                @csrf
                                <div class="row">
                                    <div class="col-md-3 col-sm-6 col-xs-6 form-group">
                                        <div class="form-group">
                                            <label for="Users">Users</label>
                                            <select name="users" id="users" class="form-control users" required>
                                                <option value="" selected disabled>- Users Selected -</option>
                                                @foreach ($users as $user)
                                                    <option value="{{ $user->id }}">
                                                        {{ $user->id }} - {{ $user->name }} - {{ $user->role }}
                                                    </option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>

                                    <div class="col-md-3 col-sm-6 col-xs-6 form-group">
                                        <div class="form-group">
                                            <label for="Date From">Date From</label>
                                            <input class="form-control date_from" id="date_from" name="date_from"
                                                type="date" value="{{ old('date_from') }}">
                                        </div>
                                    </div>

                                    <div class="col-md-3 col-sm-6 col-xs-6 form-group">
                                        <div class="form-group">
                                            <label for="Date To">Date To</label>
                                            <input class="form-control date_to" id="date_to" name="date_to" type="date"
                                                value="{{ old('date_to') }}">
                                        </div>
                                    </div>

                                    <div class="col-md-3 col-sm-6 col-xs-6 form-group">
                                        <div class="form-group">
                                            <label for="Product Type">Product Type</label>
                                            <select class="form-control js-example-basic-multiple select2 product_type"
                                                name="product_type[]" id="product_type" multiple>
                                                <option value="Elife">Elife</option>
                                                <option value="IdeaCoup">Wireless</option>
                                                <option value="Postpaid">Postpaid</option>
                                            </select>
                                        </div>
                                    </div>


                                </div>

                                <div class="form-group row">
                                    <div class="col-md-9 col-sm-9 col-xs-12 col-md-offset-3">
                                        <button id="submitBtn" class="btn btn-primary mt-2" aria-label="Submit filter">
                                            Get Data
                                        </button>
                                    </div>
                                </div>



                            </form>

                            <form class="form-horizontal form-label-left input_mask" method="post" id="save_revenue"
                                autocomplete="off">
                                @csrf
                                <div class="row">
                                    <div class="col-md-6 col-sm-12 col-xs-12 form-group">
                                        <div class="form-group">
                                            <label for="Total Leads">Total Leads</label>
                                            <input class="form-control total_leads" id="total_leads"
                                                placeholder="Total Leads" name="total_leads" type="text" required
                                                value="{{ old('total_leads') }}" autocomplete="off">
                                        </div>
                                    </div>

                                    <div class="col-md-6 col-sm-12 col-xs-12 form-group">
                                        <div class="form-group">
                                            <label for="Total Submission">Total Submission</label>
                                            <input class="form-control total_submission" id="total_submission"
                                                placeholder="Total Submission" name="total_submission" type="text"
                                                required value="{{ old('total_submission') }}" autocomplete="off">
                                        </div>
                                    </div>

                                    <div class="col-md-6 col-sm-12 col-xs-12 form-group">
                                        <div class="form-group">
                                            <label for="Total Inprocess">Total Inprocess</label>
                                            <input class="form-control total_inprocess" id="total_inprocess"
                                                placeholder="Total Inprocess" name="total_inprocess" type="text" required
                                                value="{{ old('total_inprocess') }}" autocomplete="off">
                                        </div>
                                    </div>


                                    <div class="col-md-6 col-sm-12 col-xs-12 form-group">
                                        <div class="form-group">
                                            <label for="Total Closed">Total Closed</label>
                                            <input class="form-control total_closed" id="total_closed"
                                                placeholder="Total Closed" name="total_closed" type="text" required
                                                value="{{ old('total_closed') }}" autocomplete="off">
                                        </div>
                                    </div>


                                    <div class="col-md-6 col-sm-12 col-xs-12 form-group">
                                        <div class="form-group">
                                            <label for="Total Revenue">Total Revenue</label>
                                            <input class="form-control total_revenue" id="total_revenue"
                                                placeholder="Total Revenue" name="total_revenue" type="text" required
                                                value="{{ old('total_revenue') }}" autocomplete="off">
                                        </div>
                                    </div>


                                    <div class="col-md-6 col-sm-12 col-xs-12 form-group">
                                        <div class="form-group">
                                            <label for="Rider Cost">Rider Cost</label>
                                            <input class="form-control rider_cost" id="rider_cost"
                                                placeholder="Rider Cost" name="rider_cost" type="text" required
                                                value="{{ old('rider_cost') }}" autocomplete="off">
                                        </div>
                                    </div>


                                    <div class="col-md-6 col-sm-12 col-xs-12 form-group">
                                        <div class="form-group">
                                            <label for="Clawback Amount">Clawback Amount</label>
                                            <input class="form-control clawback_amount" id="clawback_amount"
                                                placeholder="Clawback Amount" name="clawback_amount" type="text"
                                                required value="{{ old('clawback_amount') }}" autocomplete="off">
                                        </div>
                                    </div>

                                    <div class="col-md-6 col-sm-12 col-xs-12 form-group">
                                        <div class="form-group">
                                            <label for="Advances">Advances</label>
                                            <input class="form-control advances" id="advances" placeholder="Advances"
                                                name="advances" type="text" required value="{{ old('advances') }}"
                                                autocomplete="off">
                                        </div>
                                    </div>


                                    <div class="col-md-6 col-sm-12 col-xs-12 form-group">
                                        <div class="form-group">
                                            <label for="Dedection If Needed">Dedection If Needed</label>
                                            <input class="form-control dedection_if_needed" id="dedection_if_needed"
                                                placeholder="Dedection If Needed" name="dedection_if_needed"
                                                type="text" required value="{{ old('dedection_if_needed') }}"
                                                autocomplete="off" onblur="subtract()">
                                        </div>
                                    </div>


                                    <div class="col-md-6 col-sm-12 col-xs-12 form-group">
                                        <div class="form-group">
                                            <label for="Final Amount">Final Amount</label>
                                            <input class="form-control final_amount" id="final_amount"
                                                placeholder="Final Amount" name="final_amount" type="text" required
                                                value="{{ old('final_amount') }}" autocomplete="off">
                                        </div>
                                    </div>



                                </div>

                                <div class="form-group row">
                                    <div class="col-md-9 col-sm-9 col-xs-12 col-md-offset-3">
                                        <button id="saveBtn" class="btn btn-primary mt-2" aria-label="Submit filter">
                                            Submit
                                        </button>
                                    </div>
                                </div>



                            </form>

                        </div>
                    </div>
                </div>

            </div>

        </div>
        <!-- #/ container -->
    </div>
@endsection

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
    $(document).ready(function() {



        $("#submitBtn").click(function(e) {
            e.preventDefault(); // Prevent the form from submitting normally

            // Gather form data
            const users = $("#users").val();
            const date_from = $("#date_from").val();
            const date_to = $("#date_to").val(); // Fix: Use `.val()`
            const product_type = $("#product_type").val(); // Fix: Use `.val()`

            if (!users || !date_from || !date_to || !product_type) {
                alert("Please fill out all fields.");
                return;
            }

            // Send AJAX request
            $.ajax({
                type: "POST",
                url: "{{ route('calculate_revenue') }}",
                data: {
                    _token: "{{ csrf_token() }}", // CSRF token
                    users: users,
                    date_from: date_from,
                    date_to: date_to,
                    product_type: product_type,
                },
                success: function(response) {
                    // console.log(response);
                    alert("Data retrieved successfully!");
                    // console.log(response);
                    $('#total_leads').val(response.totalRecords);
                    $('#total_submission').val(response.totalSubmission);
                    $('#total_inprocess').val(response.totalInProcess);
                    $('#total_closed').val(response.totalClosed);
                    $('#total_revenue').val(response.totalRevenue);
                    $('#rider_cost').val(response.totalRiderCost);
                    $('#clawback_amount').val(response.totalClawbackAmount);
                    $('#final_amount').val(response.totalFinalRevenue);
                    $('#advances').val(response.advances.advance_amount);

                    // now i need a code that when i enter any amount in input feild id is dedection_if_needed amount dedect from  final_amount its possible ??
                },
                error: function(xhr) {
                    // alert("An error occurred while processing the request.");
                    console.error(xhr.responseText);
                },
            });
        });


        $("#saveBtn").click(function(e) {
            e.preventDefault(); // Prevent the form from submitting normally

            // Gather form data
            const users = $(".users").val();
            const date_from = $(".date_from").val();
            const date_to = $(".date_to").val(); // Fix: Use `.val()`
            const product_type = $(".product_type").val(); // Fix: Use `.val()`
            const total_leads = $(".total_leads").val(); // Fix: Use `.val()`
            const total_submission = $(".total_submission").val(); // Fix: Use `.val()`
            const total_inprocess = $(".total_inprocess").val(); // Fix: Use `.val()`
            const total_closed = $(".total_closed").val(); // Fix: Use `.val()`
            const total_revenue = $(".total_revenue").val(); // Fix: Use `.val()`
            const rider_cost = $(".rider_cost").val(); // Fix: Use `.val()`
            const clawback_amount = $(".clawback_amount").val(); // Fix: Use `.val()`
            const advances = $(".advances").val(); // Fix: Use `.val()`
            const dedection_if_needed = $(".dedection_if_needed").val(); // Fix: Use `.val()`
            const final_amount = $(".final_amount").val(); // Fix: Use `.val()`


            if (!users || !date_from || !date_to || !product_type) {
                alert("Please fill out all fields.");
                return;
            }

            // Send AJAX request
            $.ajax({
                type: "POST",
                url: "{{ route('save_revenue') }}",
                data: {
                    _token: "{{ csrf_token() }}", // CSRF token
                    users: users,
                    date_from: date_from,
                    date_to: date_to,
                    product_type: product_type,
                    total_leads: total_leads,
                    total_submission: total_submission,
                    total_inprocess: total_inprocess,
                    total_closed: total_closed,
                    total_revenue: total_revenue,
                    rider_cost: rider_cost,
                    clawback_amount: clawback_amount,
                    advances: advances,
                    dedection_if_needed: dedection_if_needed,
                    final_amount: final_amount,
                },
                success: function(response) {
                    // console.log(response);
                    alert("Data save successfully!");
                    $("#calculate_revenue")[0].reset();
                    window.location.href = "/admin/revenue/index"
                    // console.log(response);
                },
                error: function(xhr) {
                    // alert("An error occurred while processing the request.");
                    console.error(xhr.responseText);
                },
            });
        });

    });

    function subtract() {
        // Get the values from the inputs
        var finalamount = parseFloat($('#final_amount').val()) ||
            0; // Parse the final amount as a float or set to 0 if invalid
        var dedection_amount = parseFloat($('#dedection_if_needed').val()) ||
            0; // Parse the deduction amount as a float or set to 0 if invalid

        // Perform subtraction
        var subtract = finalamount - dedection_amount;

        // Update the final amount input field with the result
        $('.final_amount').val(subtract.toFixed(2)); // Display result with two decimal places
    }
</script>