@extends('layouts.app')
@section('content')
    <link href="{{ asset('assets/plugins/global/plugins.bundle.css') }}" rel="stylesheet" type="text/css" />
    <script src="{{ asset('assets/plugins/global/plugins.bundle.js') }}"></script>


    <!--begin::Content wrapper-->
    <div class="d-flex flex-column flex-column-fluid">
        <!--begin::Content-->
        <div id="kt_content_container" class="container">
            @if (isset($pageContent) &&
                    !is_null($pageContent) &&
                    ($pageContent->content_place == 'both' || $pageContent->content_place == 'top'))
                <div class="mx-auto mt-4 well">
                    {!! $pageContent->page_content_top !!}
                </div>
            @endif
            <div class="card mb-5 mb-xl-8">

                @if ($user->broadcast_msg != '')
                    <div class="alert alert-info">
                        {{ $user->broadcast_msg }}
                    </div>
                @endif
                <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">New Order</span>
                    </h3>
                </div>
                <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
                    @if (Session::has('order_details'))
                        @php
                            $orderDetails = Session::get('order_details');
                        @endphp
                        <div class="alert alert-success">
                            <strong> ID: </strong> {{ $orderDetails['id'] }} <br>
                            <strong> Service: </strong> {{ $orderDetails['service'] }} <br>
                            <strong> Link: </strong> {{ $orderDetails['link'] }} <br>
                            <strong> Quantity: </strong> {{ $orderDetails['quantity'] }} <br>
                            <strong> Charge: </strong> {{ $orderDetails['price'] }} <br>
                            <strong> Balance: </strong>{{ $orderDetails['balance'] }} <br>
                        </div>
                    @endif
                    @if (Session::has('order_detail_mass'))
                        @php
                            $orderDetails = Session::get('order_detail_mass');
                        @endphp
                        <div class="alert alert-success">
                            <strong> Total: </strong> {{ $orderDetails['total'] }} <br>
                            <strong> Errors: </strong> {{ $orderDetails['errors'] }} <br>
                            <strong> Success: </strong> {{ $orderDetails['successes'] }} <br>
                            <strong> Price: </strong> {{ $orderDetails['price'] }} <br>
                            <strong> Balance: </strong>{{ $orderDetails['balance'] }} <br>
                        </div>
                    @endif
                </div>
                <div class="card-body py-3">
                    <ul class="nav nav-tabs 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">New Order</a>
                        </li>
                        <!-- <li class="nav-item">
                            <a class="nav-link" data-bs-toggle="tab" href="#kt_tab_pane_2">Mass Order</a>
                        </li> -->
                    </ul>
                    <div class="tab-content" id="myTabContent">
                        <div class="tab-pane fade show active" id="kt_tab_pane_1" role="tabpanel">
                            <form class="kt-form" action="{{ route('neworder.create') }}" 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="category" class="form-label">Category</label>
                                            <select name="category" id="category"
                                                class="form-select form-select-solid category_neworder" required>
                                                <option value="">Select Category</option>
                                                @foreach ($categories as $cate)
                                                    @php
                                                        $iconUrl =
                                                            $cate->category_icon == -1
                                                                ? $cate->custom_icon_link
                                                                : 'https://everve.net/assets-v2/img/' .
                                                                    $cate->icon_code .
                                                                    '.svg';
                                                    @endphp
                                                    <option value="{{ $cate->category_id }}"
                                                        data-img-src="{{ $iconUrl }}">
                                                        &nbsp; {{ $cate->category_name }}
                                                    </option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-lg-12">
                                        <div class="py-3">
                                            <label for="neworder_services" class="form-label">Services</label>
                                            <select name="neworder_services" id="neworder_services"
                                                class="form-select form-select-solid service_neworder" required>
                                            </select>
                                        </div>
                                    </div>
                                    <div id="dynamic-fields"></div>
                                    <div class="col-lg-12">
                                        <div class="py-3">
                                            <div class="mb-10">
                                                <button type="submit" class="btn btn-sm btn-warning">
                                                    Submit
                                                </button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </form>
                        </div>
                        <div class="tab-pane fade" id="kt_tab_pane_2" role="tabpanel">
                            <form class="kt-form" action="{{ route('massorder.create') }}" name="order_form"
                                id="order_form" method="POST" enctype="multipart/form-data">
                                @csrf
                                @method('POST')
                                <div class="row">
                                    <div class="alert alert-dismissible alert-info">
                                        <strong>
                                            <i class="fa fa-info-circle" aria-hidden="true"></i> &nbsp; Note
                                        </strong><br>
                                        Here you can place your orders easy! Please make sure you check all the prices and
                                        delivery times before you place a order! After a order submited it cannot be
                                        canceled.
                                    </div>
                                    <div class="col-lg-12">
                                        <div class="py-3">
                                            <label for="editor" class="form-label">Services</label>
                                            <textarea id="editor" rows="10" name="mass_order" class="form-control form-control-solid"
                                                placeholder="service_id|quantity|link"></textarea>
                                        </div>
                                    </div>
                                    <div class="col-lg-12">
                                        <div class="py-3">
                                            <div class="mb-10">
                                                <button type="submit" class="btn btn-sm btn-warning">
                                                    Submit
                                                </button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
            @if (isset($pageContent) &&
                    !is_null($pageContent) &&
                    ($pageContent->content_place == 'both' || $pageContent->content_place == 'bottom'))
                <div class="mx-auto well">
                    {!! $pageContent->page_content_bottom !!}
                </div>
            @endif
        </div>
        <!--end::Content-->
    </div>
    <!--end::Content wrapper-->
    <!--begin::Footer-->
    @include('layouts.footer')
    <!--end::Footer-->
