@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 APICTA DELEGATORS</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
                 <h4>Search Criteria</h4>
                    <div class="row buyers_filters_div">
                    <div class="col-md-4 p-1">
                    <div class="input-group">
                        <input type="text" class="form-control ml-2" name="keyword_buyers" id="keyword_buyers" 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_buyers" id="sector_buyers">
                  <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>Name</th>
                            <th>Company</th>
                            <th>Sector</th>
                            <th>Website</th>
                            <th>Email</th>
                            <th>Mobile/Whatsapp</th>
                            <th></th>
                            <th></th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($buyers as $buyers)
                            <tr>
                                <td>
                                    {{ $loop->iteration }}
                                </td>
                                <td>
                                    {{ $buyers->contact_name }}
                                </td>
                                <td>
                                    {{ $buyers->company_name }}
                                </td>
                                 <td>
                                    {{ $buyers->industry }}
                                </td>
                                 <td>
                                   <a href="{{ $buyers->website }}">{{ $buyers->website }}</a> 
                                </td>
                                <td>
                                    {{ $buyers->email }}
                                </td>
                                <td>
                                    {{ $buyers->whatsapp }}
                                </td>
                                <td>
                                    {{ $buyers->country }}
                                </td>
                                <td>
                                    <a href="{{ route('buyers.show', $buyers->id ) }}" class="btn btn-primary m-1">About</a>
                                @if (str_contains(Auth::user()->menuroles, "admin"))
                                <a href="{{ route('buyers.edit', $buyers->id ) }}" class="btn btn-primary">Edit</a>
                                @endif
                                @if (str_contains(Auth::user()->menuroles, "admin"))
                                {{-- <form action="{{ route('buyers.destroy', $buyers->id ) }}" method="POST">
                                    @method('DELETE')
                                    @csrf
                                    <button class="btn btn-danger">Delete</button>
                                </form> --}}
                               @else
                                    <button class="btn btn-success btn-sm contact_buyer_bt m-1" data-toggle="modal"
                                    data-target="#meeting_modal" data-id="{{ $buyers->id }}"
                                    data-email="{{ $buyers->email }}" data-buyer="{{ $buyers->company_name }}">Meeting Request</button>
                                @endif
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>

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

<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="buyer_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_buyer') }}" method="POST">
                    @csrf
                    <div class="row">
                        <input type="hidden" name="exporter_id" id="exporter_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="buyer_id" id="buyer_id">
                        <input type="hidden" name="buyer_email" id="buyer_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_buyer_bt').on('click', function() {
            var buyerName = $(this).data('buyer');
            var buyerId = $(this).data('id');
            var buyerEmail = $(this).data('email');

            //get timeslots
            $('#date').val(" ");
            $('#time').empty();
            $('#time').append($("<option />").val("").text("Select Date First"));

            $('#buyer_title').text(buyerName);
            $('#buyer_id').val(buyerId);
            $('#buyer_email').val(buyerEmail);
        });

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

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


        // Search buyers

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

        $('#sector_buyers').change(function (e) {
            e.preventDefault();
            var sector = $(this).val();
            buyersTable.column(3).search(sector);
            buyersTable.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 buyer_id = $('#buyer_id').val();
             var CSRF_TOKEN = $('meta[name="csrf-token"]').attr('content');
             $.ajax({
                    type: 'post',
                    url: "{{ route('available_time_slots_buyer') }}",
                    dataType: 'json',
                    data: {_token: CSRF_TOKEN, buyer_id:buyer_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