@extends('layouts.app')
@section('head')
<link rel="stylesheet" href="/css/getclient.css">
@endsection
@section('content')
<div class="container flex client-home">
  <div class="menus-get-client">
    <ul>
      <li><a href="{{route('get.get-client', App::getLocale())}}">Информация об услуге</a> </li> <hr>
      <li><a href="{{route('get-expense', App::getLocale())}}">История расходов</a> </li> <hr>
      <li><a href="{{route('get-payment', App::getLocale())}}">История платежей</a> </li> <hr>
      <li><a href="{{route('get-client.setting', App::getLocale())}}">Настройки</a> </li> <hr>
      <li><a href="#">Обратный звонок</a> </li> <hr>
    </ul>
    <div class="get-client-info">
        <p>Абонент</p>
        <span>{{session('client.Customer')}}</span>
        <table class="table-get-client">
          <tr>
            <th>Номер счета</th>
            <th>Номер договора</th>
            <th>Баланс</th>
          </tr>
          <tr>
            <td>{{session('client.Id')}}</td>
            <td>{{session('client.SerialNumber')}}</td>
            <td>{{session('client.Balance')}}</td>
          </tr>
        </table>
    </div>
  </div>
  <div class="client-info-with-table">
    <div class="client-info-title">
      <span>Управление услугами</span>
    </div>
    <div class="control-service">
      <div class="control-service-spans">
        <span class="service-control-span active" id="block_service" >Блокировка услуги</span>
        <span class="service-control-span" id="change_plan">Замена тарифного плана</span>
      </div>
      <form class="" id="changeplan" action="{{route('change-service-package', App::getLocale())}}" method="post" style="display: none">
        @csrf <br>
        <p>Замена тарифного плана – производится только с 1-го числа следующего месяца.</p> <br>
        Тариф:
        <select class="" name="package">
          <option value=""></option>
          @for($i=0; $i<count(session('packages.Id')); $i++)
            <option value="{{session('packages.Id')[$i]}}">{{session('packages.Name')[$i]}}</option>
          @endfor
        </select>
        <input type="submit" name="" value="Сохранить">
      </form>
      <form class="" id="blockservice" action="{{route('block-service', App::getLocale())}}" method="post">
        @csrf <br>
        <p>Блокировка услуги – возможность временного приостановления просмотра ретранслируемых каналов, входящих в состав пакета на который подписан абонент, сроком от одного до двенадцати месяцев без взимания абонентской платы за указанный период.
          Блокировка услуги производиться только с 1-числа следующего месяца.</p> <br>
          Количество месяцев:
        <select class="" name="srok">
          <option value="1">1</option>
          <option value="2">2</option>
          <option value="3">3</option>
          <option value="4">4</option>
          <option value="5">5</option>
          <option value="5">5</option>
          <option value="6">6</option>
          <option value="7">7</option>
          <option value="8">8</option>
          <option value="9">9</option>
          <option value="10">10</option>
          <option value="11">11</option>
          <option value="12">12</option>
        </select>
        <input type="submit" name="" value="Сохранить">
      </form>
      @if(session('success'))
        <div class="success-message">
          {{session('success')}}
        </div>
      @endif
      @if(session('error'))
        <div class="error-message">
          {{session('error')}}
        </div>
      @endif
    </div>
  </div>
</div>
@endsection
@section('foot')
<script type="text/javascript">
  $('#change_plan').on('click', function(){
    $('#blockservice').css('display', 'none');
    $('#changeplan').css('display', 'block');
    $('#block_service').removeClass('active');
    $('#change_plan').addClass('active');
  });

  $('#block_service').on('click', function(){
    $('#changeplan').css('display', 'none');
    $('#blockservice').css('display', 'block');
    $('#change_plan').removeClass('active');
    $('#block_service').addClass('active');
  });
</script>
@endsection