@extends('admin.layout.layout')
@section('title','GAS LMS | Material Transactions')
{{-- Breadcrumb section --}}
@section('breadcrumb')
<!--begin::Breadcrumb-->
<ul class="breadcrumb breadcrumb-dot fw-semibold text-gray-600 fs-7 my-1">
    <!--begin::Item-->
    <li class="breadcrumb-item text-gray-600">
        <a href="{{route('admin.dashboard')}}" class="text-gray-600 text-hover-primary">Home</a>
    </li>
    <!--end::Item-->
    <!--begin::Item-->
    <li class="breadcrumb-item text-gray-600">Material Transactions</li>
    <!--end::Item-->
</ul>
<!--end::Breadcrumb-->
@endsection
@section('content')
@include('components._error')

{{-- Filter --}}
<form action="{{route('admin.material-transactions.index',['#material_transactions'])}}">
    <input type="hidden" name="status" value="{{request()->status}}">
    <!--begin::Card-->
    <div class="card mb-10 pt-4 shadow">
        <div class="card-header">
            <h2 class="card-title">Filter by</h2>
        </div>
        <!--begin::Card body-->
        <div class="card-body">
            <!--begin::Compact form-->
            <div class="d-flex align-items-center">
                <!--begin::Input group-->
                <div class="position-relative w-md-800px me-md-2">
                    <select class="form-select form-control form-control-solid" data-control="select2" id="course" name="coffid" data-placeholder="Select course">
                        <option></option>
                        @foreach ($offered_courses as $course)
                            <option value="{{$course->coffid}}">
                                {{$course->acyname.'_'.$course->cname.' ('.$course->lshort_name.')_'.$course->ttname}}
                                {{$course->has_label ? '('.$course->label.')':''}}
                            </option>
                        @endforeach
                    </select>
                </div>
                <div class="position-relative w-md-800px me-md-2">
                    <select class="form-select form-control form-control-solid" data-control="select2" id="student" name="user_id" data-placeholder="Select student">
                        <option></option>
                        @foreach ($students_transaction as $student)
                            <option value="{{$student->user_id}}">
                                {{$student->first_name.' '.$student->middle_name.' '.$student->last_name}}
                            </option>
                        @endforeach
                    </select>
                </div>
                <!--end::Input group-->
            </div>
            <!--end::Compact form-->
            <div class="d-flex justify-content-center mt-7">

                <button type="submit" class="btn btn-primary me-3 submit_btn">
                     <!--begin::Svg Icon | path: icons/duotune/general/gen016.svg-->
                     <span class="svg-icon svg-icon-3">
                        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M15.43 8.56949L10.744 15.1395C10.6422 15.282 10.5804 15.4492 10.5651 15.6236C10.5498 15.7981 10.5815 15.9734 10.657 16.1315L13.194 21.4425C13.2737 21.6097 13.3991 21.751 13.5557 21.8499C13.7123 21.9488 13.8938 22.0014 14.079 22.0015H14.117C14.3087 21.9941 14.4941 21.9307 14.6502 21.8191C14.8062 21.7075 14.9261 21.5526 14.995 21.3735L21.933 3.33649C22.0011 3.15918 22.0164 2.96594 21.977 2.78013C21.9376 2.59432 21.8452 2.4239 21.711 2.28949L15.43 8.56949Z" fill="currentColor"></path>
                            <path opacity="0.3" d="M20.664 2.06648L2.62602 9.00148C2.44768 9.07085 2.29348 9.19082 2.1824 9.34663C2.07131 9.50244 2.00818 9.68731 2.00074 9.87853C1.99331 10.0697 2.04189 10.259 2.14054 10.4229C2.23919 10.5869 2.38359 10.7185 2.55601 10.8015L7.86601 13.3365C8.02383 13.4126 8.19925 13.4448 8.37382 13.4297C8.54839 13.4145 8.71565 13.3526 8.85801 13.2505L15.43 8.56548L21.711 2.28448C21.5762 2.15096 21.4055 2.05932 21.2198 2.02064C21.034 1.98196 20.8409 1.99788 20.664 2.06648Z" fill="currentColor"></path>
                        </svg>
                    </span>
                    <span class="pulse-ring"></span>
                    <span class="indicator-label">
                        Search
                    </span>
                    <span class="indicator-progress">
                        Please wait... <span class="spinner-border spinner-border-sm align-middle ms-2"></span>
                    </span>
                    <!--end::Svg Icon-->
                </button>
                <a class="btn btn-danger" href="{{route('admin.material-transactions.index')}}">
                    Reset
                    <!--begin::Svg Icon | path: C:/wamp64/www/keenthemes/core/html/src/media/icons/duotune/arrows/arr029.svg-->
                    <span class="svg-icon svg-icon-muted svg-icon-1x"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M14.5 20.7259C14.6 21.2259 14.2 21.826 13.7 21.926C13.2 22.026 12.6 22.0259 12.1 22.0259C9.5 22.0259 6.9 21.0259 5 19.1259C1.4 15.5259 1.09998 9.72592 4.29998 5.82592L5.70001 7.22595C3.30001 10.3259 3.59999 14.8259 6.39999 17.7259C8.19999 19.5259 10.8 20.426 13.4 19.926C13.9 19.826 14.4 20.2259 14.5 20.7259ZM18.4 16.8259L19.8 18.2259C22.9 14.3259 22.7 8.52593 19 4.92593C16.7 2.62593 13.5 1.62594 10.3 2.12594C9.79998 2.22594 9.4 2.72595 9.5 3.22595C9.6 3.72595 10.1 4.12594 10.6 4.02594C13.1 3.62594 15.7 4.42595 17.6 6.22595C20.5 9.22595 20.7 13.7259 18.4 16.8259Z" fill="currentColor"/>
                        <path opacity="0.3" d="M2 3.62592H7C7.6 3.62592 8 4.02592 8 4.62592V9.62589L2 3.62592ZM16 14.4259V19.4259C16 20.0259 16.4 20.4259 17 20.4259H22L16 14.4259Z" fill="currentColor"/>
                        </svg>
                     </span>
                    <!--end::Svg Icon-->
                </a>
            </div>
        </div>
        <!--end::Card body-->
    </div>
    <!--end::Card-->
