@extends('dashboard.base')

@section('content')
<style>
    .hidden{
        display: none;
    }
</style>

<div class="container-fluid">
    <div class="fade-in">
        <div class="row">
            <div class="col-sm-12">
                <div class="card">
                    <div class="card-header">
                        <h4>List Of P@SHA MEMBERS</h4>
                         <p>You have <a href="{{url('/meetings')}}"><strong>{{$meeting}} New</strong></a> meeting requests</p>
                    </div>
                    <div class="card-body">
                        @if(Session::has('message'))
                            <div class="alert alert-success" role="alert">{{ Session::get('message') }}</div>
                        @endif
                        @if($errors->any())
                        <div class="alert alert-warning alert-dismissible fade show" role="alert">
                            <ul>
                                @foreach($errors->all() as $error)
                                <li>{{ $error }}</li>
                                @endforeach
                            </ul>
                            <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                        @endif
                        <h4>Search Criteria</h4>
                        <div class="row companies_filters_div">
                            <div class="col-md-4 p-1">
                                <div class="input-group">
                                    <input type="text" class="form-control ml-2" name="keyword_companies" id="keyword_companies"
                                        placeholder="Enter Keyword" aria-label="Enter Keyword"
                                        aria-describedby="button-addon2">
                                </div>
                            </div>
                            <hr>
                            <div class="col-md-4 p-1">
                                <div class="input-group">
                                    <select class="form-control mr-2" name="sector_companies" id="sector_companies">
                                        <option value="">All Sectors...</option>
                                         @foreach ($industries as $industry)
                                        <option >{{ $industry }}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                        </div>
                        <br>
                        <table id="table_id" class="display table-responsive">
                            <thead>
                                <tr>
                                    <th>#</th>
                                    <th>Company Name</th>
                                    <th>Sector</th>
                                    <!--<th>Booth Number</th>-->
                                    <th>Website</th>
                                    <th>Contact Name</th>
                                    <th>Phone</th>
                                    <th>Email</th>
                                    <th>Country</th>
                                    <th></th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach($exporters as $exporter)
                                <tr>
                                    <td>
                                        {{ $loop->iteration }}
                                    </td>
                                    <td>
                                        {{ $exporter->company_name }}
                                    </td>
                                    <td>
                                        {{ $exporter->industry }}
                                    </td>
                                    <!--   <td>-->
                                    <!--    {{ $exporter->booth_number }}-->
                                    <!--</td>-->
                                    <td>
                                        @if($exporter->website != "N/A")
                                        <a href="http://{{ $exporter->website }}" target="_blank">Visit</a>
                                        @endif
                                    </td>
                                    <td>
                                        {{ $exporter->contact_name }}
                                    </td>
                                    <td>
                                        {{ $exporter->phone }}
                                    </td>
                                    <td>
                                        {{ $exporter->email }}
                                    </td>
                                    <td>
                                        {{ $exporter->country }}
                                    </td>
                                    {{-- <td>
                                    {{ $exporter->description }}
                                    </td> --}}
                                    <td>
                                        <a href="{{ route('exporters.show', $exporter->id ) }}"
                                            class="btn btn-primary m-1">About</a>

                                        @if(str_contains(Auth::user()->menuroles, "admin"))
                                        {{-- <form action="{{ route('exporters.destroy', $exporter->id ) }}" method="POST">
                                            @method('DELETE')
                                            @csrf
                                            <button class="btn btn-danger">Delete</button>
                                        </form> --}}
                                        @else
                                        <button class="btn btn-success btn-sm contact_company_bt m-1" data-toggle="modal"
                                            data-target="#meeting_modal" data-id="{{ $exporter->id }}"
                                            data-email="{{ $exporter->email }}" data-company="{{ $exporter->company_name }}"  data-booth_number="{{ $exporter->booth_number }}">Meeting Request</button>
                                        @endif
                                    </td>
                                </tr>
                                @endforeach
                            </tbody>
                        </table>

                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</div>

