@extends('admin.layout.admin')
@section('title', 'Collection')
@section('content')
@section('style')
<style>
  .data_text p {
            font-size: 1.5vw;
            font-weight: 600;
        }

        .employee-text {
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-wrap: wrap;
            list-style: none;
            margin: 0;
            background: #fff;
            border: 1px solid #e0e0e0;
            padding: 8px;
            border-radius: 3px;
            filter: drop-shadow(0px 1px 1px #e0e0e0);
        }

        .employee-text li {
            font-size: 1.5vw;
            width: 48%;
            font-weight: 600;
            margin-bottom: 10px;
        }

        .employee-text li:nth-child(1) {
            border-right: solid 1px #727272;
        }

        .employee-text li:nth-child(3) {
            border-right: solid 1px #727272;
        }

        .employee-text li:nth-child(5) {
            border-right: solid 1px #727272;
        }

        .data_text span {
            font-weight: 700;
        }

        .employee-text li a {
            text-decoration: none;
            color: #000;
        }

        .shiping-sec {
            padding: 20px;
            border: 1px solid #e0e0e0;
            border-radius: 5px;
            filter: drop-shadow(0px 1px 1px #e0e0e0);
            display: flex;
            flex-direction: column;
            justify-content: center;
            text-align: center;
            height: 180px;

        }

        .shiping-sec i {
            width: 50px;
            height: 50px;
            background: #fff;
            border-radius: 100%;
            box-shadow: 0px 0px 1px 1px #6b6464;
            text-align: center;
            line-height: 50px;
            color: #02315a;
            margin: 0 auto;
        }

        .shiping-sec p {
            font-size: 20px;
            font-weight: 600;
        }

        .subtotal-sec {
            margin-top: 40px;
            padding: 20px;
            border: 1px solid #e0e0e0;
            border-radius: 5px;
            filter: drop-shadow(0px 1px 1px #e0e0e0);
            display: flex;
            flex-direction: column;
            justify-content: center;
            text-align: center;
        }

        .order-line {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 12px;
        }

        .sub-text {
            font-size: 18px;
            font-weight: 600;
            color: #999;
        }

        .price-text {
            font-size: 18px;
            font-weight: 600;
            color: #000000;
        }

        .continue_btn {
            width: 100%;
            font-size: 18px;
            font-weight: 600;
            text-decoration: none;
            color: #fff;
            background: #00315b;
            padding: 7px;
            display: block;
            text-align: center;
            border-radius: 5px;
            border: solid 2px #00315d;
            text-decoration: none;
        }

        .continue_btn:hover {
            width: 100%;
            background: #e2e2e2;
            transition: 0.5s;
            filter: unset;
            color: #00315b;
            text-decoration: none;
        }

        .form-main {
            display: flex;
            flex-direction: column;
        }

        .Receipt_form {
            width: 48%;
        }

        .Receipt_form input {
            width: 100%;
            height: 38px;
            font-size: 18px;
            outline-color: #347ab654;
            border-radius: 4px;
            padding: 8px;
        }

        .quantity-text {
            font-weight: 600;
            font-size: 15px;
            margin-bottom: 5px;
        }

        .Receipt-form {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .upload_btn {
            padding: 40px;
            width: 100%;
            border: 1px solid #e8e8e8;
            border-radius: 4px;
            background: #fff;
            display: flex;
            justify-content: center;
            align-items: center;
            cursor: pointer;
            transition: all .3s;
            margin-top: 30px;
            filter: drop-shadow(1px 1px 2px #dddddd)
        }

        .box-text {
            display: flex;
            flex-direction: column;
            text-align: center;
        }

        .box-text span {
            font-size: 20px;
        }

        .upload-text {
            font-weight: 600;
        }

        /* 992 start */
        @media screen and (max-width:992px) {
            .member_head {
                font-size: 20px;
            }

            .shiping-sec p {
                font-size: 16px;
            }
        }

        /* 992 end */
        /* 768 start */
        @media screen and (max-width:768px) {
            .upload_btn {
                margin-bottom: 30px;
            }


        }

        /* 768 end */
        /* 575 start */
        @media screen and (max-width:575px) {
            .Receipt-form {
                flex-direction: column;
            }

            .Receipt_form {
                width: 100%;
                margin-bottom: 20px;
            }

            .upload_btn {
                margin-top: 10px;
            }
        }
</style>
@endsection
<h2>Benevolent Fund </h2>
<br>
<div class="container container_rule">
    <div class="row">
        <div class="col-lg-8">
            <div class="Receipt-form">
                <div class="Receipt_form">
                    <form action="{{ route('offline.subscription.submit.admin') }}" method="POST" enctype="multipart/form-data">
                        @csrf <label class="quantity-text" for="fname">Cheque Number :</label>
                        <input class="name-text" type="text" placeholder="Enter Cheque Number" name="cheque_number"
                            required>
                </div>
                <div class="Receipt_form">
                    <label class="quantity-text" for="fname">Cheque Date :</label>
                    <input class="name-text" type="date" placeholder="Cheque Date" name="doc_date" required>
                </div>

            </div>
            <div class="selection-box modal-trigger upload_btn">
                <div class="box-content">
                    <div class="box-text">
                        <label for="offline_receipt_document" class="quantity-text">Upload Document :</label>
                        <input type="file" class="form-control quantity-text" id="offline_receipt_document"
                            name="receipt_document" accept="image/*,application/pdf" required>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-lg-4">
            <div class="shiping-sec">
                <a href="#"> <i class="fa fa-handshake-o"></i></a>
                <h4>Benevolent Fund</h4>
            </div>
            <div class="subtotal-sec">

                <div class="order-line">
                    <span class="sub-text">Amount</span>
                    <span class="price-text">₹ 20000.00</span>
                </div>
                <div class="order-line">
                    <span class="sub-text">Late Fees</span>
                    <span class="price-text">₹ 0.00</span>
                </div>

                <div class="order-line">
                    <span class="sub-text">Total</span>
                    <span class="price-text">₹ 20000.00</span>
                </div>
                <div class="order-line">
                    <button class="continue_btn" type="submit">Confirm</button>
                </div>

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

<br>
</form>
@endsection

@push('scripts')

@endpush