@extends('portal.layout.main')

@push('styles')
    <link rel="stylesheet" href="{{ asset('portal/assets/plugins/footable-bootstrap/css/footable.bootstrap.min.css') }}">
    <link rel="stylesheet" href="{{ asset('portal/assets/plugins/footable-bootstrap/css/footable.standalone.min.css') }}">
@endpush
@section('main-container')
    <section class="content blog-page">
        <div class="body_scroll">
            <div class="block-header">
                <div class="row">
                    <div class="col-lg-7 col-md-6 col-sm-12">

                        <ul class="breadcrumb mt-3">
                            <li class="breadcrumb-item"><a href="javascript:void(0);"><i class="zmdi zmdi-home"></i>Home</a></li>
                            <li class="breadcrumb-item"><a href="javascript:void(0);">Recharge Zone</a></li>
                            <li class="breadcrumb-item"><a href="javascript:void(0);">DTH Recharge</a></li>
                        </ul>
                        <button class="btn btn-primary btn-icon mobile_menu" type="button"><i class="zmdi zmdi-sort-amount-desc"></i></button>
                    </div>
                    <div class="col-lg-5 col-md-6 col-sm-12">
                        <div class="d-flex justify-content-end flex-wrap gap-2">
                            <button class="btn btn-primary btn-icon right_icon_toggle_btn" type="button">
                                <i class="zmdi zmdi-arrow-right"></i>
                            </button>

                        </div>
                    </div>


                </div>
            </div>
            <div class="container-fluid">
                <div class="row">
                    <div class="col-lg-12">
                        <div class="card">
                            <div class="body">
                                <div class="position-relative mb-3">
                                    <h4 class="m-0 responsive-title">Dth Recharge</h4>
                                    <a href="#" class="position-absolute"
                                        style="right: 0; top: 50%; transform: translateY(-50%);">
                                        <button class="btn btn-secondary btn-icon" type="button">
                                            <i class="zmdi zmdi-time-restore"></i> History
                                        </button>
                                    </a>
                                </div>

                                <form id="dth_recharge_form">
                                    <div class="form-group">
                                        <label for="dth_number">DTH Subscriber number</label>
                                        <input type="text" id="dth_number" name="dth_number" class="form-control"
                                            placeholder="Enter DTH Subscriber Number" required pattern="[0-9]{6,12}">
                                    </div>

                                    <div class="form-group">
                                        <label for="dth_operator">DTH Operator</label>
                                        <select name="dth_operator" id="dth_operator" class="form-control ms" required>
                                            <option disabled selected value="">Select DTH Operator</option>
                                            <option value="Tata Play">Tata Play</option>
                                            <option value="Airtel Digital TV">Airtel Digital TV</option>
                                            <option value="Dish TV">Dish TV</option>
                                            <option value="d2h">d2h</option>
                                            <option value="Sun Direct">Sun Direct</option>
                                        </select>
                                    </div>

                                    <div class="form-group">
                                        <label for="dth_operator">Recharge Amount</label>
                                        <input type="number" id="dth_operator" name="dth_amount" class="form-control"
                                            placeholder="Enter Amount" required min="1">
                                    </div>

                                    <button type="submit" class="btn btn-primary waves-effect">Recharge</button>
                                    <button type="submit" class="btn btn-danger waves-effect">DTH Info</button>
                                </form>

                            </div>
                        </div>


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

        {{-- Show Transaction History (Last 5 Transactions) --}}
        <div class="container-fluid">
            <!-- Striped Rows -->
            <div class="row clearfix">
                <div class="col-lg-12 col-md-12 col-sm-12">
                    <div class="card">
                        <div class="header">
                            <h2> Last <strong>5</strong> Transactions</h2>
                            <ul class="header-dropdown">
                                <li class="dropdown"> <a href="javascript:void(0);" class="dropdown-toggle"
                                        data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"> <i
                                            class="zmdi zmdi-more"></i> </a>
                                    <ul class="dropdown-menu dropdown-menu-right">
                                        <li><a href="{{ route('recharge_history') }}">Recharge History</a></li>
                                    </ul>
                                </li>
                            </ul>
                        </div>
                        <div class="body">
                            <div class="table-responsive">
                                <table
                                    class="table table-striped m-b-0 footable footable-1 footable-paging footable-paging-center breakpoint-lg"
                                    style="">
                                    <thead class="thead-dark">
                                        <tr>
                                            <th>TXID</th>
                                            <th>Operator</th>
                                            <th>Number</th>
                                            <th>Operator Id</th>
                                            <th>Amount</th>
                                            <th>Status</th>
                                            <th>Complain</th>
                                            <th>Date</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <th scope="row">1</th>
                                            <td>Mark</td>
                                            <td>Otto</td>
                                            <td>@mdo</td>
                                            <td>@mdo</td>
                                            <td>@mdo</td>
                                            <td>@mdo</td>
                                            <td>@mdo</td>
                                        </tr>
                                    </tbody>
                                    <tfoot>
                                        <tr class="footable-paging">
                                            <td colspan="8">
                                                <ul class="pagination">
                                                    <li class="footable-page-nav disabled" data-page="first"><a
                                                            class="footable-page-link" href="#">«</a></li>
                                                    <li class="footable-page-nav disabled" data-page="prev"><a
                                                            class="footable-page-link" href="#">‹</a></li>
                                                    <li class="footable-page visible active" data-page="1"><a
                                                            class="footable-page-link" href="#">1</a></li>
                                                    <li class="footable-page visible" data-page="2"><a
                                                            class="footable-page-link" href="#">2</a></li>
                                                    <li class="footable-page-nav" data-page="next"><a
                                                            class="footable-page-link" href="#">›</a></li>
                                                    <li class="footable-page-nav" data-page="last"><a
                                                            class="footable-page-link" href="#">»</a></li>
                                                </ul>
                                                <div class="divider"></div><span class="label label-default">1 of 2</span>
                                            </td>
                                        </tr>
                                    </tfoot>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
