@extends('layouts.master')
@section('title') Instagram Account Settings @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;
}
</style>
                    @if (Session::get('error'))
                        <div class="alert alert-danger alert-block">
                            <button type="button" class="close" data-dismiss="alert">×</button>
                                <strong>{{ Session::get('error') }}</strong>
                        </div>
                    @endif
                    @if (Session::get('success'))
                        <div class="alert alert-success alert-block">
                            <button type="button" class="close" data-dismiss="alert">×</button>
                                <strong>{{ Session::get('success') }}</strong>
                        </div>
                    @endif
<div class="row">
    <div class="col-12">
        <div class="card mb-2">
          <div class="card-body">
   <h4 class="card-title mb-4">Instagram Account Setting</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">Instagram 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>
         </select>
         <input type="hidden" name="page_name"  id="page_name" value="">
       </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");
        $("#page_name").val(name);
      });
    });


</script>
@endsection