@extends('bootstrap.layouts.app')

@section('content')
    <!--begin::Content wrapper-->
    <div class="wrapper-content">
        <div class="wrapper-content__header">
        </div>
        <div class="wrapper-content__body">
            <div id="block_76">
            <div class="d-flex flex-column flex-column-fluid">
                <!--begin::Content-->
                <div id="kt_content_container" class="container">

                    <div class="card mb-5 mb-xl-8">
                        <div class="card-header border-0 pt-5">
                            <h3 class="card-title align-items-start flex-column">
                                <span class="card-label fw-bolder fs-3 mb-1">Child Panel</span>
                            </h3>
                        </div>
                        @if (isset($pageContent) &&
                                !is_null($pageContent) &&
                                ($pageContent->content_place == 'both' || $pageContent->content_place == 'top'))
                            <div class="my-4 well">
                                {!! $pageContent->page_content_top !!}
                            </div>
                        @endif
                        <div class="card-body py-3">
                            @if (session('success'))
                                <div class="alert alert-success">
                                    {{ session('success') }}
                                </div>
                            @endif
                            @if (session('error'))
                                <div class="alert alert-danger">
                                    {{ session('error') }}
                                </div>
                            @endif
                        </div>
                        <div class="card-body py-3">
                            <ul class="nav nav-tabs nav-fills nav-line-tabs mb-5 fs-6">
                                <li class="nav-item">
                                    <a class="nav-link active" data-bs-toggle="tab" href="#kt_tab_pane_1">Order Child
                                        Panel</a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link" data-bs-toggle="tab" href="#kt_tab_pane_2">Child Panels</a>
                                </li>
                            </ul>
                            <div class="tab-content" id="myTabContent">
                                <div class="tab-pane fade show active" id="kt_tab_pane_1" role="tabpanel">

                                    @if ($errors->any())
                                        @foreach ($errors->all() as $error)
                                            <div class="alert alert-danger">{{ $error }}</div>
                                        @endforeach
                                    @endif

                                    <div class="alert alert-info">
                                        Please visit your registrar's dashboard to change nameservers to:
                                        <br>
                                        - ns1.aularental.com
                                        <br>
                                        - ns2.aularental.com
                                    </div>
                                    <form class="kt-form" action="{{ route('child-panels.order') }}" name="order_form"
                                        id="order_form" method="POST" enctype="multipart/form-data">
                                        @csrf
                                        @method('POST')
                                        <div class="row">
                                            <div class="col-lg-12">
                                                <div class="py-3">
                                                    <label for="neworder_services" class="form-label">Domain</label>
                                                    <input type="text" name="domain" id="domain" class="form-control"
                                                        required>
                                                </div>
                                            </div>
                                            <div class="col-lg-12">
                                                <div class="py-3">
                                                    <label for="neworder_services" class="form-label">Currency</label>
                                                    <select class="form-select" name="currency">
                                                        <option value="USD">United States Dollars (USD)</option>
                                                        <option value="INR">Indian Rupee (INR)</option>
                                                    </select>
                                                </div>
                                            </div>
                                            <div class="col-lg-12">
                                                <div class="py-3">
                                                    <label for="neworder_services" class="form-label">Admin Username</label>
                                                    <input type="text" name="username" id="username"
                                                        class="form-control" required>
                                                </div>
                                            </div>
                                            <div class="col-lg-12">
                                                <div class="py-3">
                                                    <label for="neworder_services" class="form-label">Admin Password</label>
                                                    <input type="text" name="password" id="password"
                                                        class="form-control" required>
                                                </div>
                                            </div>
                                            <div class="col-lg-12">
                                                <div class="py-3">
                                                    <label for="neworder_services" class="form-label">Admin Confirm
                                                        Password</label>
                                                    <input type="text" name="password_confirm" id="password_confirm"
                                                        class="form-control" required>
                                                </div>
                                            </div>
                                            <div class="col-lg-12">
                                                <div class="py-3">
                                                    <label for="neworder_services" class="form-label">Price Per Month:
                                                        {{ $settings->site_currency_icon }}
                                                        {{ $settings->childpanel_price }}</label>
                                                </div>
                                            </div>
                                            <div class="col-lg-12">
                                                <div class="py-3">
                                                    <div class="mb-10">
                                                        <button type="submit" class="btn btn-block btn-primary">
                                                            Submit
                                                        </button>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </form>
                                </div>
                                <div class="tab-pane fade" id="kt_tab_pane_2" role="tabpanel">
                                    <div class="table-responsive">
                                        <table class="table table-bordered">
                                            <thead>
                                                <tr class="fw-bold fs-6 text-gray-800">
                                                    <th>#</th>
                                                    <th>Domain</th>
                                                    <th>Currency</th>
                                                    <th>Username</th>
                                                    <th>Password</th>
                                                    <th>Date</th>
                                                    <th>Status</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                @if (!empty($panel_logs))
                                                    @foreach ($panel_logs as $panel_log)
                                                        <tr>
                                                            <td>{{ $panel_log->id }}</td>
                                                            <td>{{ $panel_log->domain }}</td>
                                                            <td>{{ $panel_log->currency }}</td>
                                                            <td>{{ $panel_log->username }}</td>
                                                            <td>{{ $panel_log->password }}</td>
                                                            <td>{{ $panel_log->created }}</td>
                                                            <td>
                                                                @if ($panel_log->status == 'renewal')
                                                                    <label for="renew_id" class="form-label">Price Per
                                                                        Month:
                                                                        {{ $settings->site_currency_icon }}
                                                                        {{ $settings->childpanel_price }}</label><br>
                                                                    <form action="{{ route('child-panels.renew') }}"
                                                                        method="post">
                                                                        @csrf
                                                                        <input name="renew_id" type="hidden"
                                                                            value="{{ $panel_log->id }}" /><input
                                                                            type="submit" name="renew"
                                                                            class="btn btn-big-primary" value="Renew">
                                                                    </form>
                                                                @elseif($panel_log->status == 'active')
                                                                    <a class="btn btn-big-primary">Active</a>
                                                                @elseif($panel_log->status == 'pending')
                                                                    <a class="btn btn-big-primary">Pending</a>
                                                                @elseif($panel_log->status == 'unpaid')
                                                                    <a class="btn btn-big-primary">Pending</a>
                                                                @else
                                                                    <a class="btn btn-big-primary">Disabled</a>
                                                                @endif
                                                            </td>
                                                        </tr>
                                                    @endforeach
                                                @endif

                                            </tbody>
                                        </table>
                                    </div>


                                </div>
                            </div>
                        </div>
                        @if (isset($pageContent) &&
                                !is_null($pageContent) &&
                                ($pageContent->content_place == 'both' || $pageContent->content_place == 'bottom'))
                            <div class="my-4 well">
                                {!! $pageContent->page_content_bottom !!}
                            </div>
                        @endif
                    </div>
                </div>
                <!--end::Content-->
            </div>
            </div>
        </div>
    </div>
            <!--end::Content wrapper-->
            <!--begin::Footer-->
            @include('layouts.footer')
            <!--end::Footer-->
        @endsection
        @section('script')
            <script>
                $(document).ready(function() {
                    $('select#category').on('change', function() {
                        getServiceByCategoryId(this.value);
                    });

                    $('select#neworder_services').on('change', function() {
                        getServiceDetailsById(this.value);
                    });
                    getServiceByCategoryId($('select#category').val());
                });

                function getServiceByCategoryId(categoryId) {
                    var data = new FormData();
                    data.append('category_id', categoryId);
                    $.ajax({
                        type: 'POST',
                        processData: false, // important
                        contentType: false, // important
                        data: data,
                        headers: {
                            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                        },
                        url: "{{ route('getServicesByCategory') }}",
                        dataType: 'json',
                        success: function(response) {
                            if (response?.services?.length) {
                                var html = "";
                                $.each(response?.services, function(index, value) {
                                    html += '<option value="' + value?.service_id + '">' + value?.service_name +
                                        '</option>'
                                });
                                $("#neworder_services").html(html);
                                getServiceDetailsById(response?.services[0]?.service_id);
                            }
                        },
                    });
                }

                function getServiceDetailsById(service_id) {
                    var data = new FormData();
                    data.append('service_id', service_id);
                    $.ajax({
                        type: 'POST',
                        processData: false, // important
                        contentType: false, // important
                        data: data,
                        headers: {
                            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                        },
                        url: "{{ route('getServiceDetailsById') }}",
                        dataType: 'json',
                        success: function(response) {
                            var html = "";
                            if (response?.service_description != "") {
                                html += '<div class="col-lg-12">';
                                html += '<div class="py-3">';
                                html += '<label for="service_description" class="form-label">Description</label>';
                                html +=
                                    '<input type="text" readonly name="service_description" id="service_description" class="form-control form-control-solid" placeholder="Description" value="' +
                                    response?.service_description + '" />';
                                html += '</div>';
                                html += '</div>';
                            }

                            if (response?.service_package == 1 || response?.service_package == 2 || response
                                ?.service_package == 3 || response?.service_package == 4) {
                                var link_type = "Link";
                                if (response?.service_package == 2) {
                                    link_type = "Username";
                                } else {
                                    link_type = "Link";
                                }
                                html += '<div class="col-lg-12">';
                                html += '<div class="py-3">';
                                html += '<label for="field-orderform-fields-link" class="form-label">' + link_type +
                                    '</label>';
                                html +=
                                    '<input type="text" name="link" id="field-orderform-fields-link" class="form-control form-control-solid" placeholder="Link" value="" />';
                                html += '</div>';
                                html += '</div>';
                            }

                            if (response?.service_package == 1) {
                                html += '<div class="col-lg-12">';
                                html += '<div class="py-3">';
                                html +=
                                    '<label for="field-orderform-fields-quantity" class="form-label">Quantity</label>';
                                html +=
                                    '<input type="number" name="quantity" id="field-orderform-fields-quantity" class="form-control form-control-solid" placeholder="Quantity" value="" />';
                                html += '</div>';
                                html += '<small class="help-block min-max">Min: ' + response?.service_min + ' - Max: ' +
                                    response?.service_max + '</small>';
                                html += '</div>';
                            }

                            if (response?.service_package == 11 || response?.service_package == 12 || response
                                ?.service_package == 13 || response?.service_package == 14 || response
                                ?.service_package == 15) {
                                html += '<div class="col-lg-12">';
                                html += '<div class="py-3">';
                                html += '<label for="field-orderform-fields-link" class="form-label">Username</label>';
                                html +=
                                    '<input type="text" name="username" id="field-orderform-fields-link" class="form-control form-control-solid" placeholder="Username" value="" />';
                                html += '</div>';
                                html += '</div>';
                            }

                            if (response?.service_package == 3) {
                                html += '<div class="col-lg-12">';
                                html += '<div class="py-3">';
                                html +=
                                    '<label for="field-orderform-fields-quantity" class="form-label">Quantity</label>';
                                html +=
                                    '<input type="number" name="quantity" id="field-orderform-fields-quantity" class="form-control form-control-solid" placeholder="Quantity" value="" />';
                                html += '</div>';
                                html += '<small class="help-block min-max">Min: ' + response?.service_min + ' - Max: ' +
                                    response?.service_max + '</small>';
                                html += '</div>';
                            }

                            if (response?.service_package == 11 || response?.service_package == 12 || response
                                ?.service_package == 13) {
                                html += '<div class="col-lg-12">';
                                html += '<div class="py-3">';
                                html +=
                                    '<label for="field-orderform-fields-link" class="form-label">How many posts limit would you like?</label>';
                                html +=
                                    '<input type="text" name="posts" id="field-orderform-fields-link" class="form-control form-control-solid" placeholder="How many posts limit would you like?" value="" />';
                                html += '</div>';
                                html += '</div>';

                                html += '<div class="col-lg-12">';
                                html += '<div class="form-group">';
                                html += '<label for="order_count" class="form-label">Quantity</label>';
                                html += '<div class="row">';
                                html += '<div class="col">';
                                html +=
                                    '<input type="text" name="min" id="order_count_min" class="form-control form-control-solid" placeholder="Minimum" value="" />';
                                html += '</div>';
                                html += '<div class="col">';
                                html +=
                                    '<input type="text" name="max" id="order_count_max" class="form-control form-control-solid" placeholder="Maximum" value="" />';
                                html += '</div>';
                                html += '</div>';
                                html += '</div>';
                                html += '<small class="help-block min-max">Min: ' + response?.service_min + ' - Max: ' +
                                    response?.service_max + '</small>';
                                html += '</div>';
                                var session_delay = 0;
                                var selectedOption = "";
                                if (session_delay == 0) {
                                    selectedOption = "selected";
                                } else if (session_delay == 300) {
                                    selectedOption = "selected";
                                } else if (session_delay == 600) {
                                    selectedOption = "selected";
                                } else if (session_delay == 900) {
                                    selectedOption = "selected";
                                } else if (session_delay == 1800) {
                                    selectedOption = "selected";
                                } else if (session_delay == 3600) {
                                    selectedOption = "selected";
                                } else if (session_delay == 5400) {
                                    selectedOption = "selected";
                                }

                                html += '<div class="col-lg-12">';
                                html += '<div class="py-3">';
                                html +=
                                    '<label for="field-orderform-fields-delay" class="form-label">How long order delay do you want?</label>';
                                html +=
                                    '<select name="delay" class="form-select form-select-solid" id="field-orderform-fields-delay">';
                                html += '<option value="0" ' + selectedOption + '>No delay</option>';
                                html += '<option value="300" ' + selectedOption + '>5 minutes</option>';
                                html += '<option value="600" ' + selectedOption + '>10 minutes</option>';
                                html += '<option value="900" ' + selectedOption + '>15 minutes</option>';
                                html += '<option value="1800" ' + selectedOption + '>30 minutes</option>';
                                html += '<option value="3600" ' + selectedOption + '>60 minutes</option>';
                                html += '<option value="5400" ' + selectedOption + '>90 minutes</option>';
                                html += '</select>';
                                html += '</div>';
                                html += '</div>';

                                html += '<div class="col-lg-12">';
                                html += '<div class="py-3">';
                                html +=
                                    '<label for="field-orderform-fields-expiry" class="form-label">End Date</label>';
                                html +=
                                    '<input type="text" name="expiry" id="field-orderform-fields-expiry" class="form-control form-control-solid datetime" placeholder="End Date" value="" autocomplete="off" />';
                                html += '</div>';
                                html += '</div>';
                            }

                            if (response?.service_dripfeed == 2) {
                                html += '<div class="col-lg-12">';
                                html += '<div class="py-3">';
                                html += '<label for="dripfeedcheckbox" class="form-label">';
                                html +=
                                    '<input type="checkbox" name="check" id="dripfeedcheckbox" class="form-control form-control-solid" />';
                                html += 'Drip-feed Order</label>';
                                html += '</div>';
                                html += '</div>';

                                html += '<div class="col-lg-12">';
                                html += '<div class="py-3">';
                                html +=
                                    '<label for="dripfeed-runs" class="form-label">How many times should the process be repeated?</label>';
                                html +=
                                    '<input type="text" name="runs" id="dripfeed-runs" class="form-control form-control-solid" placeholder="How many times should the process be repeated?" value="" />';
                                html += '</div>';
                                html += '</div>';

                                html += '<div class="col-lg-12">';
                                html += '<div class="py-3">';
                                html +=
                                    '<label for="dripfeed-interval" class="form-label">How many minutes interval? (60*24 = 1440 for daily shipping)</label>';
                                html +=
                                    '<input type="text" name="interval" id="dripfeed-interval" class="form-control form-control-solid" placeholder="How many minutes interval? (60*24 = 1440 for daily shipping)" value="" />';
                                html += '</div>';
                                html += '</div>';

                                html += '<div class="col-lg-12">';
                                html += '<div class="py-3">';
                                html +=
                                    '<label for="dripfeed-totalquantity" class="form-label">Total Quantity to be Sent</label>';
                                html +=
                                    '<input type="text" name="total_quantity" id="dripfeed-totalquantity" class="form-control form-control-solid" placeholder="Total Quantity to be Sent" value="" />';
                                html += '</div>';
                                html += '</div>';
                            }

                            $("#dynamic-fields").html(html);
                        },
                    });
                }
            </script>
        @endsection