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

@endsection
@section('content')

    <div class="row">
        <div class="col-10 mb-5">
            <h1> @if($service->service_type == 'TRAINING')
                Request Training
            @elseif($service->service_type == 'FACILITY_BOOKING')
                    Request Facility
                @else
                    Request Service
                @endif

                : {{ $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">
                                 @if($service->service_type == 'TRAINING')
                                     Training Details
                                @elseif($service->service_type == 'FACILITY_BOOKING')
                                         Facility Details
                                    @else
                                         Service Details
                                    @endif
                                </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">
                                    @if($service->service_type == 'TRAINING')
                                       Certification Request Method
                                @elseif($service->service_type == 'FACILITY_BOOKING')
                                         Certificate Issue Method
                                    @else
                                        Delivery Details
                                    @endif
                                </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"> 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);
                    if (res.data.requestData) {
                        $('#requestData').val(res.data.requestData);
                    }
                    //                $('#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 === 'requestSummary') {
                // Validate the summary data and create the service request
                var formData = new FormData();
                formData.append('serviceId', '{{ $service->id }}');
                formData.append('currentTabName', 'requestSummary');
                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) {
                        res = JSON.parse(res);
                        
                        if (res.status) {
                            status = true;
                            $('#requestData').val(res.data.requestData);
                            if (res.message) {
                                Swal.fire({
                                    icon: 'success',
                                    title: 'Success!',
                                    text: res.message,
                                });
                            }
                        } else {
                            Swal.fire({
                                icon: 'error',
                                title: 'Error',
                                text: res.message || 'Failed to submit service request',
                            });
                        }
                    },
                    error: function (response) {
                        if (response.status == 422) {
                            var erroJson = JSON.parse(response.responseText);
                            displayFormFieldErrors(formObj.id, erroJson.errors);
                        } else if (response.status == 500) {
                            Swal.fire({
                                icon: 'error',
                                type: "error",
                                title: 'Something went wrong...',
                                text: 'Unable to submit service request.',
                            });
                        }
                    }
                });
                
                return status;
            }
            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 {
                            if (res.message) {
                                Swal.fire({
                                    icon: 'error',
                                    title: 'Validation Error',
                                    text: res.message,
                                });
                            }
                        }
                    },
                    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