</form>
{{-- transactions table --}}
<div class="card card-flush shadow">
    <!--begin::Card header-->
    <div class="card-header align-items-center py-5 gap-2 gap-md-5">
        <!--begin::Card title-->
        <div class="card-title">
            <h2>Transactions List </h2>
        </div>
        <!--end::Card title-->
    </div>
    <div class="separator mb-10"></div>
    <!--end::Card header-->
    <!--begin::Card body-->
    <div class="card-body pt-0" id="material_transactions">
        <div class="d-flex justify-content-center">
            <ul class="nav nav-pills nav-pills-custom mb-3">
                <!--begin::Item-->
                <li class="nav-item mb-3 me-3 me-lg-6" >
                    <!--begin::Link-->
                    <a href="{{route('admin.material-transactions.index',['#material_transactions'])}}" class=" {{!request()->status ? 'active':''}} nav-link btn btn-outline btn-flex btn-color-muted btn-active-color-primary flex-column overflow-hidden h-85px pt-5 pb-2">
                        <!--begin::Icon-->
                        <div class="nav-icon mb-3">
                           <!--begin::Svg Icon | path: C:/wamp64/www/keenthemes/core/html/src/media/icons/duotune/files/fil015.svg-->
                            <span class="svg-icon text-danger svg-icon-2hx"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path opacity="0.3" d="M10 4H21C21.6 4 22 4.4 22 5V7H10V4Z" fill="currentColor"/>
                                <path opacity="0.3" d="M12 14.4L9.89999 16.5C9.69999 16.7 9.39999 16.8 9.19999 16.8C8.99999 16.8 8.7 16.7 8.5 16.5C8.1 16.1 8.1 15.5 8.5 15.1L10.6 13L12 14.4ZM13.4 13L15.5 10.9C15.9 10.5 15.9 9.90001 15.5 9.50001C15.1 9.10001 14.5 9.10001 14.1 9.50001L12 11.6L13.4 13Z" fill="currentColor"/>
                                <path d="M10.4 3.60001L12 6H21C21.6 6 22 6.4 22 7V19C22 19.6 21.6 20 21 20H3C2.4 20 2 19.6 2 19V4C2 3.4 2.4 3 3 3H9.2C9.7 3 10.2 3.20001 10.4 3.60001ZM13.4 13L15.5 10.9C15.9 10.5 15.9 9.9 15.5 9.5C15.1 9.1 14.5 9.1 14.1 9.5L12 11.6L9.89999 9.5C9.49999 9.1 8.9 9.1 8.5 9.5C8.1 9.9 8.1 10.5 8.5 10.9L10.6 13L8.5 15.1C8.1 15.5 8.1 16.1 8.5 16.5C8.7 16.7 9 16.8 9.2 16.8C9.4 16.8 9.69999 16.7 9.89999 16.5L12 14.4L14.1 16.5C14.3 16.7 14.6 16.8 14.8 16.8C15 16.8 15.3 16.7 15.5 16.5C15.9 16.1 15.9 15.5 15.5 15.1L13.4 13Z" fill="currentColor"/>
                                </svg>
                            </span>
                            <!--end::Svg Icon-->
                        </div>
                        <!--end::Icon-->
                        <!--begin::Title-->
                        <span class="nav-text text-gray-800 fw-bold fs-6 lh-1">UnPosted</span>
                        <!--end::Title-->
                        <!--begin::Bullet-->
                        <span class="bullet-custom position-absolute bottom-0 w-100 h-4px bg-danger"></span>
                        <!--end::Bullet-->
                    </a>
                    <!--end::Link-->
                </li>
                <!--end::Item-->
                <!--begin::Item-->
                <li class="nav-item mb-3 me-3 me-lg-6">
                    <!--begin::Link-->
                    <a href="{{route('admin.material-transactions.index',['status=posted','#material_transactions'])}}" class="{{request()->status =='posted' ? 'active':''}} nav-link btn btn-outline btn-flex btn-color-muted btn-active-color-primary flex-column overflow-hidden w-100px h-85px pt-5 pb-2"  >
                        <!--begin::Icon-->
                        <div class="nav-icon mb-3">
                            <!--begin::Svg Icon | path: C:/wamp64/www/keenthemes/core/html/src/media/icons/duotune/files/fil016.svg-->
                            <span class="svg-icon text-success svg-icon-2hx"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path opacity="0.3" d="M10 4H21C21.6 4 22 4.4 22 5V7H10V4Z" fill="currentColor"/>
                                <path opacity="0.3" d="M10.3 15.3L11 14.6L8.70002 12.3C8.30002 11.9 7.7 11.9 7.3 12.3C6.9 12.7 6.9 13.3 7.3 13.7L10.3 16.7C9.9 16.3 9.9 15.7 10.3 15.3Z" fill="currentColor"/>
                                <path d="M10.4 3.60001L12 6H21C21.6 6 22 6.4 22 7V19C22 19.6 21.6 20 21 20H3C2.4 20 2 19.6 2 19V4C2 3.4 2.4 3 3 3H9.20001C9.70001 3 10.2 3.20001 10.4 3.60001ZM11.7 16.7L16.7 11.7C17.1 11.3 17.1 10.7 16.7 10.3C16.3 9.89999 15.7 9.89999 15.3 10.3L11 14.6L8.70001 12.3C8.30001 11.9 7.69999 11.9 7.29999 12.3C6.89999 12.7 6.89999 13.3 7.29999 13.7L10.3 16.7C10.5 16.9 10.8 17 11 17C11.2 17 11.5 16.9 11.7 16.7Z" fill="currentColor"/>
                                </svg>
                            </span>
                            <!--end::Svg Icon-->
                        </div>
                        <!--end::Icon-->
                        <!--begin::Title-->
                        <span class="nav-text text-gray-800 fw-bold fs-6 lh-1">Posted</span>
                        <!--end::Title-->
                        <!--begin::Bullet-->
                        <span class="bullet-custom position-absolute bottom-0 w-100 h-4px bg-success"></span>
                        <!--end::Bullet-->
                    </a>
                    <!--end::Link-->
                </li>
                <!--end::Item-->
            </ul>
        </div>
        @if ($material_transactions->count() > 0)
        <div class="d-flex justify-content-end">
            <form action="{{ route('admin.material-transactions.export') }}">
                <input type="hidden" name="status" value="{{ request()->status }}">
                <input type="hidden" name="coffid" value="{{ $coffid }}">
                <input type="hidden" name="student" value="{{ request()->student}}">
                <button class="btn btn-outline btn-primary btn-sm rounded fw-bold">
                    <span class="indicator-label">
                        Export excel
                        <i class="far fa-file-excel"></i>
                    </span>
                    <span class="indicator-progress">
                        Exporting... <span class="spinner-border spinner-border-sm align-middle ms-2"></span>
                    </span>
                </button>
            </form>
        </div>
        @endif
        <!--begin::Table-->
        <table class="table align-middle table-row-dashed fs-6 gy-5" id="server_side_datatable">
            <!--begin::Table head-->
            <thead>
                <!--begin::Table row-->
                <tr class="text-gray-400 fw-bold fs-7 text-uppercase gs-0">
                    <th class="text-center">
                        id
                    </th>
                    <th class="text-center">course name</th>
                    <th class="text-center">student name</th>
                    <th class="text-center">material name</th>
                    <th class="text-center">amount due</th>
                    <th class="text-center">status</th>
                    <th class="text-center">date</th>
                    <th class="text-center rounded-end">Actions</th>
                </tr>
                <!--end::Table row-->
            </thead>
            <!--end::Table head-->
            <!--begin::Table body-->
            <tbody class="fw-semibold text-gray-600">
                @foreach ($material_transactions as $key=>$transaction)
                    <!--begin::Table row-->
                    <tr class="text-center">
                        <!--begin::id-->
                        <td>
                            <div class="position-relative ps-6 pe-3 py-2">
                                <div class="position-absolute start-0 top-0 w-4px h-100 rounded-2 bg-primary"></div>
                                {{++$key}}
                            </div>
                        </td>
                        <!--end::id-->
                        <td>
                            <a href="#" class="text-muted" data-bs-toggle="tooltip" data-bs-custom-class="tooltip-inverse" data-bs-placement="top"
                                title="{{$transaction->acyname.'_'.$transaction->cname.' ('.$transaction->lshort_name.')_'.$transaction->ttname.' '.$transaction->label}}">
                                {{Str::limit($transaction->acyname.'_'.$transaction->cname.' ('.$transaction->lshort_name.')_'.$transaction->ttname.' '.$transaction->label,30,'...')}}
                            </a>
                        </td>
                        <td>
                            {{ $transaction->first_name }} {{ $transaction->middle_name }} {{ $transaction->last_name }}
                            <span  data-bs-toggle="tooltip" data-bs-custom-class="tooltip-inverse" data-bs-placement="top" title="Email: {{ $transaction->email }}" class="svg-icon svg-icon-dark svg-icon-1hx ms-1">
                                <svg width="4" height="4" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path opacity="0.3" d="M16.5 9C16.5 13.125 13.125 16.5 9 16.5C4.875 16.5 1.5 13.125 1.5 9C1.5 4.875 4.875 1.5 9 1.5C13.125 1.5 16.5 4.875 16.5 9Z" fill="currentColor"/>
                                <path d="M9 16.5C10.95 16.5 12.75 15.75 14.025 14.55C13.425 12.675 11.4 11.25 9 11.25C6.6 11.25 4.57499 12.675 3.97499 14.55C5.24999 15.75 7.05 16.5 9 16.5Z" fill="currentColor"/>
                                <rect x="7" y="6" width="4" height="4" rx="2" fill="currentColor"/>
                                </svg>
                            </span>
                        </td>
                        <td>{{ $transaction->name }}</td>
                        <td>
                            {{$transaction->amount_due}}
                            <span class="svg-icon svg-icon-dark svg-icon-1hx ms-1"  data-bs-toggle="tooltip" data-bs-custom-class="tooltip-inverse" data-bs-html='true' data-bs-placement="top"
                                title="amount: {{ $transaction->amount }} <br> discount: {{$transaction->discount_amount ? $transaction->discount_amount : '0'}}% <br> amount due: {{ $transaction->amount_due }} <br>
                                eshra7ly amount: {{$transaction->eshra7ly_amount}} <br> teacher amount: {{$transaction->teacher_amount}}
                                <br> {{$transaction->discount_added_by ? 'discount added by: '.$transaction->discount_added_by_fname.' '.$transaction->discount_added_by_lname : ''}}">
                                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path opacity="0.3" d="M20 18H4C3.4 18 3 17.6 3 17V7C3 6.4 3.4 6 4 6H20C20.6 6 21 6.4 21 7V17C21 17.6 20.6 18 20 18ZM12 8C10.3 8 9 9.8 9 12C9 14.2 10.3 16 12 16C13.7 16 15 14.2 15 12C15 9.8 13.7 8 12 8Z" fill="currentColor"/>
                                <path d="M18 6H20C20.6 6 21 6.4 21 7V9C19.3 9 18 7.7 18 6ZM6 6H4C3.4 6 3 6.4 3 7V9C4.7 9 6 7.7 6 6ZM21 17V15C19.3 15 18 16.3 18 18H20C20.6 18 21 17.6 21 17ZM3 15V17C3 17.6 3.4 18 4 18H6C6 16.3 4.7 15 3 15Z" fill="currentColor"/>
                                </svg>
                            </span>
                        </td>
                        <td>
                            @if ($transaction->is_refunded || $transaction->is_refunded_after_post)
                                <span class="badge badge-danger">refunded </span>
                                <a href="#"><span class="svg-icon svg-icon-danger svg-icon-1hx ms-1"  data-bs-toggle="tooltip" data-bs-custom-class="tooltip-inverse" data-bs-html='true' data-bs-placement="top"
                                    title="refund reason: {{ $transaction->refund_reason }} <br> refunded by: {{$transaction->refunded_by_fname.' '.$transaction->refunded_by_lname}}">
                                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                        <rect opacity="0.3" x="2" y="2" width="20" height="20" rx="10" fill="currentColor"/>
                                        <rect x="11" y="17" width="7" height="2" rx="1" transform="rotate(-90 11 17)" fill="currentColor"/>
                                        <rect x="11" y="9" width="2" height="2" rx="1" transform="rotate(-90 11 9)" fill="currentColor"/>
                                    </svg>
                                </span></a>
                                @else
                                <span class="badge badge-success">paid</span>
                            @endif
                        </td>
                        <td>
                            <!--begin::Svg Icon | path: C:/wamp64/www/keenthemes/core/html/src/media/icons/duotune/files/fil002.svg-->
                            <span class="svg-icon svg-icon-muted svg-icon-1hx"><svg width="20" height="21" viewBox="0 0 20 21" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path opacity="0.3" d="M19 3.40002C18.4 3.40002 18 3.80002 18 4.40002V8.40002H14V4.40002C14 3.80002 13.6 3.40002 13 3.40002C12.4 3.40002 12 3.80002 12 4.40002V8.40002H8V4.40002C8 3.80002 7.6 3.40002 7 3.40002C6.4 3.40002 6 3.80002 6 4.40002V8.40002H2V4.40002C2 3.80002 1.6 3.40002 1 3.40002C0.4 3.40002 0 3.80002 0 4.40002V19.4C0 20 0.4 20.4 1 20.4H19C19.6 20.4 20 20 20 19.4V4.40002C20 3.80002 19.6 3.40002 19 3.40002ZM18 10.4V13.4H14V10.4H18ZM12 10.4V13.4H8V10.4H12ZM12 15.4V18.4H8V15.4H12ZM6 10.4V13.4H2V10.4H6ZM2 15.4H6V18.4H2V15.4ZM14 18.4V15.4H18V18.4H14Z" fill="currentColor"/>
                                <path d="M19 0.400024H1C0.4 0.400024 0 0.800024 0 1.40002V4.40002C0 5.00002 0.4 5.40002 1 5.40002H19C19.6 5.40002 20 5.00002 20 4.40002V1.40002C20 0.800024 19.6 0.400024 19 0.400024Z" fill="currentColor"/>
                                </svg>
                            </span>
                            <!--end::Svg Icon-->
                            {{date('Y-m-d',strtotime($transaction->created_at))}} /
                            <!--begin::Svg Icon | path: C:/wamp64/www/keenthemes/core/html/src/media/icons/duotune/general/gen013.svg-->
                            <span class="svg-icon svg-icon-muted svg-icon-1hx"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path opacity="0.3" d="M20.9 12.9C20.3 12.9 19.9 12.5 19.9 11.9C19.9 11.3 20.3 10.9 20.9 10.9H21.8C21.3 6.2 17.6 2.4 12.9 2V2.9C12.9 3.5 12.5 3.9 11.9 3.9C11.3 3.9 10.9 3.5 10.9 2.9V2C6.19999 2.5 2.4 6.2 2 10.9H2.89999C3.49999 10.9 3.89999 11.3 3.89999 11.9C3.89999 12.5 3.49999 12.9 2.89999 12.9H2C2.5 17.6 6.19999 21.4 10.9 21.8V20.9C10.9 20.3 11.3 19.9 11.9 19.9C12.5 19.9 12.9 20.3 12.9 20.9V21.8C17.6 21.3 21.4 17.6 21.8 12.9H20.9Z" fill="currentColor"/>
                                <path d="M16.9 10.9H13.6C13.4 10.6 13.2 10.4 12.9 10.2V5.90002C12.9 5.30002 12.5 4.90002 11.9 4.90002C11.3 4.90002 10.9 5.30002 10.9 5.90002V10.2C10.6 10.4 10.4 10.6 10.2 10.9H9.89999C9.29999 10.9 8.89999 11.3 8.89999 11.9C8.89999 12.5 9.29999 12.9 9.89999 12.9H10.2C10.4 13.2 10.6 13.4 10.9 13.6V13.9C10.9 14.5 11.3 14.9 11.9 14.9C12.5 14.9 12.9 14.5 12.9 13.9V13.6C13.2 13.4 13.4 13.2 13.6 12.9H16.9C17.5 12.9 17.9 12.5 17.9 11.9C17.9 11.3 17.5 10.9 16.9 10.9Z" fill="currentColor"/>
                                </svg>
                            </span>
                            <!--end::Svg Icon-->
                            {{date('h:i A',strtotime($transaction->created_at))}}
                        </td>
                        <td>
                            <a href="#" class="btn btn-sm btn-light btn-active-light-primary" data-kt-menu-trigger="click" data-kt-menu-placement="bottom-end">Actions
                                <!--begin::Svg Icon | path: icons/duotune/arrows/arr072.svg-->
                                <span class="svg-icon svg-icon-5 m-0">
                                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                        <path d="M11.4343 12.7344L7.25 8.55005C6.83579 8.13583 6.16421 8.13584 5.75 8.55005C5.33579 8.96426 5.33579 9.63583 5.75 10.05L11.2929 15.5929C11.6834 15.9835 12.3166 15.9835 12.7071 15.5929L18.25 10.05C18.6642 9.63584 18.6642 8.96426 18.25 8.55005C17.8358 8.13584 17.1642 8.13584 16.75 8.55005L12.5657 12.7344C12.2533 13.0468 11.7467 13.0468 11.4343 12.7344Z" fill="currentColor"></path>
                                    </svg>
                                </span>
                                <!--end::Svg Icon-->
                            </a>
                            <!--begin::Menu-->
                            <div class="menu menu-sub menu-sub-dropdown menu-column menu-rounded menu-gray-600 menu-state-bg-light-primary fw-semibold fs-7 w-125px py-3" data-kt-menu="true">
                                <!--begin::Menu item-->
                                @if (!$transaction->refunded_by )
                                <div class="menu-item px-3">
                                    <a href="#" data-transaction-id="{{$transaction->id}}" class=" refund_drawer menu-link px-3">Refund</a>
                                </div>
                                @endif
                                <!--end::Menu item-->
                            </div>
                            <!--end::Menu-->
                        </td>
                        <!--end::Action=-->
                    </tr>
                    <!--end::Table row-->
                @endforeach
            </tbody>
            <!--end::Table body-->
        </table>
        <!--end::Table-->
        {{-- begin:pagination --}}
        <div class="mt-4">
            {{ $material_transactions->appends(Request::except('page'))->render('components._pagination') }}
        </div>
        <p class="mt-3 text-muted">
            Displaying {{$material_transactions->count()}} of {{ $material_transactions->total() }} transaction(s).
        </p>
        {{-- end:pagination --}}
    </div>
    <!--end::Card body-->