{{-- Modal contact --}}
<div class="modal fade" id="meeting_modal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
    aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">Meeting Request - <span id="company_title"></span></h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">

                <h3>Send request for Meeting</h3>
                <form action="{{ route('meeting_request') }}" method="POST">
                    @csrf
                    <div class="row">
                        <input type="hidden" name="buyer_id" id="buyer_id" value="{{ Auth::user()->buyer_exporter_id }}">
                        <input type="hidden" name="requested_by" id="requested_by" value="{{ Auth::user()->buyer_exporter_id }}">
                        <input type="hidden" name="exporter_id" id="exporter_id">
                        <input type="hidden" name="exporter_email" id="exporter_email">
                        <div class="col form-group">
                            <label for="date">Select Date</label>
                            <select class="form-control" id="date" name="date" required>
                                <option value=" ">Select</option>
                                <!--<option value="2022-12-07">07-December-2022</option>-->
                                <!--<option value="2022-12-08">08-December-2022</option>-->
                                <!--<option value="2022-12-09">09-December-2022</option>-->
                                <option value="2022-12-10">10-December-2022</option>
                                <!--<option value="2022-12-11">11-December-2022</option>-->
                            </select>
                        </div>
                        <div class="col form-group">
                            <label for="time">Select Timeslot</label>
                            <select class="form-control" id="time" name="time" required>
                                <option value="">Select Date First...</option>
                            </select>
                        </div>
                    </div>

                    <hr>
                    <h3>Meeting Location</h3>
                    <div class="row">
                        <div class="col form-group">
                            <label for="schedule_date">Select Location</label>
                            <select class="form-control" name="location" id="location" required>
                                <option value="">Select</option>
                                <option>Shamadan Hall, Serena Hotel</option>
                                <option >Table 01</option>
                                <option >Table 02</option>
                                <option >Table 03</option>
                                <option >Table 04</option>
                                <option >Table 05</option>
                                <option >Table 06</option>
                                <option >Table 07</option>
                                <option >Table 08</option>
                                <option >Table 09</option>
                                <option >Table 10</option>
                               
                                <option>Other</option>
                            </select>
                        </div>
                    </div>

                    <div class="form-group">
                        <input type="text" class="form-control hidden" name="other_location" id="other_location" placeholder="Please Enter Location..." />
                    </div>
                    <div class="form-group">
                        <textarea class="form-control" name="message" id="message" rows="5"
                            placeholder="Message"></textarea>
                    </div>
                    <div class="text-center"><button type="submit" class="btn btn-primary">Send Meeting Request</button>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

@endsection

@section('javascript')
<script>
  (function() {
        // all your code here
        $('.contact_company_bt').on('click', function() {
            var companyName = $(this).data('company');
            var companyId = $(this).data('id');
            var companyEmail = $(this).data('email');
            var companyBothNo = $(this).data('booth_number');
            //get timeslots
            $('#date').val(" ");
            $('#time').empty();
            $('#time').append($("<option />").val("").text("Select Date First"));

            $('#company_title').text(companyName);
            $('#exporter_id').val(companyId);
            $('#exporter_email').val(companyEmail);
            $('#location option').each(function() {
                $(this).remove();
            });
            $('#location').append($('<option>', {
                value: 'Shamadan Hall, Serena Hotel',
                text: 'Shamadan Hall, Serena Hotel'
            }));
            $('#location').append($('<option>', {
                value: 'Table 01',
                text: 'Table 01 '
            }));
            $('#location').append($('<option>', {
                value: 'Table 02',
                text: 'Table 02'
            }));
            $('#location').append($('<option>', {
                value: 'Table 03',
                text: 'Table 03'
            }));
            $('#location').append($('<option>', {
                value: 'Table 04',
                text: 'Table 04'
            }));
            $('#location').append($('<option>', {
                value: 'Table 05',
                text: 'Table 05'
            }));
            $('#location').append($('<option>', {
                value: 'Table 06',
                text: 'Table 06'
            }));
            $('#location').append($('<option>', {
                value: 'Table 07',
                text: 'Table 07'
            }));
            $('#location').append($('<option>', {
                value: 'Table 08',
                text: 'Table 08'
            }));
            $('#location').append($('<option>', {
                value: 'Table 09',
                text: 'Table 09'
            }));
            $('#location').append($('<option>', {
                value: 'Table 10',
                text: 'Table 10'
            }));
            $('#location').append($('<option>', {
                value: 'Other',
                text: 'Other',
            }));
        });

        $('#location').on('change', function () {
            var location = $(this).val();
            if (location == "Other") {
                $('#other_location').slideDown();
            }else{
                $('#other_location').slideUp();
            }
        });

    })();
    $(document).ready(function () {
        var companiesTable = $('#table_id').DataTable({
            columnDefs: [{
                    targets: 2,
                    className: 'dt-body-center'
                },
                {
                    targets: 3,
                    className: 'dt-body-center'
                }
            ]
        });


        // Search companies

        $('#keyword_companies').on('keyup',function (e) {
            e.preventDefault();
            var keyword = $(this).val();
            companiesTable.search(keyword);
            companiesTable.draw();
        });

        $('#sector_companies').change(function (e) {
            e.preventDefault();
            var sector = $(this).val();
            companiesTable.column(2).search(sector);
            companiesTable.draw();
        });
    });

</script>

<meta name="csrf-token" content="{{ csrf_token() }}" />
<script>
    $(document).ready(function(){
        $('#date').on('change', function (e) {
            e.preventDefault();
            console.log('good');
            //get input field values
            var date = $(this).val();
            var exporter_id = $('#exporter_id').val();
             var CSRF_TOKEN = $('meta[name="csrf-token"]').attr('content');
             $.ajax({
                    type: 'post',
                    url: "{{ route('available_time_slots') }}",
                    dataType: 'json',
                    data: {_token: CSRF_TOKEN, exporter_id:exporter_id, date: date},
                    beforeSend: function() {
                        // $(this).addClass('bg-secondary');
                        // $('.spinner-border').show();
                    },
                    complete: function() {
                        // $(this).removeClass('bg-secondary');
                    },
                    success: function(data)
                    {
                        console.log(data);
                        $('#time').empty();
                        $.each(data, function(index) {
                            $('#time').append($("<option />").val(this).text(this));
                        });

                    }
                });
        });
    })
</script>

@endsection