@extends('layouts.app')  
@section('title', 'Account Management')
@section('breadcrumb')
    <ol class="breadcrumb border-0 m-0 px-0 px-md-3">
        <li class="breadcrumb-item">Home</li>
        <li class="breadcrumb-item"><a href="{{ route('admin.dashboard') }}">Admin</a></li>
        <li class="breadcrumb-item"><a href="{{ route('admin.customer') }}">Account Management</a></li>
        <li class="breadcrumb-item active">Add Internet Service</li>
    </ol>
@endsection  
<style>
table, th, td{
  border:1px solid #ddd;
  
}
.bootstrap-select.btn-group .btn .caret {
    
    visibility: hidden;
}
.bootstrap-select:not([class*=col-]):not([class*=form-control]):not(.input-group-btn) {
    width: 220px;
}
html:not([dir="rtl"]) .form-check-input {
    margin-left: -1.25rem;
}

input {
  width: 66%;
  border-radius: 26px;
  border: 1px solid #ada9a9;
  padding: 1% 6%;
  margin: 1% 1%;
  background-image: url(https://www.pngarea.com/pngm/109/1164446_searchicon-png-search-icon-png-download.png);
  background-size: contain;
  background-repeat: no-repeat;
  outline: 0;
  background-position: 12px;
  background-size: 16px;
}
.textStyle {
            border: 1px solid #EDEADE;
            padding: 10px;
        }
        .headerLinkLeft {
            line-height: 44px;
            
            padding: 14px;
            color: black;
            text-decoration: none;
            margin: -2px;
        }
        .headerLinkLeft:hover{
            text-decoration: none;
            background-color: crimson;
            color: white;
        }
        .testColorCrimson{
            color: crimson;
            font-weight: bold;
        }

</style>
 @section('content')
 




    <div class="row ">
        <div class="col-12 d-flex justify-content-center">
            <div class="card ">
                <div class="card-header text-center"> <h2><b>Create New Contract</b></h2></div>
                <form class="form-horizontal" action="" method="#">
                    @csrf
                    <div class="card-body ">
                        <div class="fluid-container  " >
                            <div class="row">
                                <div class="col-sm-12">
                                    <div id="input1" style="border: 1px solid #EDEADE;padding: 20px;">
                                        <div class="row">
                                            <div class="col-sm-4 col-md-4 col-lg-4 col-xl-4">
                                                Name
                                            </div>
                                            <div class="col-sm-8 col-md-8 col-lg-8 col-xl-8">
                                                <input type="text" class="form-control" name="">
                                            </div>
                                        </div>
                                        <div class="row mt-3">
                                            <div class="col-sm-4 col-md-4 col-lg-4 col-xl-4">
                                                Descrietion
                                            </div>
                                            <div class="col-sm-8 col-md-8 col-lg-8 col-xl-8">
                                                <input type="date" class="form-control" name="">
                                            </div>
                                        </div>
                                        <div class="row mt-3">
                                            <div class="col-sm-4 col-md-4 col-lg-4 col-xl-4">
                                                issued on
                                            </div>
                                            <div class="col-sm-8 col-md-8 col-lg-8 col-xl-8">
                                                <input type="date" class="form-control" name="">
                                            </div>
                                        </div>
                                        <div class="row mt-3">
                                            <div class="col-sm-4 col-md-4 col-lg-4 col-xl-4">
                                                Contract Type
                                            </div>
                                            <div class="col-sm-8 col-md-8 col-lg-8 col-xl-8">
                                                <select class="form-control selectpicker" id="select-country" data-live-search="true" style="line-height: 14px;padding: 7px;margin-top: 4PX;text-align: left;">
                                                  <option> - </option>
                                                    <option> Not invoiced </option>
                                                    <option> Monthly </option>
                                                    <option> Bimonthly </option>
                                                    <option> Quarterly </option>
                                                    <option> Half-yearly </option>
                                                    <option> Yearly </option>
                                                </select>
                                            </div>
                                        </div>
                                        <div class="row mt-3">
                                            <div class="col-sm-4 col-md-4 col-lg-4 col-xl-4">
                                                Template 
                                            </div>
                                            <div class="col-sm-8 col-md-8 col-lg-8 col-xl-8">
                                                <input type="text" class="form-control" value="1">
                                            </div>
                                        </div>
                                        <div class="row mt-3">
                                            <div class="col-sm-4 col-md-4 col-lg-4 col-xl-4">
                                                Service
                                            </div>
                                            <div class="col-sm-8 col-md-8 col-lg-8 col-xl-8">
                                                <select class="form-control selectpicker" id="select-country" data-live-search="true" style="line-height: 14px;padding: 7px;margin-top: 4PX;text-align: left;">
                                                  <option> - </option>
                                                    <option> Not invoiced </option>
                                                    <option> Monthly </option>
                                                    <option> Bimonthly </option>
                                                    <option> Quarterly </option>
                                                    <option> Half-yearly </option>
                                                    <option> Yearly </option>
                                                </select>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="card-footer">
                        <div  style="justify-content: center;align-items: center;display: flex;">

                            <button class="btn btn-sm btn-success" type="submit" style="margin:5px;"> Save </button>

                            <a href="{{url('contracts')}}"class="btn btn-sm btn-light"style="margin:5px;"> Back </a>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.3/js/bootstrap-select.min.js"></script>
    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.3/css/bootstrap-select.min.css" />
    <link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <script type="text/javascript">
       

         $("#ContractNote1").hide();
         $("#ContractNote").change(function(){
            if($(this).prop('checked'))
            {
                $("#ContractNote1").show();
            }
            else
            {
                $("#ContractNote1").hide();
            }
        });




        $(document).ready(function(){
            $(".caret").addClass("d-none");
        });
        $("#hide").hide();
        $("#hide1").hide();
        $("#ClientMonitoring").change(function(){
            if($(this).prop('checked'))
            {
                $("#hide").show();
                $("#hide1").show();
            }
            else
            {
                $("#hide").hide();
                $("#hide1").hide();
            }
        });
 

        $("#ProFil").hide();
        $("#ProFil1").hide();
         $("#SusPendService").change(function(){
            if($(this).prop('checked'))
            {
                $("#ProFil").show();
                $("#ProFil1").show();
            }
            else
            {
                $("#ProFil").hide();
                $("#ProFil1").hide();
            }
        });


        $(function(){
            $('.selectpicker').selectpicker();
        });

        $("#installationAddressField").hide();
        
        $("#hideShowInstallationAddressField").change(function(){
            if($(this).prop('checked'))
            {
                $("#installationAddressField").show();
            }
            else
            {
                $("#installationAddressField").hide();
            }
        });
        let inputBoxId = 0;
        function plusInputBox()
        {
            inputBoxId++;
            $("#showNewInputBox").append('<tr id="inputBoxRmId'+inputBoxId+'"><td><input type="text" class="form-control"></td><td><input type="text" class="form-control"></td><td><input type="text" class="form-control"></td><td><input type="text" class="form-control"></td><td></td></tr>');
        }
        function minusInputBox()
        {
            $("#inputBoxRmId"+inputBoxId).remove();
            inputBoxId--;
        }

    
</script>
@endsection