@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;
}
container.th{
    color: #3c4b64;
    background-color: red;
}
</style>
@section('content')
<div class="row">
    <div class="col-md-12" style="background-color:#D0D0D0;padding-left: 0px;padding-right: 6px;">
        <div class="float-left">
          <a href="javascript:void(0)" class="headerLinkLeft addBackGround1 removeBackGround" onclick="changeColor(1)">All Services</a>
          <a href="{{ route('admin.activeServices.account') }}" class="headerLinkLeft addBackGround2 removeBackGround" onclick="changeColor(2)">Internet</a>
          <a href="{{url('iptv')}}" class="headerLinkLeft addBackGround3 removeBackGround" onclick="changeColor(3)">IPTV</a>
          <a href="{{url('catv')}}" class="headerLinkLeft addBackGround4 removeBackGround" onclick="changeColor(4)">CATV</a>
          <a href="{{url('dvbc')}}" class="headerLinkLeft addBackGround5 removeBackGround" onclick="changeColor(5)">DVBC</a>
          <a href="{{url('volp')}}" class="headerLinkLeft addBackGround6 removeBackGround" onclick="changeColor(6)">VOIP</a>
          <a href="{{url('service')}}" class="headerLinkLeft addBackGround7 removeBackGround" onclick="changeColor(7)">Services</a>
          <a href="{{url('moblie')}}" class="headerLinkLeft addBackGround8 removeBackGround" onclick="changeColor(8)">Mobile</a>
      </div>
      <div class="float-right"> 
        <select class="btn btn-success align-middle getFormName" style="line-height: 14px;padding: 7px;margin-top: 4PX;" onchange="getFormName()">
            <option> + Add New Service </option>
            <option style="background-color: #D0D0D0;color: black;" value="Internet">Internet</a></option>
            <option style="background-color: #D0D0D0;color: black;" value="Iptv">IPTV</option>
            <option style="background-color: #D0D0D0;color: black;" value="Catv">CATV</option>
            <option style="background-color: #D0D0D0;color: black;" value="Dvbc">DVBC</option>
            <option style="background-color: #D0D0D0;color: black;" value="Voip">VOIP</option>
            <option style="background-color: #D0D0D0;color: black;" value="Service">Services</a></option>

            <!-- <option style="background-color: #D0D0D0;color: black;"><a href="{{url('/addservice')}}">Services</a></option> -->
            <option style="background-color: #D0D0D0;color: black;" value="Mobile">Mobile</option>
        </select>

        <button class="btn btn-light align-middle" style="line-height: 14px;padding: 8px;margin-top: 4PX;">
            <svg class="c-sidebar-nav-icon" style="margin-left: -9rem;margin-right: -9rem;">
                <use xlink:href="{{ url('public/assets/vendors/@coreui/icons/svg/free.svg#cil-search') }}"></use>
            </svg>
            Search Deleted Services (0) 
        </button>



    </div>
</div>
</div>
<div class="row">
   <div class="alert alert-success mt-2" role="alert">
    Total Monthly Charges <span class="testColorCrimson">5 999 HUF Inc. Tax</span> (5 705 HUF exc. Tax)
</div>  
</div>

