@extends('layouts.app')
@section('title', 'Quotation')
@section('content')
<div class="container page-content">
	<div class="row page-col {{ isset($quotation) ? 'align-items-center pb-2' : '' }}">
	    <div class="{{ isset($quotation) ? 'col-xl-8' : 'col-xl-12' }} col-12">
	        <h1 class="font-weight-bold typography-4 mb-0">
                @if( $current_route == 'quotation-edit' )
                    Quotation : {{ $quotation->quotation_no }}

                @elseif( $current_route == 'quotation-service-edit' )
                    Quotation : {{ $quotation->quotation_no }}

                @elseif( $current_route == 'quotation-service-index' )
                    Quotation : {{ $quotation->quotation_no }}

                @elseif( $current_route == 'quotation-service-create' )
                    Quotation : {{ $quotation->quotation_no }}
                    
                @else
                    Quotation
                @endif
            </h1>
	    </div>
        @if( isset($quotation) )
            <div class="col-xl-4 col-12 mt-3 mt-lg-0 text-end">
                <a class="btn btn-black btn-custom" href="{{ route('quotation-view', $quotation->id) }}">View Summary</a>
            </div>
            <div class="col-12 text-end mt-3">
                <input type="hidden" name="quotation_id" value="{{ $quotation->id }}" id="quotation_id">
                @if( $quotation->statusIsDraft() && $quotation->allowEditOrSubmitQuotation() )
                    <button type="submit" class="ms-3 btn btn-success btn text-white btn-custom btn-form-action" id="pending_approval" name="action" value="{{$user->hasPermissionToManageQuotation()? 'approve': 'pending_approval'}}">
                        Submit
                    </button>
                @elseif( $quotation->statusIsPendingApproval() && $user->hasPermissionToManageQuotationWithOwnMember($quotation->created_by) )
                    <button type="submit" class="ms-3 btn btn-success btn text-white btn-custom btn-form-action" id="approve" value="approve" name="action">
                        Approve
                    </button>
                @elseif( $quotation->statusIsApprovedQuotation() )
                    <a class="ms-2 btn btn-success btn-custom btn text-white" href="{{$quotation->clienteleInvoice && is_null($quotation->clienteleInvoice->deleted_at) && $quotation->clienteleInvoice->status != 6 ? route('quotation-invoice-edit', ['quotation_invoice_id' => $quotation->clienteleInvoice->id]) : route('quotation-invoice-create', ['quotation_id' => $quotation->id]) }}">
                        Request Invoice
                    </a>
                    <a class="ms-2 btn btn-purple btn-custom btn-change-modal-text" data-bs-toggle="modal" data-bs-target="#cancelModal" data-action="revision">
                        Revision
                    </a>
                    <a class="ms-2 btn btn-danger btn text-white btn-custom btn-change-modal-text" data-bs-toggle="modal" data-bs-target="#cancelModal" data-action="cancel">
                        Cancel Job
                    </a>
                @elseif( $quotation->statusIsPendingCancelJob() )
                    @if( $user->hasPermissionToManageQuotationWithOwnMember($quotation->created_by) )
                        <button type="submit" class="ms-3 btn btn-purple btn-custom btn-form-action" id="approve_cancel_job" value="approve_cancel_job" name="action">
                            Approve Cancel Job
                        </button>
                    @else
                        <button type="submit" class="ms-3 btn btn-danger btn-custom btn-form-action btn text-white" id="approve" value="approve" name="action">
                            Cancel Request
                        </button>
                    @endif
                @elseif( $quotation->statusIsCancelJob() && $user->hasPermissionToManageQuotation() )
                    <button type="submit" class="ms-3 btn btn-danger btn-custom btn-form-action btn text-white" id="approve" value="approve" name="action">
                        Cancel Job Approval
                    </button>
                @elseif( $quotation->statusIsPendingInvoice() || $quotation->statusIsIssuedInvoice() )
                    <a class="ms-2 btn btn-purple btn-custom btn text-white" href="{{ route('quotation-invoice-edit', ['quotation_invoice_id'=> $quotation->clienteleInvoice->id])}}">
                        View Invoice
                    </a>
                @endif
            </div>
        @endif
	</div><!-- Header -->
	<div class="row page-col">
		<div class="col-xl-12 col-12">
            <ul class="nav nav-tabs" id="quotation_tab" role="tablist">
                <li class="nav-item" role="presentation">
                    @if( $current_route == 'quotation-create' || $current_route == 'quotation-edit' )
                        <a class="nav-link active" id="basic-tab" data-bs-toggle="tab" href="#basic" role="tab" aria-controls="basic" aria-selected="true">Quotation Info</a>
                    @else
                        <a class="nav-link" href="{{ route('quotation-edit', ['quotation_id'=>$quotation->id]) }}">
                        	Quotation Info
                        </a>
                    @endif
                </li><!-- Quotation Info -->
                <li class="nav-item" role="presentation">
                    @if( $current_route == 'quotation-service-index' )
                        <a class="nav-link active" id="service-tab" data-bs-toggle="tab" href="#service" role="tab" aria-controls="service" aria-selected="true">Services</a>
                    @else
                        @if( $current_route == 'quotation-create' )
                            <a class="nav-link disabled" id="service-tab" data-bs-toggle="tab" href="#service" role="tab" aria-controls="service" aria-selected="false">Services</a>
                        @else
                            <a class="nav-link {{ $current_route == 'quotation-service-create' || $current_route == 'quotation-service-edit' ? 'active' : '' }}" 
                                href="{{ route('quotation-service-index', ['quotation_id'=>$quotation->id]) }}">
                            	Services
                            </a>
                        @endif
                    @endif
                </li><!-- Services -->
            </ul><!-- Header Tabs -->
            <div class="tab-content" id="quotation_tab_content">
            @if( $current_route == 'quotation-create' || $current_route == 'quotation-edit' )
                <div class="tab-pane fade show active min-vh-100" id="basic" role="tabpanel" aria-labelledby="basic-tab">
                    @include('quotation.quotation-form')
                </div><!-- Basic Info Tab -->
            @endif
            @if( $current_route == 'quotation-service-index' )
                <div class="tab-pane fade show active" id="service" role="tabpanel" aria-labelledby="service-tab">
                    @include('quotation.service-list')
                </div><!-- Services Tab -->
            @endif
            @if( $current_route == 'quotation-service-create' || $current_route == 'quotation-service-edit' )
                <div class="tab-pane fade show active" id="service" role="tabpanel" aria-labelledby="service-tab">
                    @include('quotation.service-form')
                </div><!-- Services Tab -->
            @endif
            </div><!-- Tabs Contents -->
        </div>
	</div>
