@extends('layouts.master')
@section('title') Facebook Pages @endsection
@section('css')
@endsection
@section('content')
@component('common-components.breadcrumb')
@slot('title')@endslot
@endcomponent
<style>
.error{
    font-weight: 500;
}
.field-icon {
  float: right;
  margin-left: -25px;
  margin-top: -25px;
  position: relative;
  margin-right: 10px;
  z-index: 2;
}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type=number] {
  -moz-appearance: textfield;
}
.success-msg,.error-msg {
    margin: 10px 0;
    padding: 10px;
    border-radius: 3px 3px 3px 3px;
  }
  .error-msg {
    color: #D8000C;
    background-color: #FFBABA;
  }
  .success-msg {
    color: #270;
    background-color: #DFF2BF;
  }
</style>

            @if (Session::get('error'))
            <div class="error-msg alert">
            <button type="button" class="close" data-dismiss="alert">×</button>
            <i class="fa fa-times-circle"></i>
            {{ Session::get('error') }}
            </div>
            @endif

            <!-- For Success Messages -->
            @if (Session::get('success'))
            <div class="success-msg alert">
            <button type="button" class="close" data-dismiss="alert">×</button>
            <i class="fa fa-check"></i>
            {{ Session::get('success') }}
            </div>
            @endif
<div class="row">
    <div class="col-12">
        <div class="card mb-2">
          <div class="card-body">
   <h4 class="card-title mb-4">Facebook Page Details</h4>
   <form name="frm1" id="frm1" class="needs-validation" method="post" enctype="multipart/form-data" action="{{route('facebook_pages_settings.store')}}" novalidate>
    @csrf

        <div class="form-group row mb-4">
       <label for="projectname" class="col-form-label col-lg-2">Facebook Pages</label>
       <div class="col-lg-10">

         {{-- <input type="text" class="form-control" name="access_token" id="access_token" placeholder="Access Token" value="{{ $data->name }}"> --}}
         <select class="form-control" name="page" id="page" aria-placeholder="Select" required>
            <option value="">Please Select page</option>
            @php $selected = "";  @endphp
                @foreach($data as $row)
            <option value="{{$row['id']}}"
                selected            data-name="{{ $row['name'] }}" data-instagram-business_account="{{ $row['instagram_id'] }}" >{{ $row['name'] }}</option>
            @endforeach
         </select>
         <input type="hidden" name="page_name"  id="page_name" value="{{ $user->page_name }}">
       </div>
     </div>

     <div class="form-group row mb-4 instagram d-none">
        <label for="projectname" class="col-form-label col-lg-2">Instagram Account</label>
        <div class="col-lg-10">

          <input type="text" class="form-control" name="instagram" id="instagram_yes" readonly>


        </div>
      </div>
      <div class="row d-none instruction">
        <div class="col-lg-2"></div>

      <div class="col-lg-10">
        <div class="card">
            <div class="card-body">
                <h5 class="font-size-15 mt-4">Instagram Account Details :</h5>
                <p class="text-muted">  If you have an instagram account please connect with facebook page.<br>
                    If doesn't have instagram account, sign up or create account with facebook.

                    </p>
                    <h5 class="font-size-12 mt-4">Kindly follow the below instruction</h5>
                <div class="text-muted mt-4">

                    <p><i class="mdi mdi-chevron-right text-primary mr-1"></i>Go to Facebook Account</p>
                    <p><i class="mdi mdi-chevron-right text-primary mr-1"></i>Click on Meta Business Suite</p>
                    <p><i class="mdi mdi-chevron-right text-primary mr-1"></i>Select Your Facebook Page</p>
                    <p><i class="mdi mdi-chevron-right text-primary mr-1"></i>Open Inbox</p>
                    <p><i class="mdi mdi-chevron-right text-primary mr-1"></i>Click On Instagram option From Menu</p>
                    <p><i class="mdi mdi-chevron-right text-primary mr-1"></i>Connect Instagram</p>
                    <p><i class="mdi mdi-chevron-right text-primary mr-1"></i>Now You can follow the procedure Instagram account creation</p>
                </div>
            </div>
        </div>
    </div>
</div>

     <div class="row justify-content-end">
        <div class="col-lg-10">
          <input type="submit" class="btn btn-primary" value="Submit">
          <a href="../admin/dashboard" class="btn btn-danger"> Back </a>
        </div>
      </div>
   </form>
 </div>
        </div>
    </div> <!-- end col -->
</div>
<!-- end row -->
@endsection
@section('script')
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.5/jquery.validate.min.js" integrity="sha512-rstIgDs0xPgmG6RX1Aba4KV5cWJbAMcvRCVmglpam9SoHZiUCyQVDdH2LPlxoHtrv17XWblE/V/PP+Tr04hbtA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.5/additional-methods.min.js" integrity="sha512-6S5LYNn3ZJCIm0f9L6BCerqFlQ4f5MwNKq+EthDXabtaJvg3TuFLhpno9pcm+5Ynm6jdA9xfpQoMz2fcjVMk9g==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script>
    $(function(){


        $("form[name='frm1']").validate({

        rules: {
            page: "required",
        },
        // Specify validation error messages
        messages: {
            page: "Please select a page",
        },
        submitHandler: function(form) {
          form.submit();
        }
      });
      $(document).on('change','#page',function(){
        var name = $('option:selected',this).data("name");
        var instagram = $('option:selected',this).data("instagram-business_account");
        if(instagram){
            $('.instagram').removeClass('d-none');
            $('#instagram_yes').val(instagram);
            $('.instruction').addClass('d-none');
        }else{
            $('.instruction').removeClass('d-none');
            $('.instagram').addClass('d-none');
        }
        $("#page_name").val(name);
      });
    });


</script>
@endsection