@extends('dashboard.base')

@section('css')
<style>
    .visits-info-24,
    .visits-info-25,
    .visits-info {
        display: none;
    }
</style>
@endsection

@section('content')
<div class="container-fluid">
    <div class="fade-in">
        <div class="row">
            <div class="col-md-11">
                <div class="portlet light bordered card card-body">
                    <div class="portlet-title">
                        <div class="caption font-red-sunglo">
                            <i class="icon-settings font-red-sunglo"></i>
                            <span class="caption-subject bold uppercase" style="font-weight: bold;font-size:16px;">
                                Visit Form</span>
                            @if(Session::has('message'))
                            <div class="alert alert-success" role="alert">{{ Session::get('message') }}</div>
                            @endif
                        </div>

                        <div class="portlet-body form">
                            <form action="{{ route('exporters_visits') }}" method="post" role="form">
                                @csrf
                                <div class="form-body">
                                    <div class="form-group">
                                        <label for="sector">All Sector</label>
                                        <select class="form-control mr-2" name="sector" id="sector">
                                            <option value="">All Sectors...</option>
                                            @foreach ($industries as $industry)
                                            <option>{{ $industry }}</option>
                                            @endforeach
                                        </select>
                                    </div>

                                    <div class="form-group">
                                        <label for="exporter">Select Exhibitor</label>
                                        <select class="form-control" name="exporter" id="exporter" required>
                                            <option value="">Select Exhibitors....</option>
                                            @foreach ($exporters as $exporter)
                                            <option value="{{ $exporter->id }}">{{ $exporter->company_name }}</option>
                                            @endforeach
                                        </select>
                                    </div>

                                    <div class="card-body visits-info">
                                        <h3 class="card-subtitle mb-3 text-success"><span id="data_found"></span></h3>
                                        <div class="visits-info-24">
                                            <h6 class="card-subtitle mb-2">24-November-2021 Visits: <span id="d1_visits"></span></h6>
                                            <h6 class="card-subtitle mb-2">24-November-2021 Leads: <span id="d1_leads"></span></h6>
                                            <h6 class="card-subtitle mb-2">24-November-2021 Est. Business: <span id="d1_amount"></span>$</h6>
                                        </div>
                                        <div class="visits-info-25">
                                            <br>
                                            <h6 class="card-subtitle mb-2">25-November-2021 Visits: <span id="d2_visits"></span></h6>
                                            <h6 class="card-subtitle mb-2">25-November-2021 Leads: <span id="d2_leads"></span></h6>
                                            <h6 class="card-subtitle mb-2">25-November-2021 Est. Business: <span id="d2_amount"></span>$</h6>
                                        </div>
                                    </div>

                                    <!-- <div class="form-group">
                                        <label for="date">Date</label>
                                        <select class="form-control" name="date" id="date" required>
                                            <option value="">Select</option>
                                            <option value="2021-11-24">24-November-2021</option>
                                            <option value="2021-11-25">25-November-2021</option>
                                        </select>
                                    </div> -->
                                    <!-- 
                                    <div class="form-group">
                                        <label for="visits">Total Meetings</label>
                                        <input class="form-control" type="number" name="visits" id="visits" required>
                                    </div>
                                    <div class="form-group">
                                        <label for="leads">Total Leads</label>
                                        <input class="form-control" type="number" name="leads" id="leads" required>
                                    </div>
                                    <div class="form-group">
                                        <label for="amount">Estimated Business Value (USD)</label>
                                        <input class="form-control" type="number" name="amount" id="amount">
                                    </div> -->
                                    <div class="form-group">
                                        <label for="visits">Number of visitors received during exhibition</label>
                                        <input class="form-control" type="number" name="visits" id="visits" required>
                                    </div>
                                    <div class="form-group">
                                        <label for="leads">Number of companies that showed interest</label>
                                        <input class="form-control" type="number" name="leads" id="leads" required>
                                    </div>
                                    <div class="form-group">
                                        <label for="orders">Number of orders booked</label>
                                        <input class="form-control" type="number" name="orders" id="orders" required>
                                    </div>
                                    <div class="form-group">
                                        <label for="amount">Approximate value of orders booked (USD)</label>
                                        <input class="form-control" type="number" name="amount" id="amount">
                                    </div>
                                    <label for="portal_feedback">How helpful did you find B2B Portal in connecting with potential customers?</label>
                                    <div class="form-group text-center">
                                        <div class="btn-group btn-group-toggle" data-toggle="buttons">
                                            <label class="btn btn-info active">
                                                <input type="radio" name="portal_feedback" id="option1" value="Very Helpful" checked> Very Helpful
                                            </label>
                                            <label class="btn btn-info  ml-5">
                                                <input type="radio" name="portal_feedback" id="option2" value="Somewhat Helpful"> Somewhat Helpful
                                            </label>
                                            <label class="btn btn-info ml-5">
                                                <input type="radio" name="portal_feedback" id="option3" value="Not Helpful"> Not Helpful
                                            </label>
                                        </div>
                                    </div>
                                    <label for="portal_feedback">Details of companies that showed interest:</label>
                                    <table class="table table-responsive">
                                        <thead class="thead-dark">
                                            <tr>
                                                <th scope="col">Company Name</th>
                                                <th scope="col">Country</th>
                                                <th scope="col">Nature of Enquiry</th>
                                                <th scope="col">Orders Booked</th>
                                                <th scope="col"></th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <tr>
                                                <td>
                                                    <input type="text" name="companies[]">
                                                </td>
                                                <td>
                                                    <input type="text" name="countries[]">
                                                </td>
                                                <td>
                                                    <input type="text" name="enquiries[]">
                                                </td>
                                                <td>
                                                    <input type="number" name="orders_booked[]">
                                                </td>
                                                <td>
                                                    <button type="button" class="remove-row"><i class="cil-trash"></i></button>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>
                                                    <input type="text" name="companies[]">
                                                </td>
                                                <td>
                                                    <input type="text" name="countries[]">
                                                </td>
                                                <td>
                                                    <input type="text" name="enquiries[]">
                                                </td>
                                                <td>
                                                    <input type="number" name="orders_booked[]">
                                                </td>
                                                <td>
                                                    <button type="button" class="remove-row"><i class="cil-trash"></i></button>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>
                                                    <input type="text" name="companies[]">
                                                </td>
                                                <td>
                                                    <input type="text" name="countries[]">
                                                </td>
                                                <td>
                                                    <input type="text" name="enquiries[]">
                                                </td>
                                                <td>
                                                    <input type="number" name="orders_booked[]">
                                                </td>
                                                <td>
                                                    <button type="button" class="remove-row"><i class="cil-trash"></i></button>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>
                                                    <input type="text" name="companies[]">
                                                </td>
                                                <td>
                                                    <input type="text" name="countries[]">
                                                </td>
                                                <td>
                                                    <input type="text" name="enquiries[]">
                                                </td>
                                                <td>
                                                    <input type="number" name="orders_booked[]">
                                                </td>
                                                <td>
                                                    <button type="button" class="remove-row"><i class="cil-trash"></i></button>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>
                                                    <input type="text" name="companies[]">
                                                </td>
                                                <td>
                                                    <input type="text" name="countries[]">
                                                </td>
                                                <td>
                                                    <input type="text" name="enquiries[]">
                                                </td>
                                                <td>
                                                    <input type="number" name="orders_booked[]">
                                                </td>
                                                <td>
                                                    <button type="button" class="remove-row"><i class="cil-trash"></i></button>
                                                </td>
                                            </tr>
                                        </tbody>
                                        <div class="box-body">
                                            <div class="button-group">
                                                <a href="javascript:void(0)" class="add-row"><i class="cil-plus"></i> Add Row</a>
                                            </div>
                                        </div>
                                    </table>
                                    <div class="form-group">
                                        <label for="his_feedback">Feedback</label>
                                        <textarea class="form-control" name="his_feedback" id="feedback" cols="30" rows="6"></textarea>
                                    </div>
                                    <div class="form-actions">
                                        <button type="submit" class="btn btn-primary">Submit</button>
                                        <button type="button" class="btn btn-primary">Cancel</button>
                                    </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</div>