</div>
@endsection
@push('modal')
	@if( isset($quotation) && $quotation->statusIsApprovedQuotation() )
		<div class="modal fade" id="cancelModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="cancel_modal_title" aria-hidden="true">
			<div class="modal-dialog modal-dialog-centered"	>
				<div class="modal-content">
					<form id="modalForm" action="{{ route('quotation-cancel') }}" method="POST" autocomplete="off">
						@csrf
						<div class="modal-header">
							<h5 class="modal-title" id="cancel_modal_title">Cancel Job Details</h5>
							<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
						</div>
						<div class="modal-body">
							<div class="mb-3 row">
								<label id="cancel_modal_remarks" for="cancel_remarks" class="col-12 col-form-label required-label">
									Cancel Remarks
								</label>
								<div class="col-12">
									<textarea id="cancel_remarks" class="form-control @error('cancel_remarks') is-invalid @enderror" name="cancel_remarks" rows="3" placeholder="Write your remarks here..."></textarea>
								</div>
							</div>
						</div>
						<div class="modal-footer">
							<button type="button" class="btn btn-black" data-bs-dismiss="modal">Close</button>
							<button type="submit" class="ms-3 btn btn-danger btn text-white " id="btn_cancel_job" value={{$user->hasPermissionToManageQuotation()? 'approve_cancel_job': 'cancel_job'}} name="action">
								Cancel Job
							</button>
							<button type="submit" class="ms-3 btn btn-purple " id="btn_revision" value="revision" name="action">
								Revision
							</button>
						</div>
					</form>
				</div>
			</div>
		</div><!-- Modal Cancel Remark  -->
	@endif