<div class="row">
    <div class="col-lg-12">
        <div class="card">
            <div class="card-header text-center"> <strong> Add Service </strong></div>
            <form class="form-horizontal" action="" method="#">
                @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">
                                            Service Package
                                        </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">
                                            Connected From Date
                                        </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">
                                            Invoice Date
                                        </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">
                                         Invoicing Period
                                          </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">
                                        Invoicing Date
                                    </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">
                                        Invoice Separately
                                    </div>
                                    <div class="col-sm-8 col-md-8 col-lg-8 col-xl-8">
                                        <div class="row">

                                            <div class="col-md-2">
                                                <input type="checkbox"  name="fav_language" value="HTML">
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="row mt-3">
                                    <div class="col-sm-4 col-md-4 col-lg-4 col-xl-4">
                                        Reverse Charge
                                    </div>
                                    <div class="col-sm-8 col-md-8 col-lg-8 col-xl-8">
                                        <div class="row">

                                            <div class="col-md-2">
                                                <input type="checkbox"  name="fav_language" value="HTML">
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div id="input1" class="mt-3" style="border: 1px solid #EDEADE;padding: 20px;">
                                <div class="row">
                                    <div class="col-sm-4 col-md-4 col-lg-4 col-xl-4">
                                        Contract Number
                                    </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>

                            <div id="input1" class="mt-3" style="border: 1px solid #EDEADE;padding: 20px;">
                                <div class="row">
                                    <div class="col-sm-4 col-md-4 col-lg-4 col-xl-4">
                                        differnet address of installation
                                    </div>
                                    <div class="col-sm-8 col-md-8 col-lg-8 col-xl-8">
                                      <div class="row">

                                        <div class="col-md-2">
                                            <input type="checkbox"  name="fav_language" id="hideShowInstallationAddressField"  value="HTML">
                                        </div>
                                    </div>
                                    <!-- <input type="checkbox" id="hideShowInstallationAddressField" > -->

                                </div>
                            </div>
                            <div class="row">
                                <div class="col-sm-4 col-md-4 col-lg-4 col-xl-4">

                                </div>
                                <div class="col-sm-8 col-md-8 col-lg-8 col-xl-8" id="installationAddressField">
                                    <div class="row">
                                        <div class="col-sm-8 col-md-8 col-lg-8 col-xl-8">
                                            <input type="text" class="form-control" name="" value="jaipur">
                                        </div>
                                        <div class="col-sm-4 col-md-4 col-lg-4 col-xl-4">
                                            <input type="text" class="form-control" name="" value="1565">
                                        </div>
                                    </div>
                                    <div class="row mt-3">
                                        <div class="col-sm-8 col-md-8 col-lg-8 col-xl-8">
                                            <input type="text" class="form-control" name=""value="delhi">
                                        </div>
                                        <div class="col-sm-4 col-md-4 col-lg-4 col-xl-4">
                                            <input type="text" class="form-control" name=""value="3455">
                                        </div>
                                    </div>
                                    <div class="row mt-3">

                                        <div class="col-sm-2 col-md-2 col-lg-2 col-xl-2">
                                            <input type="text" class="form-control" name=""value="2">
                                        </div>
                                        <div class="col-sm-2 col-md-2 col-lg-2 col-xl-2">
                                            <input type="text" class="form-control" name=""value="3">
                                        </div>
                                        <div class="col-sm-8 col-md-8 col-lg-8 col-xl-8">
                                            <input type="text" class="form-control" name=""value="127.0.0.1">
                                        </div>
                                    </div>
                                    <div class="row mt-3">
                                        <div class="col-sm-6 col-md-6 col-lg-6 col-xl-6">
                                            <input type="text" class="form-control" name="" placeholder="District">
                                        </div>

                                        <div class="col-sm-6 col-md-6 col-lg-6 col-xl-6">
                                            <input type="text" class="form-control" name="" placeholder="Country">
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div id="input1" class="mt-3" style="border: 1px solid #EDEADE;padding: 20px;">
                            <div class="row">
                                <div class="col-sm-4 col-md-4 col-lg-4 col-xl-4">
                                    Supend Service
                                </div>
                                <div class="col-sm-8 col-md-8 col-lg-8 col-xl-8">
                                    <div class="row">

                                        <div class="col-md-2">
                                            <input type="checkbox"  name="fav_language" value="HTML">
                                        </div>
                                    </div>
                                </div><br><br>

                                <div class="col-sm-4 col-md-4 col-lg-4 col-xl-4">
                                    Description
                                </div>
                                <div class="col-sm-8 col-md-8 col-lg-8 col-xl-8">
                                    <textarea class="form-control"style="height: 100px;"></textarea>
                                </div><br><br><br><br>

                                <div class="col-sm-4 col-md-4 col-lg-4 col-xl-4">
                                    Description For Customer Portal
                                </div>
                                <div class="col-sm-8 col-md-8 col-lg-8 col-xl-8"><br>
                                    <textarea class="form-control"style="height: 100px;"> </textarea>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>



        <div class="" >
          <div class="row"style="padding-left: 29px;padding-right: 19px;">
            <table class="table table-bordered col-lg-12"  >
                <thead>
                    <tr >
                        <th></th>
                        <th><label for="javascript"style="color:black;font-size:13px;">Description</label> </th>
                        <th><label for="javascript"style="color:black;font-size:13px;">Type</label> </th>
                        <th><label for="javascript"style="color:black;font-size:13px;">Quentity</label> </th>
                        <th><label for="javascript"style="color:black;font-size:13px;">Price Per unit Without Tax</label> </th>
                        <th><label for="javascript"style="color:black;font-size:13px;">Price  Tax</label> </th>
                        <th><label for="javascript"style="color:black;font-size:13px;">Sub Total</label> </th>
                        <th><label for="javascript"style="color:black;font-size:13px;">Prircit</label> </th>
                        <th><label for="javascript"style="color:black;font-size:13px;">Accounting Codes</label> </th>



                    </tr>
                </thead>
                <tbody id="table_body">
                    <tr>
                        <td ><div class="btn btn-sm btn-danger"  onclick="myFunction()" id="removefiled" style="margin:-1px;height: 30px;width: 49px;"> - </div></td>
                        <td><input type="text" class="form-control"  name="Description"></td>
                        <td><input type="text" class="form-control" name="Type"></td>
                        <td><input type="text" class="form-control" name="Quentity"></td>
                        <td><input type="text" class="form-control" name="PricePerunitWithoutTax" disabled></td>
                        <td><input type="text" class="form-control" name="PriceTax"></td>
                        <td><input type="text" class="form-control" name="SubTotal" disabled></td>
                        <td><input type="text" class="form-control" name="Prircit" disabled></td>
                        <td>
                            <select class="form-control selectpicker" name="AccountingCodes" id="select-country" data-live-search="true" style="line-height: 14px;padding: 7px;margin-top: 4PX;text-align: left;">
                                <option>Choose account code</option>
                                <option> Not invoiced </option>
                                <option> Monthly </option>
                                <option> Bimonthly </option>
                                <option> Quarterly </option>
                                <option> Half-yearly </option>
                                <option> Yearly </option>
                            </select>
                        </td>
                    </tr>

                </tbody>
            </table>
        </div>
    </div>

    <div class=" " style="padding-right: 52px;">
        <div class="btn btn-sm btn-success"  id="addfiled" onclick="addtable('table_body')" style="margin:18px;height: 30px;width: 49px;"> + </div>
        <button type="button" class="btn btn-success" data-bs-toggle="modal" href="#exampleModalToggle" role="button">
            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-pencil-square" viewBox="0 0 16 16">
              <path d="M15.502 1.94a.5.5 0 0 1 0 .706L14.459 3.69l-2-2L13.502.646a.5.5 0 0 1 .707 0l1.293 1.293zm-1.75 2.456-2-2L4.939 9.21a.5.5 0 0 0-.121.196l-.805 2.414a.25.25 0 0 0 .316.316l2.414-.805a.5.5 0 0 0 .196-.12l6.813-6.814z"/>
              <path fill-rule="evenodd" d="M1 13.5A1.5 1.5 0 0 0 2.5 15h11a1.5 1.5 0 0 0 1.5-1.5v-6a.5.5 0 0 0-1 0v6a.5.5 0 0 1-.5.5h-11a.5.5 0 0 1-.5-.5v-11a.5.5 0 0 1 .5-.5H9a.5.5 0 0 0 0-1H2.5A1.5 1.5 0 0 0 1 2.5v11z"/>
          </svg>  Item Template</button>

          

          <div class="modal fade" id="exampleModalToggle" aria-hidden="true" aria-labelledby="exampleModalToggleLabel" tabindex="-1">
              <div class="modal-dialog modal-dialog-centered">
                <div class="modal-content">
                  <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalToggleLabel">ITEM Template</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="container">
                        <table class="table" id="table_body">
                            <tr>
                                <th></th>
                                <th>Description</th>
                                <th>Number Of items</th>
                                <th>Amount</th>
                            </tr>
                            <tbody>
                                <tr id="first_tr">
                                    <td><input type="checkbox"  name="fav_language[]" value="HTML"style="width: 40px;"></td>
                                    <td>Wifi Router Berief</td>
                                    <td>1</td>
                                    <td>650 HUF</td>
                                </tr>
                                <tr>
                                    <td><input type="checkbox"  name="fav_language[]" value="HTML" style="width: 40px;"></td>
                                    <td>Fix Cim/32(1db)beriet</td>
                                    <td>1</td>
                                    <td> 3500 HUF</td>
                                </tr>
                                <tr>
                                    <td><input type="checkbox"  name="fav_language[]" value="HTML" style="width: 40px;"></td>
                                    <td>Voip Alkozpont</td>
                                    <td>1</td>
                                    <td> 950 HUF</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
                <div class="modal-footer">
                    <button class="btn btn-success" data-bs-target="#exampleModalToggle2" data-bs-toggle="modal" data-bs-dismiss="modal">Ok</button>
                </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"  style="margin:5px;"> Save </button>
        <a href="#"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 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">
       
        function addtable(table_id)
        {
                let table_body= document.getElementById(table_id),
                first_tr = table_body.firstElementChild;
                tr_clone  = first_tr.cloneNode(true);
                table_body.append(tr_clone);
                console.log(first_tr);

        }
        function myFunction() {
            document.getElementById("table_body").deleteRow(0);
             }


        $("#table1").hide();
        $("#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--;
        }
        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('/volp')}}";
            }
            if($(".getFormName").val()=='Service')
            {
                window.location.href = "{{url('/addservice')}}";
            }
        }



    </script>
    @endsection