</div>
@endsection
@section('javascript')

<meta name="csrf-token" content="{{ csrf_token() }}" />
<script>
    $(document).ready(function() {
        $('#sector').on('change', function(e) {
            e.preventDefault();
            //get input field values
            var sector = $(this).val();
            var CSRF_TOKEN = $('meta[name="csrf-token"]').attr('content');
            $.ajax({
                type: 'post',
                url: "{{ route('exporters_sector') }}",
                dataType: 'json',
                data: {
                    _token: CSRF_TOKEN,
                    sector: sector
                },
                beforeSend: function() {
                    $('.visits-info').slideUp();
                },
                complete: function() {

                },
                success: function(data) {
                    $('#exporter').empty();
                    $('#exporter').append($("<option />").val("").text("Select Exhibitor.."));
                    $.each(data, function(index) {
                        $('#exporter').append($("<option />").val(data[index]).text(index));
                    });
                }
            });
        });
        $('#exporter').on('change', function(e) {
            e.preventDefault();
            //get input field values
            var exporter = $(this).val();
            var CSRF_TOKEN = $('meta[name="csrf-token"]').attr('content');
            $.ajax({
                type: 'post',
                url: "{{ route('get_visits') }}",
                dataType: 'json',
                data: {
                    _token: CSRF_TOKEN,
                    exporter: exporter
                },
                beforeSend: function() {
                    $('.visits-info').slideUp();
                    $('#data_found').text("");
                },
                complete: function() {

                },
                success: function(data) {
                    console.log(data);
                    $('#d1_visits').text(data.d1_visits);
                    $('#d1_leads').text(data.d1_leads);
                    $('#d1_amount').text(data.d1_amount);
                    $('#d2_visits').text(data.d2_visits);
                    $('#d2_leads').text(data.d2_leads);
                    $('#d2_amount').text(data.d2_amount);
                    if (data.d1_visits > 0) {
                        $('#data_found').text("Visits already submitted!");
                        $('.visits-info').slideDown();
                        $('.visits-info-24').slideDown();
                    } else if (data.d1_leads > 0) {
                        $('#data_found').text("Visits already submitted!");
                        $('.visits-info').slideDown();
                        $('.visits-info-24').slideDown();
                    } else if (data.d1_amount > 0) {
                        $('#data_found').text("Visits already submitted!");
                        $('.visits-info').slideDown();
                        $('.visits-info-24').slideDown();
                    }
                    if (data.d2_visits > 0) {
                        $('#data_found').text("Visits already submitted!");
                        $('.visits-info').slideDown();
                        $('.visits-info-25').slideDown();
                    } else if (data.d2_leads > 0) {
                        $('#data_found').text("Visits already submitted!");
                        $('.visits-info').slideDown();
                        $('.visits-info-25').slideDown();
                    } else if (data.d2_amount > 0) {
                        $('#data_found').text("Visits already submitted!");
                        $('.visits-info').slideDown();
                        $('.visits-info-25').slideDown();
                    }
                }
            });
        });
    })
</script>
<script>
    $(".add-row").on('click', function() {
        var row = '<td> <input type="text" name="companies[]"></td>';
        row += '<td><input type="text" name="countries[]"></td>';
        row += '<td><input type="text" name="enquiries[]"></td>';
        row += '<td><input type="number" name="orders_booked[]"></td>';
        row += '<td><button type="button" class="remove-row"><i class="cil-trash"></i></button></td>';

        var markup = "<tr>" + row + "</tr>";
        $("table").append(markup);
    });
    $(".table").on('click', '.remove-row', function() {
        $(this).closest("tr").remove();
    });
</script>
@endsection