@extends('layouts.acorn.acorn_frontend_app')
@section('header_styles')

@endsection
@section('content')

<div class="row">
    <div class="col-10 mb-5">
        <h1>Request Service - {{ $service->service_name }}</h1>
    </div>
</div>
<div class="row">
    <div class="col-12 mb-5">

        <div class="card mb-5 wizard wizardBasic" id="seriveRequestWizard">
            <div class="card-header border-0 pb-0">
                <ul class="nav nav-tabs justify-content-center disabled" role="tablist">
                    <li class="nav-item" role="presentation">
                        <a class="nav-link text-center active" href="#serviceDetail" role="tab">
                            <div class="mb-1 title d-none d-sm-block">Service Details</div>
                            <!--<div class="text-small description d-none d-md-block">First description</div>-->
                        </a>
                    </li>
                    @if($service->require_additional_docments)
                    <li class="nav-item" role="presentation">
                        <a class="nav-link text-center" href="#submitDocuments" role="tab">
                            <div class="mb-1 title d-none d-sm-block">Document Submission</div>
                            <!--<div class="text-small description d-none d-md-block">Second description</div>-->
                        </a>
                    </li>
                    @endif
                    <li class="nav-item" role="presentation">
                        <a class="nav-link text-center" href="#deliveryDetails" role="tab">
                            <div class="mb-1 title d-none d-sm-block">Delivery Details</div>
                            <!--<div class="text-small description d-none d-md-block">Third description</div>-->
                        </a>
                    </li>
                    <li class="nav-item" role="presentation">
                        <a class="nav-link text-center" href="#requestSummary" role="tab">
                            <div class="mb-1 title d-none d-sm-block">Request Summary</div>
                            <!--<div class="text-small description d-none d-md-block">Third description</div>-->
                        </a>
                    </li>
                    <li class="nav-item d-none" role="presentation">
                        <a class="nav-link text-center" href="#requestSubmitted" role="tab"></a>
                    </li>
                </ul>
            </div>
            <div class="card-body">
                <div class="tab-content">
                    <div class="tab-pane fade active show" id="serviceDetail" role="tabpanel">

                    </div>
                    <div class="tab-pane fade" id="submitDocuments" role="tabpanel">

                    </div>
                    <div class="tab-pane fade" id="deliveryDetails" role="tabpanel">

                    </div>
                    <div class="tab-pane fade" id="requestSummary" role="tabpanel">

                    </div>
                    <div class="tab-pane fade" id="requestSubmitted" role="tabpanel">

                    </div>
                </div>
            </div>
            <input id="requestData" type="hidden" >
        </div>




    </div>
</div>

@endsection
@section('footer_scripts')
<script type="text/javascript">

    $(document).ready(function () {
        loadPage('serviceDetail');
    });

    $('#seriveRequestWizard .nav-link').on('show.bs.tab', function (event) {
        var page = $(event.target).attr('href').replace('#', '');
        loadPage(page);
    });

    function openBackPage(tabName) {
        $('.nav a[href="#' + tabName + '"]').tab('show');
    }
    function openNextPage(tabName) {
        if (validateData()) {
            $('.nav a[href="#' + tabName + '"]').tab('show');
        }
    }

    function loadPage(tabName) {

        const requestData = $('#requestData').val();

        $.post("{{ route('service-request-load-wizard-page') }}", {serviceId: '{{ $service->id }}', tabName: tabName, requestData: requestData}, function (res) {

            res = JSON.parse(res);

            if (res.status) {
                $('.tab-pane').html('');
                $('#' + tabName).html(res.data.viewData);
//                $('#requestData').val(res.data.requestData);
            } else {
                window.location = "{{ route('service-request-catalogue') }}";
            }
        });
    }

    function validateData(tabName) {
        const currentPage = $('#current_page').val();
        const requestData = $('#requestData').val();
        var status = false;

        $(".form-control").removeClass("is-invalid");
        $(".error-label").text('');

        if ($('#' + currentPage + ' form').length > 0) {
            var formObj = $('#' + currentPage + ' form')[0];
            var formData = new FormData(formObj);
            formData.append('serviceId', '{{ $service->id }}');
            formData.append('currentTabName', currentPage);
            formData.append('requestData', requestData);

            $.ajax({
                type: 'POST',
                url: "{{ route('service-request-validate-wizard-page') }}",
                data: formData,
                async: false,
                contentType: false,
                processData: false,
                success: function (res, textStatus, jqXHR) {
                    res = JSON.parse(res);
                    if (res.status) {
                        status = true;
                        $('#requestData').val(res.data.requestData);
                    } else {
                    }
                },
                error: function (response) {
                    if (response.status == 422) {
                        var erroJson = JSON.parse(response.responseText);
                        displayFormFieldErrors(formObj.id, erroJson.errors);
                    } else if (response.status == 500) {
                        console.log(response.responseText);
                        var erroJson = JSON.parse(response.responseText);
                        Swal.fire({
                            icon: 'error',
                            type: "error",
                            title: 'Something went wrong...',
                            text: 'Unable to make a request.',
                        })
                    }
                }
            });
        } else {
            status = true;
        }
        return status;

    }

</script>
@endsection