@endsection
@push('scripts')
    <script src="{{ asset('portal/assets/bundles/footable.bundle.js') }}"></script><!-- Lib Scripts Plugin Js -->
    <script src="{{ asset('portal/assets/js/pages/tables/footable.js') }}"></script><!-- Custom Js -->
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

    <script>
        $(document).ready(function() {
            $('#offerSearch').click(function() {
                var mobile = $('#mobile').val();
                var opcode = $('#operator').val();
                var host = window.location.origin + '/portal';
                if (mobile != '') {
                    $.ajax({
                        url: `${host}/search/dth-info`,
                        method: "POST",
                        headers: {
                            'X-CSRF-TOKEN': document.getElementById("dth_recharge_form")
                                .querySelector('input[name="_token"]').value
                        },
                        data: {
                            id: mobile,
                            opcode: opcode,
                        },
                        dataType: "html",

                        success: function(data) {

                            data.foreach(res => {
                                tableRows += `
                                        <tr>
                                            <td> <button type="button" id="res.price" value="res.price" class="btn btn-info" onclick="copy(res.price);"
                                                    data-dismiss="modal">res.price</button></td>
                                            <td>res.data</td>
                                        </tr>
                                        `;
                            });

                            const htmlTable = `
                                            <table class="table table-bordered">
                                                <tbody>
                                                    <tr>
                                                        <th>Amount</th>
                                                        <th>Offer Details</th>
                                                    </tr>
                                                    ${tableRows}
                                                </tbody>
                                            </table>
                                        `;

                            Swal.fire({
                                title: 'Current Offers',
                                html: htmlTable,
                                icon: 'info',
                                confirmButtonText: 'Close'
                            });
                        },
                        error: function() {
                            Swal.fire({
                                title: 'Error',
                                text: 'Could not fetch offers.',
                                icon: 'error'
                            });
                        }
                    })
                } else {
                    alert("Please enter Number and Select Operator");
                    // $('#employee_details').css("display", "none");
                }
            });
        });

        const dthRechargeForm = document.getElementById("dth_recharge_form");
        if (dthRechargeForm) {
            dthRechargeForm.addEventListener("submit", function(event) {
                event.preventDefault();

                // Collect form data
                const formData = new FormData(this);

                // Convert FormData to a plain object
                const data = {};
                formData.forEach((value, key) => {
                    data[key] = value;
                });

                // Define the host
                const host = window.location.origin + '/portal';

                // Show loading spinner
                Swal.fire({
                    title: 'Fetching...',
                    text: 'Please wait while we process the recharge.',
                    allowOutsideClick: false,
                    didOpen: () => {
                        Swal.showLoading();
                    }
                });

                // Send the form data to the server
                fetch(`${host}/recharge/dth`, {
                        method: 'POST',
                        headers: {
                            "Content-Type": "application/json",
                            // "X-CSRF-TOKEN": dthRechargeForm.querySelector('input[name="_token"]').value
                        },
                        body: JSON.stringify(data) // Send plain object as JSON
                    })
                    .then(response => response.json())
                    .then(response => {
                        Swal.close();
                        if (!response.success) {
                            Swal.fire({
                                icon: 'error',
                                title: 'Recharge Failed!',
                                text: response.message,
                                confirmButtonColor: '#d33',
                                confirmButtonText: 'OK'
                            });
                        } else {
                            Swal.fire({
                                icon: 'success',
                                title: 'Success!',
                                text: response.message,
                                confirmButtonColor: '#3085d6',
                                confirmButtonText: 'OK'
                            });
                        }
                    })
                    .catch(error => {
                        console.error("Error:", error);
                        Swal.fire({
                            icon: 'error',
                            title: 'Recharge Failed!',
                            text: error,
                            confirmButtonColor: '#d33',
                            confirmButtonText: 'OK'
                        });
                    });
            });
        }
    </script>
@endpush