@extends('layouts.app')
@section('title') {{trans('headings.instagram')}} @endsection

@section('breadcrumb', Breadcrumbs::render('instagram'))
@section('content')   
<section class="card">  
  <div class="">
    <div id="append-filter-text"></div>
  </div>
  <div class="row p-2">
    <div class="col-md-12">
      <header class="card-header bold d-flex justify-content-between px-2 pt-2 pb-3">
        <div>{{trans('headings.instagram')}}</div>
        <div class="col-md-6 text-right">
          <div class="row text-right">
            <div class="col-md-12 text-right pt-1">
              <a href="{{route('instagram-create')}}" class="btn btn-sm btn-dark text-white"><i class="fa fa-plus"></i>{{trans('headings.create-new')}}</a>
            </div>
          </div>
        </div>
      </header>
    </div>
  </div>
  <div class="px-4 bg-light" id="filter-datatable-block__distributor-list">
    <div class="collapse mb-4 mt-4" id="collapse-table-filter-distributor-list">
      <div class="">
        <div class="row">
          <div class="col-md-3">
            <div class="form-group">
              <label>{{__('fields.created_by')}}</label>
              <select data-name="created by" class="form-control get-created-user" name="category_created_by">
                  <option value="">- Created by -</option>
              </select>
            </div>
          </div>
          <div class="col-md-3">
            <div class="form-group">
              <label>{{__('fields.created_at')}}</label>
              <input data-name="created at" name="category_created_at" class="datepicker form-control" placeholder="Date" />
            </div>
          </div>
        </div>
      </div>
      <div class="mt-2 text-right">
        <button data-type="datatable" data-table="distributor-list" class="btn btn-info btn-sm reset-datatable-filter">{{trans('headings.clear')}}</button>
        <button data-type="datatable" data-table="distributor-list" class="btn btn-dark btn-sm datatable-filter-find">{{trans('headings.submit')}}</button>
      </div>
    </div>
  </div>
  <x-Datatable 
    id="tbl-instagram"
    headers="{{trans('headings.image')}}"
    createUrl="instagram-create"
    filter="false"            
    create="false" 
    hiddenHeaders="{{trans('headings.created-by')}}"           
    title="{{trans('headings.instagram')}}"  
    checkbox="true"                                             
               
    >          
  </x-Datatable>
</section>   
<br>

<div class="form-group col-md-3">
  <label><h5>Bulk Action</h5></label>
</div>
<div class="form-group col-md-3">
  <label>Choose Action</label>

  {!! Form::select('submit_type',[''=>'Type','1'=>'Delete'],isset($result->submit_type) ? $result->submit_type:null, ['class' => ' form-control', 'required','id'=>'submit_type','data-name'=>'submit_type']) !!}
</div>
<div class="form-group col-md-3 text-right">
  <button id="multiple_delete" class="btn  btn-secondary"> Submit</button>
</div>
<div class="modal fade " id="myModal" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">

  <div class="modal-dialog">
    <div class="modal-content" style="width:180%">
      <div class="modal-header"><h5>Change Messenger Status</h5>
        <button type="button" class="close close-modal" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
        <h4 class="modal-title" id="myModalLabel"></h4>
      </div>
      <div class="modal-body">
      <div class="row">
        <div class="form-group col-md-4">
          <label>Select Messenger Status</label>
          {!! Form::select('messenger_status',[],isset($result->messenger_status) ? $result->messenger_status:null, ['class' => ' form-control', 'required','id'=>'messenger_status','data-name'=>'messenger_status']) !!}
        <span id="error-mes-status" style="color:red;"></span>

        </div>
        <div class="form-group col-md-4">
        <label>Messenger Status Comment</label>

          {{Form::textarea('messenger_comment', isset($result->messenger_comment)?$result->messenger_comment:null, array('class' => 'form-control','maxlength'=>200, 'rows' => 6, 'cols' => 40, 'id' => 'messenger_comment','name' => 'messenger_comment', 'placeholder' => 'Comment', 'autofocus'))}} 
        </div>
        <div class="form-group col-md-4 hidden-reason" style="display:none">
          <label>Select Messenger Status Reason</label>
          
            <select name="messenger_status_reason" id="messenger_status_reason" class ="form-control" required data-name="messenger_status_reason"></select>
            <span id="error-mes-reason" style="color:red;"></span>
        </div>
      </div>

      </div>

      <div class="modal-footer">
        <button type="button" class="btn btn-default close-modal" data-dismiss="modal">Close</button>
        <button id="change_status" class="btn btn-secondary"> Update</button>
      </div>
    </div>
  </div>
  </div>      

@endsection

@section('script')
<script src="{{asset('modules/admin/instagram/datatable.js')}}"></script>
@endsection

@section('style')
<style>
  .switch {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 34px;
  }

  .switch input { 
    opacity: 0;
    width: 0;
    height: 0;
  }

  .slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    -webkit-transition: .4s;
    transition: .4s;
  }

  .slider:before {
    position: absolute;
    content: "";
    height: 26px;
    width: 26px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    -webkit-transition: .4s;
    transition: .4s;
  }

  input:checked + .slider {
    background-color: #2196F3;
  }

  input:focus + .slider {
    box-shadow: 0 0 1px #2196F3;
  }

  input:checked + .slider:before {
    -webkit-transform: translateX(26px);
    -ms-transform: translateX(26px);
    transform: translateX(26px);
  }

  /* Rounded sliders */
  .slider.round {
    border-radius: 34px;
  }

  .slider.round:before {
    border-radius: 50%;
  }
</style>
@endsection