@extends('layouts.app')
@section('content')
<style>
    @media (max-width: 768px) { /* Adjust breakpoint as needed */
      .wg-table {
        display: block;
        overflow-x: auto;
      }

      .table-title,
      .wg-product {
        display: grid;
        grid-template-columns: repeat(6, 1fr); /* Adjust based on the number of columns */
        min-width: 900px; /* Ensure equal width for headers and data */
      }

      .table-title li,
      .wg-product > div {
        text-align: center; /* Align text for consistency */
      }

      .img-product {
        max-width: 50px; /* Adjust image size if necessary */
      }

      .table-title {
        display: flex;
        justify-content: space-between;
      }

      .dropdown.default {
        margin-left: auto; /* Push dropdown to the right */
        position: relative;
      }

      .dropdown-menu {
        right: 0; /* Align dropdown menu to the right */
        left: auto; /* Override default alignment */
      }
    }
</style>
<div class="flex items-center flex-wrap justify-between gap20 mb-30">
    <h3>Encashment #{{$encashment_query->reference}}</h3>
    <ul class="breadcrumbs flex items-center flex-wrap justify-start gap10">
        <li>
            <a href="javascript:void(0)"><div class="text-tiny">Dashboard</div></a>
        </li>
        <li>
            <i class="icon-chevron-right"></i>
        </li>
        <li>
            <a href="#"><div class="text-tiny">Encashments</div></a>
        </li>
        <li>
            <i class="icon-chevron-right"></i>
        </li>
        <li>
            <div class="text-tiny">Encashment #{{$encashment_query->reference}}</div>
        </li>
    </ul>
</div>
<div class="row">
    <div class="col-md-9">
        <div class="wg-box mb-20 gap10">
            <div class="row">
                <div class="col-6 mb-20">

                    <div class="summary-item">
                        <div class="body-text">Reference</div>
                        <input class="form-control fs-4" value="{{$encashment_query->reference}}" disabled>
                    </div>
                </div>
                <div class="col-6 mb-20">
                    <div class="summary-item">
                        <div class="body-text">Request Type</div>
                        <input class="form-control fs-4" value="{{$encashment_query->request_type}}" disabled>
                    </div>
                </div>
                <div class="col-4 mb-20">
                    <div class="summary-item">
                        <div class="body-text">Requested Amount</div>
                        <input class="form-control fs-4" value="₱{{number_format($encashment_query->request_bonus,2)}}" disabled>
                    </div>
                </div>
                <div class="col-4 mb-20">
                    <div class="summary-item">
                        <div class="body-text">Tax({{$encashment_query->tax}}%)</div>
                        <input class="form-control fs-4" value="₱{{number_format($encashment_query->tax_amount,2)}}" disabled>
                    </div>
                </div>
                <div class="col-4 mb-20">
                    <div class="summary-item">
                        <div class="body-text">Processing Fee</div>
                        <input class="form-control fs-4" value="₱{{number_format($encashment_query->processing_fee,2)}}" disabled>
                    </div>
                </div>
                <div class="col-4 mb-20">
                    <div class="summary-item">
                        <div class="body-text">Payout</div>
                        <input class="form-control fs-4" value="₱{{number_format($encashment_query->payout,2)}}" disabled>
                    </div>
                </div>
                <div class="col-4 mb-20">
                    <div class="summary-item">
                        <div class="body-text">Date</div>
                        <input class="form-control fs-4" value="{{date('d M Y',strtotime($encashment_query->created_at))}}" disabled>
                    </div>
                        </div>
                <div class="col-4 mb-20">
                    <div class="summary-item">
                        <div class="body-text">Status</div>
                        <input class="form-control fs-4 " value="{{$encashment_query->status}}" disabled>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-md-3">

        <div class="wg-box mb-20 gap10 fs-4">
            <div class="body-title">User Info</div>
            <div class="d-flex justify-content-between mb-10">
                <div>Username:</div>
                <div>{{$encashment_query->user->username}}</div>
            </div>
            <div class="d-flex justify-content-between mb-10">
                <div>DID:</div>
                <div>{{$encashment_query->user->id_number}}</div>
            </div>
            <div class="d-flex justify-content-between mb-10">
                <div>First Name:</div>
                <div>{{$encashment_query->user->firstname}}</div>
            </div>
            <div class="d-flex justify-content-between mb-10">
                <div>Last Name:</div>
                <div>{{$encashment_query->user->surname}}</div>
            </div>
            <div class="d-flex justify-content-between mb-10">
                <div>Role:</div>
                <div>{{$encashment_query->user->role->title}}</div>
            </div>
        </div>
        @can('do',['process','encashments'])
        @if($encashment_query->status == 'PENDING')
        <div class="wg-box mb-20 gap10">
            <form method="POST" action="{{route('shop-bo.encashments.show.update',['encashment_id' => Crypt::encrypt($encashment_query->id)])}}">
                @csrf
                @honeypot
                <div class="body-title">Payment Status</div>
                <div class="select flex-grow">
                    <select class="" name="status" id="courier">
                        <option {{$encashment_query->status == "COMPLETED" ? "selected" : ""}}>COMPLETED</option>
                        <option {{$encashment_query->status == "CANCELLED" ? "selected" : ""}}>CANCELLED</option>
                    </select>
                </div>
                <br>
                <button class="tf-button style-1 w-full confirm-form" data-confirm-message="Are you sure you want to update this encashment?">Update</button>
            </form>
        </div>
        @endif
        @endcan
    </div>
</div>
@endsection
@section('page_script')
@parent
<script>
    $(".encashments-menu").addClass("active");
    $(".encashments-{{strtolower($status)}}").addClass("active");
</script>
@endsection
<!-- App js -->