@extends('front.layouts.main')

@section('title') Consultant - My Inquiries @endsection

@section('content')

<main class="inquires-page">
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-lg-10">
                <div class="main-content">
                    <div class="box white">
                        <!-- Nav tabs -->
                        <ul class="nav nav-tabs" role="tablist">
                            <li class="nav-item">
                                <a class="nav-link active" data-toggle="tab" href="#new-inquiries">New Inquiries</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" data-toggle="tab" href="#accepted-inquiries">Accepted Inquiries</a>
                            </li>
                        </ul>

                        <!-- Tab panes -->
                        <div class="tab-content">
                            <div id="new-inquiries" class="tab-pane fade show active mb-0">
                                <div class="table-responsive">
                                    <table class="table mb-0">
                                        <tbody>
                                            @if(!blank($newInquiries))
                                            @foreach($newInquiries as $inquiry)
                                            <tr>
                                                <td>
                                                    <label class="control-label text-nowrap">Name</label>
                                                    <p class="display-info m-0">{{ $inquiry->inquirer->name }}</p>
                                                </td>
                                                <td>
                                                    <label class="control-label text-nowrap">City</label>
                                                    <p class="display-info m-0">{{ $inquiry->inquirer->city->name }}</p>
                                                </td>
                                                <td>
                                                    <label class="control-label text-nowrap">Expected Consulting
                                                        Date</label>
                                                    <p class="display-info m-0">{{
                                                        $inquiry->expected_consultancy_date_formatted }}</p>
                                                </td>
                                                <td>
                                                    <label class="control-label text-nowrap">Inquired On Date</label>
                                                    <p class="display-info m-0">{{ $inquiry->created_at_formatted }}</p>
                                                </td>
                                                <td class="text-right">
                                                    <a href="javascript:void(0)"
                                                        class="btn btn-transparent btnViewDetails"
                                                        data-id="{{ $inquiry->id }}">View Details</a>
                                                </td>
                                            </tr>
                                            @endforeach
                                            @else
                                            <td colspan="6">No Records Found!</td>
                                            @endif
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                            <div id="accepted-inquiries" class="tab-pane fade mb-0">
                                <div class="table-responsive">
                                    <table class="table mb-0">
                                        <tbody>
                                            @if(!blank($acceptedInquiries))
                                            @foreach($acceptedInquiries as $inquiry)
                                            <tr>
                                                <td>
                                                    <label class="control-label text-nowrap">Name</label>
                                                    <p class="display-info m-0">{{ $inquiry->inquirer->name }}</p>
                                                </td>
                                                <td>
                                                    <label class="control-label text-nowrap">City</label>
                                                    <p class="display-info m-0">{{ $inquiry->inquirer->city->name }}</p>
                                                </td>
                                                <td>
                                                    <label class="control-label text-nowrap">Expected Consulting
                                                        Date</label>
                                                    <p class="display-info m-0">{{
                                                        $inquiry->expected_consultancy_date_formatted }}</p>
                                                </td>
                                                <td>
                                                    <label class="control-label text-nowrap">Inquired On Date</label>
                                                    <p class="display-info m-0">{{ $inquiry->created_at_formatted }}</p>
                                                </td>
                                                <td class="text-right">
                                                    <a href="javascript:void(0)"
                                                        class="btn btn-transparent btnViewDetails"
                                                        data-id="{{ $inquiry->id }}">View Details</a>
                                                </td>
                                            </tr>
                                            @endforeach
                                            @else
                                            <td colspan="6">No Records Found!</td>
                                            @endif
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</main>
@endsection



