@extends('layouts.simpleLayoutMaster')

@section('title', 'الدفعات')

@section('vendor-style')
    <link rel="stylesheet" href="{{ asset(mix('vendors/css/forms/select/select2.min.css')) }}" />
@endsection

@section('page-style')
    {{-- Page Css files --}}
    <link rel="stylesheet" href="{{ asset('css/custom/children/payments.css') }}">
@endsection

@section('breadcrumb')
<div class="content-header row">
  <div class="content-header-left col-12 mb-2">
    <div class="row breadcrumbs-top">
      <div class="col-12">
        <h2 class="content-header-title float-start mb-0">معلومات الطالب</h2>
        <div class="breadcrumb-wrapper">
          <ol class="breadcrumb">
            <li class="breadcrumb-item">
              <a href="#"> الرئيسية</a>
            </li>
            <li class="breadcrumb-item">
              <a href="#"> الابناء</a>
            </li>
            <li class="breadcrumb-item">
                <a href="#"> مهره بنت عبد الرحمن بن محمد الحسيني</a>
            </li>
            <li class="breadcrumb-item">
              <a href="#"> العقد الساري</a>
            </li>
            <li class="breadcrumb-item">
              <span> الدفعات</span>
            </li>

          </ol>
        </div>
      </div>
    </div>
  </div>
</div>
@endsection

@section('content')
<div class="page">
  <div class="payments-page-wrapper">
    <div id="paymentsCard" class="top-card-wrapper card">
        <div class="row header">
          <div class="col-12">
            <div class="header-wrapper">
                <div class="top-header-wrapper">

                    <div class="icon-text-wrapper">
                        <img src="{{ asset('assets/pay.svg') }}" alt="" srcset="">
                        <h2 class="header-text">دفعات</h2>
                    </div>
                    <h3 class="text-info">الاجمالي 1100 ر.س</h3>
                </div>
                <h3 class="text-info mt-1">دفعات</h3>
              <h3 class="text-lead">عدد الدفعات اللازمه..8</h3>
            </div>
          </div>
        </div>
        <div class="row">
            <div class="col-12">
            <div class="table-responsive">
            <table class="table">
                <thead>
                <tr>
                    <th></th>
                    <th>رقم القسط</th>
                    <th>السنه الدراسيه</th>
                    <th>القسط</th>
                    <th>الاجمالي</th>

                </tr>
                </thead>
                <tbody>
                <tr>
                    <td>
                        <a class="payAction" href="{{ route('showPaymentMethodsPage') }}">ادفع</a>
                    </td>
                 <td>الثاني</td>
                 <td>الرابع الابتدائي</td>
                 <td>200 ر.س</td>
                 <td>800 ر.س</td>
                </tr>
                <tr>
                    <td>
                        <a class="payAction" href="{{ route('showPaymentMethodsPage') }}">ادفع</a>
                    </td>
                 <td>الثاني</td>
                 <td>الرابع الابتدائي</td>
                 <td>200 ر.س</td>
                 <td>800 ر.س</td>
                </tr>
                <tr>
                    <td>
                        <a class="payAction" href="{{ route('showPaymentMethodsPage') }}">ادفع</a>
                    </td>
                 <td>الثاني</td>
                 <td>الرابع الابتدائي</td>
                 <td>200 ر.س</td>
                 <td>800 ر.س</td>
                </tr>
                <tr>
                    <td>
                        <a class="payAction" href="{{ route('showPaymentMethodsPage') }}">ادفع</a>
                    </td>
                 <td>الثاني</td>
                 <td>الرابع الابتدائي</td>
                 <td>200 ر.س</td>
                 <td>800 ر.س</td>
                </tr>
                <tr>
                    <td>
                        <a class="payAction" href="{{ route('showPaymentMethodsPage') }}">ادفع</a>
                    </td>
                 <td>الثاني</td>
                 <td>الرابع الابتدائي</td>
                 <td>200 ر.س</td>
                 <td>800 ر.س</td>
                </tr>
                <tr>
                    <td>
                        <a class="payAction" href="{{ route('showPaymentMethodsPage') }}">ادفع</a>
                    </td>
                 <td>الثاني</td>
                 <td>الرابع الابتدائي</td>
                 <td>200 ر.س</td>
                 <td>800 ر.س</td>
                </tr>
                <tr>
                    <td>
                        <a class="payAction" href="{{ route('showPaymentMethodsPage') }}">ادفع</a>
                    </td>
                 <td>الثاني</td>
                 <td>الرابع الابتدائي</td>
                 <td>200 ر.س</td>
                 <td>800 ر.س</td>
                </tr>
                <tr>
                    <td>
                        <a class="payAction" href="{{ route('showPaymentMethodsPage') }}">ادفع</a>
                    </td>
                 <td>الثاني</td>
                 <td>الرابع الابتدائي</td>
                 <td>200 ر.س</td>
                 <td>800 ر.س</td>
                </tr>

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

            </div>
        </div>
    </div>

  </div>
</div>
@endsection

@section('vendor-script')
<!-- <script src="{{ asset(mix('vendors/js/forms/select/select2.full.min.js')) }}"></script> -->
@endsection

@section('page-script')
<script>
    $("document").ready(function () {
        // $(".payAction").on('click', function () {
        //     $("#paymentsCard").css("display", "none");
        //     $("#paymentMethods").css("display", "flex");
        // });
    });
</script>
@endsection