@endsection
@section('script')
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    <script>
        $(document).ready(function() {
            function formatState(state) {
                var imgUrl = $(state.element).attr('data-img-src')
                if (!imgUrl) {
                    return state.text;
                }
                var $state = $(
                    '<span><img src="' + imgUrl + '" class="img-flag" /> ' + state.text + '</span>'
                );
                return $state;
            }

            $('.category_neworder').select2({
                templateResult: formatState,
                templateSelection: formatState
            });
            var notice = {!! str_replace("'", "\'", json_encode($notice)) !!};
            var has_notice = '{{ $has_notice }}';
            if (has_notice == 1) {
                Swal.fire({
                    icon: notice['notice_type'],
                    title: notice['notice_subject'],
                    text: notice['notice_msg'],
                });
            }
			
			var orderDetails = '{{ Session::get("defaultCategoryId") }}';
			//console.log($orderDetails);
			$('select#category').val(orderDetails); // Change the value or make some change to the internal state
			$('select#category').trigger('change.select2');
            //$('.category_neworder').select2();
            //$('#neworder_services').select2();
            $('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_id +
                                ' - ' + value?.service_name +
                                ' - ' + value?.service_price + '</option>'
                        });
                        $("#neworder_services").html(html);
                        $('.service_neworder').select2();
                        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 = "";
                    html +=
                        '<input type="hidden" class="form-control" id="charge_default" readonly="" value="' +
                        response?.service_price + '">';
                    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 +=
                            '<textarea readonly rows="10" name="service_description" id="service_description" class="form-control form-control-solid" placeholder="Description">"' +
                            response?.service_description + '"</textarea>';
                        html += '</div>';
                        html += '</div>';
                    }

                    if (response?.service_package == 1 || response?.service_package == 2 || response
                        ?.service_package == 3 || response?.service_package == 4 || response?.service_package == 5 || response?.service_package == 16 || response?.service_package == 7 || response?.service_package == 9 || response?.service_package == 10 || response?.service_package == 6) {
                        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 || response?.service_package == 10 || response?.service_package == 7 || response?.service_package == 9  || response?.service_package == 4) {
                        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 order_quantity" placeholder="Quantity" value="" />';
                        html += '</div>';
                        html += '<small class="help-block min-max">Min: ' + response?.service_min + ' - Max: ' +
                            response?.service_max + '</small>';
                        html += '<br><small class="help-block min-max price_calculator">Price: ' + response
                            ?.service_price + '</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 || response?.service_package == 5 || response?.service_package == 16 || response?.service_package == 6) {
                        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 order_quantity" placeholder="Quantity" value="" disabled="" />';
                        html += '</div>';
                        html += '<small class="help-block min-max">Min: ' + response?.service_min + ' - Max: ' +
                            response?.service_max + '</small>';
                        html += '<small class="help-block min-max price_calculator">Price: ' + response
                            ?.service_price + '</small>';
                        html += '</div>';
                    }

                    if (response?.service_package == 10) {
                        html += '<div class="col-lg-12">';
                        html += '<div class="py-3">';
                        html +=
                            '<label for="field-orderform-fields-media-url" class="form-label">Media URL</label>';
                        html +=
                            '<input type="text" name="media_url" id="field-orderform-fields-media_url" class="form-control form-control-solid media_url" placeholder="Media URL" value="" />';
                        html += '</div>';
                        html += '</div>';
                    }

                    if (response?.service_package == 11 || 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 += '<br><small class="help-block min-max price_calculator">Price: ' + response
                            ?.service_price + '</small>';
                        html += '</div>';
                        var session_delay = 0;
                        var selectedOption = "";
                        if (session_delay == 0) {
                            selectedOption = "selected";
                        } else if (session_delay == 5) {
                            selectedOption = "selected";
                        }else if (session_delay == 10) {
                            selectedOption = "selected";
                        }else if (session_delay == 15) {
                            selectedOption = "selected";
                        }else if (session_delay == 30) {
                            selectedOption = "selected";
                        }else if (session_delay == 60) {
                            selectedOption = "selected";
                        }else if (session_delay == 90) {
                            selectedOption = "selected";
                        }else if (session_delay == 120) {
                            selectedOption = "selected";
                        }else if (session_delay == 150) {
                            selectedOption = "selected";
                        }else if (session_delay == 180) {
                            selectedOption = "selected";
                        }else if (session_delay == 210) {
                            selectedOption = "selected";
                        }else if (session_delay == 240) {
                            selectedOption = "selected";
                        }else if (session_delay == 270) {
                            selectedOption = "selected";
                        }else if (session_delay == 300) {
                            selectedOption = "selected";
                        }else if (session_delay == 360) {
                            selectedOption = "selected";
                        }else if (session_delay == 420) {
                            selectedOption = "selected";
                        } else if (session_delay == 480) {
                            selectedOption = "selected";
                        } else if (session_delay == 540) {
                            selectedOption = "selected";
                        } else if (session_delay == 600) {
                            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="5" ' + selectedOption + '>5 minutes</option>';
                        html += '<option value="10" ' + selectedOption + '>10 minutes</option>';
                        html += '<option value="15" ' + selectedOption + '>15 minutes</option>';
                        html += '<option value="30" ' + selectedOption + '>30 minutes</option>';
                        html += '<option value="60" ' + selectedOption + '>60 minutes</option>';
                        html += '<option value="90" ' + selectedOption + '>90 minutes</option>';
                        html += '<option value="120" ' + selectedOption + '>120 minutes</option>';
                        html += '<option value="150" ' + selectedOption + '>150 minutes</option>';
                        html += '<option value="180" ' + selectedOption + '>180 minutes</option>';
                        html += '<option value="210" ' + selectedOption + '>210 minutes</option>';
                        html += '<option value="240" ' + selectedOption + '>240 minutes</option>';
                        html += '<option value="270" ' + selectedOption + '>270 minutes</option>';
                        html += '<option value="300" ' + selectedOption + '>300 minutes</option>';
                        html += '<option value="360" ' + selectedOption + '>360 minutes</option>';
                        html += '<option value="420" ' + selectedOption + '>420 minutes</option>';
                        html += '<option value="480" ' + selectedOption + '>480 minutes</option>';
                        html += '<option value="540" ' + selectedOption + '>540 minutes</option>';
                        html += '<option value="600" ' + selectedOption + '>600 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 kt_daterangepicker_expiry" placeholder="End Date" value="" autocomplete="off" />';
                        html += '</div>';
                        html += '</div>';
                    }

                    if (response?.service_package == 3 || response?.service_package == 4) {
                        html +=
                            '<div class="form-group fields" id="order_comment"><label class="control-label">Comments</label>' +
                            '<textarea class="form-control counter" name="comments" id="neworder_comment" cols="30" rows="10" data-related="quantity"></textarea></div>';
                    }
					
                    if (response?.service_package == 5 || response?.service_package == 16 || response?.service_package == 12 || response?.service_package == 6) {
                        html +=
                            '<div class="form-group fields" id="order_comment"><label class="control-label">Mentions</label>' +
                            '<textarea class="form-control counter" name="comments" id="neworder_comment" cols="30" rows="10" data-related="quantity"></textarea></div>';
                    }

                    if (response?.service_package == 7 || response?.service_package == 9) {
                        html +=
                            '<div class="form-group fields" id="order_comment"><label class="control-label">Usernames</label>' +
                            '<textarea class="form-control counter" name="comments" id="neworder_comment" cols="30" rows="10" data-related="quantity"></textarea></div>';
                    }

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

                        html += '<div class="col-lg-12 dripfeed-box">';
                        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 dripfeed-box">';
                        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 dripfeed-box">';
                        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="" readonly/>';
                        html += '</div>';
                        html += '</div>';
                    }

                    $("#dynamic-fields").html(html);

                    $(".kt_daterangepicker_expiry").daterangepicker({
                        singleDatePicker: true,
                        showDropdowns: true,
                        locale: {
                            format: 'YYYY/MM/DD'
                        },
                        autoApply: true
                    });

                    $('.dripfeed-box').css('display', 'none');

                },
            });
        }

        $(document).on('keyup', '.order_quantity', function() {
            var service = $("#neworder_services").val();
            var quantity = $(this).val();
            var charge = $("#charge_default").val();
            var runs = $("#dripfeed-runs").val();
            if ($("#dripfeedcheckbox").prop('checked')) {
                var dripfeed = "var";
            } else {
                var dripfeed = "bos";
            }
            var calculated_charge = charge * quantity / 1000;
            calculated_charge = calculated_charge.toFixed(4);
            $(".price_calculator").text("Price:" + calculated_charge);
            var runs = $('#dripfeed-runs').val();
            var times = 1;
            if (runs > 0) {
                times = runs;
            }
            var total_quantity = quantity * times;
            $('#dripfeed-totalquantity').val(total_quantity);
        });

        $(document).on('keyup', '#dripfeed-runs', function() {
            var runs = $('#dripfeed-runs').val();
            var times = 1;
            if (runs > 0) {
                times = runs;
            }
            var quantity = $('.order_quantity').val();
            var total_quantity = quantity * times;
            $('#dripfeed-totalquantity').val(total_quantity);
        });

        $(document).on('click', '#dripfeedcheckbox', function() {
            if ($("#dripfeedcheckbox").prop('checked')) {
                $('.dripfeed-box').css('display', 'inline');
            } else {
                $('.dripfeed-box').css('display', 'none');
            }
        });

        $(document).on('keyup', '#neworder_comment', function() {
            var service = $("#neworder_services").val();
            var comments = $("#neworder_comment").val();

            var data = new FormData();
            data.append('service', service);
            data.append('comments', comments);

            if (comments) {
                var quantity = comments.split("\n").length;
                var charge = $("#charge_default").val();

                var calculated_charge = (charge * quantity / 1000).toFixed(4);

                $("#field-orderform-fields-quantity").val(quantity);
                $("#charge").val(calculated_charge);
            }
        });
    </script>
@endsection