</div>

<!--begin::Refund Drawer-->
<div
    id="kt_drawer_example_dismiss"
    class="bg-white"
    data-kt-drawer="true"
    data-kt-drawer-activate="true"
    data-kt-drawer-toggle=".refund_drawer"
    data-kt-drawer-close="#kt_drawer_example_dismiss_close"
    data-kt-drawer-overlay="true"
    data-kt-drawer-width="{default:'300px', 'md': '500px'}"
    >

    <div class="card rounded-0 w-100">
        <!--begin::Card header-->
        <div class="card-header pe-5">
            <!--begin::Title-->
            <div class="card-title">
                <!--begin::User-->
                <div class="d-flex justify-content-center flex-column me-3">
                    <a href="#" class="fs-4 fw-bold text-gray-900 text-hover-primary me-1 lh-1">Refund Material Transaction</a>
                </div>
                <!--end::User-->
            </div>
            <!--end::Title-->
            <!--begin::Card toolbar-->
            <div class="card-toolbar">
                <!--begin::Close-->
                <div class="btn btn-sm btn-icon btn-active-light-primary" id="kt_drawer_example_dismiss_close">
                    <!--begin::Svg Icon | path: icons/duotune/arrows/arr061.svg-->
                    <span class="svg-icon svg-icon-2">
                        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <rect opacity="0.5" x="6" y="17.3137" width="16" height="2" rx="1" transform="rotate(-45 6 17.3137)" fill="currentColor"></rect>
                            <rect x="7.41422" y="6" width="16" height="2" rx="1" transform="rotate(45 7.41422 6)" fill="currentColor"></rect>
                        </svg>
                    </span>
                    <!--end::Svg Icon-->
                </div>
                <!--end::Close-->
            </div>
            <!--end::Card toolbar-->
        </div>
        <!--end::Card header-->
        <!--begin::Card body-->
        <div class="card-body hover-scroll-overlay-y">
            <div class="mb-6 text-center">
                <img src="{{env('SECURE_ASSETS').'/assets/media/illustrations/sigma-1/4.png'}}" width="200" alt="">
            </div>

            <div  id="calc_container">
                <form method="POST" id="refund_material_transaction_form">
                    @csrf
                    <div class="row my-10">
                        <!--begin::Input group-->
                        <div class="form-floating col-md-12">
                            <input type="text" required name="refund_reason" value="{{old('refund_reason')}}" class="form-control" id="refund_reason" placeholder="Bought by mistake"/>
                            <label for="refund_reason" class="required text-muted mb-2 ms-3">Refund reason</label>
                        </div>
                    </div>
                    <button type="submit" class=" submit_btn btn btn-primary mx-auto d-block w-45 mt-4">
                        <!--begin::Svg Icon | path: icons/duotune/general/gen016.svg-->
                        <span class="svg-icon svg-icon-3">
                            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path d="M15.43 8.56949L10.744 15.1395C10.6422 15.282 10.5804 15.4492 10.5651 15.6236C10.5498 15.7981 10.5815 15.9734 10.657 16.1315L13.194 21.4425C13.2737 21.6097 13.3991 21.751 13.5557 21.8499C13.7123 21.9488 13.8938 22.0014 14.079 22.0015H14.117C14.3087 21.9941 14.4941 21.9307 14.6502 21.8191C14.8062 21.7075 14.9261 21.5526 14.995 21.3735L21.933 3.33649C22.0011 3.15918 22.0164 2.96594 21.977 2.78013C21.9376 2.59432 21.8452 2.4239 21.711 2.28949L15.43 8.56949Z" fill="currentColor"></path>
                                <path opacity="0.3" d="M20.664 2.06648L2.62602 9.00148C2.44768 9.07085 2.29348 9.19082 2.1824 9.34663C2.07131 9.50244 2.00818 9.68731 2.00074 9.87853C1.99331 10.0697 2.04189 10.259 2.14054 10.4229C2.23919 10.5869 2.38359 10.7185 2.55601 10.8015L7.86601 13.3365C8.02383 13.4126 8.19925 13.4448 8.37382 13.4297C8.54839 13.4145 8.71565 13.3526 8.85801 13.2505L15.43 8.56548L21.711 2.28448C21.5762 2.15096 21.4055 2.05932 21.2198 2.02064C21.034 1.98196 20.8409 1.99788 20.664 2.06648Z" fill="currentColor"></path>
                            </svg>
                        </span>
                        <span class="pulse-ring"></span>
                        <span class="indicator-label">
                            Refund
                        </span>
                        <span class="indicator-progress">
                            Please wait... <span class="spinner-border spinner-border-sm align-middle ms-2"></span>
                        </span>
                        <!--end::Svg Icon-->
                    </button>
                </form>
            </div>

        </div>
        <!--end::Card body-->
        <!--begin::Card footer-->
        <div class="card-footer">
            <!--begin::Dismiss button-->
            <button class="submit_btn btn btn-light-danger" data-kt-drawer-dismiss="true">Dismiss</button>
            <!--end::Dismiss button-->
        </div>
        <!--end::Card footer-->
    </div>
</div>
<!--end::Refund Drawer-->

@endsection
@section('js')

{{-- drawer --}}
<script>
    $('.refund_drawer').on('click',function(){
        let transaction_id=$(this).attr('data-transaction-id')
        let url="{{route('admin.material-transactions.refund',[':transaction_id'])}}"
        url = url.replace(':transaction_id', transaction_id);
        $('#refund_material_transaction_form').attr('action',url)
    })
</script>

@endsection