@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;
        }
        .cancellation{
        width: 100% !important;
    }
    #cancellation-Table{
        width: 70% !important;
    }
    </style>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.2/css/bootstrap.css">
<link rel ="stylesheet" href="https://cdn.datatables.net/1.12.1/css/dataTables.bootstrap4.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script src="https://cdn.datatables.net/1.12.1/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.12.1/js/dataTables.bootstrap4.min.js"></script>

    <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" 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="javascript:void(0)" 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;">IPTV</option>
                <option style="background-color: #D0D0D0;color: black;">CATV</option>
                <option style="background-color: #D0D0D0;color: black;">DVBC</option>
                <option style="background-color: #D0D0D0;color: black;">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;">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 style="display: block !important;"><center> <div class="cancellation"> 

         <h1   style=" border-bottom: outset;border-bottom-width: thin;">
          <center> List Of Cancellations</center>
        </h1>
        <center><button type="button" class="btn btn-success">+ Add New Cancellations Of Service</button></center>

</div></center>
<div id="cancellation-Table">
<table id="example" class="table table-striped table-bordered" style="width:100%">
        <thead>
            <tr>
                
                <th>Notes</th>
                <th>Service Type</th>
                <th>Service Name</th>
                <th>Submission Date</th>
                <th>Cancellation Start Date</th>
                <th>Notice Period</th>
                <th>Contract Ends On</th>
                <th>Subbmisson Method</th>
                <th>Reason Of Withdrawal</th>
                <th>Note</th>
                <th>Created By</th>
                <th>Created</th>
                <th>Contract Will Continue</th>
                <th>Time To Withdrawal</th>
                <th>Last Note</th>
                
            </tr>
        </thead>
        <tbody>
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                
                
                
            </tr>
 
        </tbody>
        <tfoot>
        
        </tfoot>
    </table>


    </div>
</div>

    <script>
        $(document).ready(function () {
    $('#example').DataTable();
});
    </script>


@endsection