@extends('layouts.app') 
@section('title', 'Account Management')
@section('breadcrumb')
    <style type="text/css">
        .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>
    <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.account') }}">Account Management</a></li>
        <li class="breadcrumb-item active">Active Services</li>
    </ol>
@endsection
@section('content')

   

<div class="row">
    <div class="col-md-12">
        <div class="card " >
            <div class="card-header" style="font-size:24px;">
                <center>Email The Client a Contact Agreement </center>
                <div class="float-right"></div>
                 </div>
                 <form class="form-horizontal" action="" method="post">
                  @csrf
                  <div class="card-body">
                        <div class="fluid-container" >
                            <div class="row">
                                <div class="col-sm-6 col-md-6 col-lg-6 col-xl-6">
                                    
                                    <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">
                                                Template
                                            </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>
                                                </select>
                                            </div>
                                        </div>
                                        <div class="row mt-3">
                                            <div class="col-sm-4 col-md-4 col-lg-4 col-xl-4">
                                                E-Mail
                                            </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">
                                               Sender
                                            </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">
                                                Subject
                                            </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>
                                                </select>
                                            </div>
                                        </div>
                                        <div class="row mt-3">
                                            <div class="col-sm-4 col-md-4 col-lg-4 col-xl-4">
                                                Text
                                            </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">
                                                Attached document
                                            </div>
                                            <div class="col-sm-8 col-md-8 col-lg-8 col-xl-8">
                                                <div class="row">

                                                    <div class="col-md-1">
                                                        <input type="checkbox"  name="fav_language" value="HTML">
                                                         <input type="checkbox"  name="fav_language" value="HTML">
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                         </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://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous"> 
    <script type="text/javascript">
        $(".addBackGround1").css({"background-color": "crimson", "color": "white","text-decoration":"none"});
        function changeColor(id)
        {
            $(".removeBackGround").css({"background-color": "#D0D0D0", "color": "black","text-decoration":"none"});
            $(".addBackGround"+id).css({"background-color": "crimson", "color": "white","text-decoration":"none"});
        }
        $(function(){
            $('.selectpicker').selectpicker();
        });

        $("#showHideAlternativeAddress").hide();
        
        $("#useAlternateAddress").change(function(){
            if($(this).prop('checked'))
            {
                $("#showHideAlternativeAddress").show();
            }
            else
            {
                $("#showHideAlternativeAddress").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--;
        }
        function getFormName()
        {
            if($(".getFormName").val()=='Internet')
            {
                window.location.href = "{{url('/addInternetService')}}";
            }
            if($(".getFormName").val()=='Iptv')
            {
                window.location.href = "{{url('/iptv')}}";
            }
             if($(".getFormName").val()=='Catv')
            {
                window.location.href = "{{url('/catv')}}";
            }
            if($(".getFormName").val()=='Dvbc')
            {
                window.location.href = "{{url('/dvbc')}}";
            }
             if($(".getFormName").val()=='Voip')
            {
                window.location.href = "{{url('/voip')}}";
            }
            if($(".getFormName").val()=='Service')
            {
                window.location.href = "{{url('/addservice')}}";
            }
             if($(".getFormName").val()=='Mobile')
            {
                window.location.href = "{{url('/mobile')}}";
            }
        }
         
    </script>
@endsection
