<?php 
require 'header.php';
?>
        <div class="container-fluid" width="1800px">
          <div class="card shadow mb-4">
            <?php if(isset($_SESSION['response'])) { ?>
                <div class="alert alert-<?= $_SESSION['res_type']; ?> 
                alert-dismissible text-center">
                <button class="close" type="button" data-dismiss="alert">
                &times;
                </button>
                <b class="text-center"><?=  $_SESSION['response']; ?></b>                
                </div>
              <?php  } unset($_SESSION['response']);?>
            <div class="card-header py-3">
              <h6 class="m-0 font-weight-bold text-primary">ADD NEW COUNTRY</h6>
            </div>
            <div class="card-body" id="cover" >
              <div id="cover-caption">
                <div class="container justify-content-center">
                  <div class="row text-white justify-content-center">
                      <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 mx-auto text-center form p-4">
                        <div class="px-2">
                          <form action="addCountry.php" method="post" 
                            enctype="multipart/form-data" class="justify-content-center">
                                <div class="row">
                                  <div class="col-xl-6 col-lg-6 col-md-12 col-sm-12  mx-auto text-center form">
                                      <div class="form-group">
                                          <label class="">COUNTRY NAME<span style="color: red;">*</span></label>
                                          <input type="text" class="form-control" placeholder="COUNTRY NAME" name="cname" id="cname" required="">
                                      </div>
                                  </div>
                                </div>
                                <div class="row">
                                    <div class="col-xl-6 col-lg-6 col-md-12 col-sm-12  mx-auto text-center form">
                                       <div class="form-group">
                                          <label class="">COUNTRY CODE <span style="color: red;">*</span></label>
                                          <input type="text" class="form-control" placeholder="COUNTRY CODE" name="code" id="code" required="">
                                        </div>
                                    </div>
                                </div>
                  
                          <div class="row">
                            <div class="col-xl-6 col-lg-6 col-md-12 col-sm-12  mx-auto text-center form">
                              <div class="form-group">
                                <label class="">COUNTRY PROFILE <span style="color: red;">*</span></label>
                                <input type="file" class="form-control" 
                                name="image1" id="imgInp1" required>
                                    <img id='img-upload1' 
                                       class="img-fluid float-right"/>
                              </div>
                            </div>
                          </div>
                      <button type="submit" name="add" class="btn btn-info btn-lg">Submit</button>
                  </form>
               
              </div>
                                    </div>
                                </div>
                             </div>
                        </div>
            </div>
          </div>
        </div>                        

                              
     
  <!-- Scroll to Top Button-->
  <a class="scroll-to-top rounded" href="#page-top">
    <i class="fas fa-angle-up"></i>
  </a>

  <!-- Logout Modal-->
  <div class="modal fade" id="logoutModal" 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">Ready to Leave?</h5>
          <button class="close" type="button" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">×</span>
          </button>
        </div>
        <div class="modal-body">Select "Logout" below if you are ready to end your current session.</div>
        <div class="modal-footer">
          <button class="btn btn-secondary" type="button" data-dismiss="modal">Cancel</button>
          <a class="btn btn-primary" href="logout.php">Logout</a>
        </div>
      </div>
    </div>
  </div>

  <script src="vendor/jquery/jquery.min.js"></script>
 <!--  <script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script> -->
  <script src="vendor/jquery-easing/jquery.easing.min.js"></script>
  <script src="js/sb-admin-2.min.js"></script>
  <script src="jquery-1.11.1.min.js"></script>
  <script src="vendor/chart.js/Chart.min.js"></script>
  <script src="js/demo/chart-area-demo.js"></script>
  <script src="js/demo/chart-pie-demo.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.0/js/bootstrap.bundle.min.js"></script>

  <script type="text/javascript">
    $(document).ready( function() {
      $(document).on('change', '.btn-file :file', function() {
    var input = $(this),
      label = input.val().replace(/\\/g, '/').replace(/.*\//, '');
    input.trigger('fileselect', [label]);
    });

    $('.btn-file :file').on('fileselect', function(event, label) {
        
        var input = $(this).parents('.input-group').find(':text'),
            log = label;
        
        if( input.length ) {
            input.val(log);
        } else {
            if( log ) alert(log);
        }
      
    });
    function readURL1(input) {
        if (input.files && input.files[0]) {
            var reader = new FileReader();
            reader.onload = function (e) {
                $('#img-upload1').attr('src', e.target.result);
            }
            
            reader.readAsDataURL(input.files[0]);
        }
    }

    $("#imgInp1").change(function(){
        readURL1(this);
    });   
  });

  </script>
</body>

</html>