@endpush
@push('js')
<script type="text/javascript">
    //Create Sweet Alert when submitting quotation
    $('.btn-form-action').on('click', function(e){ 
        e.preventDefault();

        var quotation_id = $("#quotation_id").val();

        var button = $(this); // get the button that is clicked
        var action = $(this).val(); // take the value attribute for that button

        button.data('inner-text', button.html());
        button.prop('disabled', true);
        button.html('<i class="fas fa-circle-notch fa-spin" style="margin-right: 5px;"></i> Loading');

        Swal.fire({
            title: 'Are you sure?',
            text: "You want to perform this action?",
            icon: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#3085d6',
            cancelButtonColor: '#d33',
            confirmButtonText: 'Yes I am sure!'
        }).then((result) => {
            if (result.isConfirmed) {
                $.ajax({
                    url: '{{ route("quotation-change-status")}}',
                    method: 'POST',
                    headers: {'X-CSRF-Token': $('meta[name="csrf-token"]').attr('content')},
                    data: { 'quotation_id' : quotation_id, 'action' : action}, 
                    success: function(response){
                        window.location.href = response.url;

                    }, error: function (xhr, textStatus, errorThrown) {
                        var response_json = xhr.responseJSON;

                        if(response_json.quotation_not_found == true){
                            console.log(response_json, xhr)
                        }
                        button.prop('disabled', false);
                        button.html(button.data('inner-text'));
                    }
                })
            }
            else{
                button.prop('disabled', false);
                button.html(button.data('inner-text'));
            }
        });
    });

    // change the modal form appearance based on which button is clicked
    $('.btn-change-modal-text').on('click', function(e) {
        e.preventDefault();
        var action = $(this).data('action');// take the value attribute for that button

        if (action == 'revision'){
            $('#btn_cancel_job').addClass('d-none');
            $('#btn_revision').removeClass('d-none');
            $('#cancel_modal_title').text('Revision Details');
            $('#cancel_modal_remarks').text('Revision Remarks');
        }else if (action == 'cancel'){
            $('#btn_cancel_job').removeClass('d-none');
            $('#btn_revision').addClass('d-none');
            $('#cancel_modal_title').text('Cancel Job Details');
            $('#cancel_modal_remarks').text('Cancel Remarks');
        }
    }); 

		// submitting the modal form for cancel remarks
    $('#modalForm').on('submit', function(e) {
        e.preventDefault();

        var quotation_id = $("#quotation_id").val();
        var cancel_remarks = $("#cancel_remarks").val();

        var action_url = $(this).attr('action');
        var actionValue = $(this).find('button[type="submit"]').filter(':focus').val(); // get the value for the clicked button
        var button = $(this).find('button[type="submit"]').filter(':focus'); // get the clicked button
        
        button.data('inner-text', button.html());
        button.prop('disabled', true);
        button.html('<i class="fas fa-circle-notch fa-spin" style="margin-right: 5px;"></i> Loading');

        $.ajax({
            url: action_url,
            type: 'POST',
            headers: {'X-CSRF-Token': $('meta[name="csrf-token"]').attr('content')},
            data: {'quotation_id' : quotation_id , 'cancel_remarks' : cancel_remarks, "action" : actionValue},
            success: function(response) {
                window.location.href = response.url;
            },
            error: function(xhr, textStatus, errorThrown) {
                var response_json = xhr.responseJSON;

                if(response_json.hasOwnProperty('quotation_not_found') && response_json.quotation_not_found == true){
                    window.location.href = response_json.url;
                }

                button.prop('disabled', false);
                button.html(button.data('inner-text'));

                // clear previous message first (if any)
                $('.invalid-feedback').remove();
                $('.is-invalid').removeClass('is-invalid');

                // display the error message
                var error = JSON.parse(xhr.responseText);
                $('#cancel_remarks').addClass('is-invalid');
                $('#cancel_remarks').after('<div class="invalid-feedback"><strong>' + error.cancel_remarks[0] + '</strong></div>');
            }
        });
    });
</script>
@endpush