@extends('layouts.app')

@section('content')
    <!--begin::Content wrapper-->
    <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">Account Details</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
                </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">General</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" data-bs-toggle="tab" href="#kt_tab_pane_2">Password</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" data-bs-toggle="tab" href="#kt_tab_pane_3">API</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('account.profile') }}" name="profile_form" id="profile_form" method="POST">
                                @csrf
                                @method('POST')
                                <div class="row">
                                    <div class="col-lg-12">
                                        <div class="py-3">
                                            <label for="category" class="form-label">Username</label>
                                            <input type="text" class="form-control" value="{{$user->username}}" readonly>
                                        </div>
                                    </div>
                                    <div class="col-lg-12">
                                        <div class="py-3">
                                            <label for="category" class="form-label">Name</label>
                                            <input type="text" name="name" class="form-control" value="{{$user->name}}">
                                        </div>
                                    </div>
                                    <div class="col-lg-12">
                                        <div class="py-3">
                                            <label for="category" class="form-label">Email</label>
                                            <input type="text" name="email" class="form-control" value="{{$user->email}}">
                                        </div>
                                    </div>
                                    <div class="col-lg-12">
                                        <div class="py-3">
                                            <label for="category" class="form-label">Phone</label>
                                            <input type="text" name="telephone" class="form-control" value="{{$user->telephone}}">
                                        </div>
                                    </div>
                                    <div class="col-lg-12">
                                        <div class="py-3">
                                            <label for="category" class="form-label">Timezone</label>
                                            <select name="timezone" class="form-control">
                                                @foreach(get_timezones() as $timezone)
                                                <option value="{{$timezone['timezone']}}" @if($user->timezone == $timezone['timezone']) selected @endif>{{$timezone['label']}}</option>
                                                @endforeach
                                            </select>
                                        </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 class="tab-pane fade" id="kt_tab_pane_2" role="tabpanel">
                            <form class="kt-form" action="{{ route('account.password_reset') }}" 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">Current Password</label>
                                            <input type="password" name="current_password" class="form-control">
                                        </div>
                                    </div>
                                    <div class="col-lg-12">
                                        <div class="py-3">
                                            <label for="category" class="form-label">New Password</label>
                                            <input type="password" name="password" class="form-control" minlength="8">
                                        </div>
                                    </div>
                                    <div class="col-lg-12">
                                        <div class="py-3">
                                            <label for="category" class="form-label">Confirm New Password</label>
                                            <input type="password" name="confirm_password" class="form-control" minlength="8">
                                        </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 class="tab-pane fade" id="kt_tab_pane_3" role="tabpanel">
                            <form class="kt-form" action="{{ route('account.api') }}" name="order_form" id="order_form" method="POST">
                                @csrf
                                @method('POST')
                                <div class="row">
                                    <div class="col-lg-12">
                                        <div class="py-3">
                                            <label for="category" class="form-label">API Link</label>
                                            <input type="text" name="api_link" class="form-control" readonly value="{{url('api/v2')}}">
                                        </div>
                                    </div>
                                    <div class="col-lg-12">
                                        <div class="py-3">
                                            <label for="category" class="form-label">API Key</label>
                                            <input type="text" name="api_key" class="form-control" readonly value="{{ $user->apikey }}">
                                        </div>
                                    </div>
                                    
                                    <div class="col-lg-12"> 
                                        <div class="py-3">
                                            <div class="mb-10">
                                                <button type="submit" class="btn btn-sm btn-warning">
                                                    Generate New Key
                                                </button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!--end::Content-->
    </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