@push('pageModals')
<!-- The Modal -->
<div class="modal fade" id="inquiryModal" data-backdrop="static">
    <div class="modal-dialog modal-md">
        <div class="modal-content">

            <!-- Modal Header -->
            <div class="modal-header">
                <h4 class="modal-title body-font-size">Inquiry Details<p
                        class="w-100 mb-0 mt-2 gray regular small-font-size">Once you accept the inquiry, your
                        contact details will be shared with the prospect and they will contact you for further
                        communication.</p>
                </h4>
                <button type="button" class="close" data-dismiss="modal">&times;</button>
            </div>

            <form id="frmInquiryAction" method="post" action="{{ route('consultant.inquiryAction') }}">

                @csrf
                <input type="hidden" name="inquiry_id" id="inquiry_id" value="" />

                <!-- Modal body -->
                <div class="modal-body">
                    <div class="row">
                        <div class="col-6">
                            <label class="control-label">Full Name</label>
                            <p class="display-info" id="name">Devin Bass</p>
                        </div>
                        <div class="col-sm-6">
                            <label class="control-label">Company/Organisation</label>
                            <p class="display-info" id="company">Bell Ltd</p>
                        </div>
                        <div class="col-sm-6">
                            <label class="control-label">Position/Designation</label>
                            <p class="display-info" id="position">Director</p>
                        </div>
                        <div class="col-sm-6">
                            <label class="control-label">Location</label>
                            <p class="display-info" id="city">South Darius</p>
                        </div>
                        <div class="col-sm-6">
                            <label class="control-label">Expected Consulting Date</label>
                            <p class="display-info" id="expected_consulting_date">15 Dec 2020</p>
                        </div>
                        <div class="col-12">
                            <label class="control-label">Message</label>
                            <p class="display-info" id="message" style="word-break:normal !important;">Any long message from the user will be displayed here
                            </p>
                        </div>
                        @if(!Auth::user()->consultant_profile->profile_disabled_at && $lastPlanRemainingDays)
                        <div class="col-12 actionBlock">
                            <div class="form-group">
                                <label class="control-label">Action</label><br />
                                <div class="custom-radio">
                                    <input type="radio" class="btnAction" id="accept" name="action" value="accept"
                                        checked="checked">
                                    <label for="accept">Accept</label>
                                </div>
                                <div class="custom-control custom-radio">
                                    <input type="radio" class="btnAction" id="reject" name="action" value="reject">
                                    <label for="reject">Reject</label>
                                </div>
                            </div>
                        </div>
                        <div class="col-12 reasonBlock">
                            <label class="control-label">Rejection Reason</label>
                            <textarea name="reason" id="reason" rows="3" class="form-control"></textarea>
                        </div>
                        @endif
                    </div>
                </div>

                <!-- Modal footer -->
                <div class="modal-footer justify-content-center">
                    @if(!Auth::user()->consultant_profile->profile_disabled_at && $lastPlanRemainingDays)
                    <input type="submit" class="btn btn-transparent m-1 btnSubmit" value="Submit" />
                    @else
                    <input type="button" class="btn btn-transparent m-1" value="Close" data-dismiss="modal" />
                    @endif
                </div>

            </form>

        </div>
    </div>
</div>
@endpush

@push('pageJs')

<script>
    $(document).ready(function() {

        $('.btnViewDetails').on('click', function() {

            var id = $(this).data('id');
            axios.get('{{ route("consultant.singleInquiryDetail") }}', {
                params: {
                    id: id
                }
            }).then(function(response) {

                var phone2 = response.data.inquirer.phone2 ? response.data.inquirer.phone2 :
                    '-';
                $('#inquiry_id').val(id);
                $('#name').text(response.data.inquirer.name);
                $('#company').text(response.data.inquirer.company);
                $('#city').text(response.data.inquirer.city.name);
                $('#position').text(response.data.inquirer.position);
                $('#message').text(response.data.message);
                $('#expected_consulting_date').text(response.data
                    .expected_consultancy_date_formatted);

                if (response.data.approved_at) {
                    $('.actionBlock').hide();
                    $('.reasonBlock').hide();
                    $('.modal-footer').hide();
                } else {
                    $('.actionBlock').show();
                    $('.modal-footer').show();
                    $('.btnAction').trigger('change');
                }
                hideLoder();
                $('#inquiryModal').modal('show');
            });

        });

        $('.btnAction').on('change', function() {
            if ($('.btnAction:checked').val() == 'accept') {
                $('.reasonBlock').hide();
            } else {
                $('.reasonBlock').show();
            }
        });
        $('.btnAction').trigger('change');

        $('#frmInquiryAction').on('submit', function() {
            if($(this).valid()) {
                $('.btnSubmit').addClass('disabled');
                $('.btnSubmit').val('Please Wait...');
            }
        });

        $('#frmInquiryAction').validate({
            rules: {
                reason: {
                    required: {
                        depends: function(element) {
                            console.log($('.btnAction:checked').val() == 'reject');
                            return ($('.btnAction:checked').val() == 'reject');
                        }
                    }
                }
       },
            messages: {
                reason: 'Reason is required'
            },
            ignore: [],
            errorElement: 'span',
            errorClass: 'invalid-feedback',
            errorPlacement: function(error, element) {
                error.insertAfter(element);
            },
        })


    });
</script>

@endpush