@extends('Admin.layout')

<style>
    .input-group {
        position: relative;
        width: 100%;
    }

    .input-group input {
        width: 100%;
        font-size: 16px;
        font-weight: 400;
        padding: 16px 120px 16px 14px;
        border-radius: 8px !important;
    }

    button#sendOtpBtn {
        z-index: 10;
    }

    .status-badge {
        padding: 4px 12px;
        border-radius: 20px;
        font-size: 12px;
        font-weight: 500;
        display: inline-block;
    }

    .status-active {
        background-color: #d4edda;
        color: #155724;
    }

    .status-inactive {
        background-color: #f8d7da;
        color: #721c24;
    }
</style>

@section('content')
<div class="row align-items-center justify-content-between mb-3 m-2">
    <div class="col-auto">
        <h5>    <button type="button" class="btn btn-icon bg-white me-2" style="box-shadow: 0px 9px 12px -2px #66328E1F;">
        <a href="{{ route('roi_gen_report') }}"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
                viewBox="0 0 24 24" fill="none" stroke="#000" stroke-width="2" stroke-linecap="round"
                stroke-linejoin="round" class="icon icon-tabler">
                <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                <path d="M15 6l-6 6l6 6" />
            </svg>
        </a>
    </button>ROI Reject Days 
            
        </h5>
    </div>
</div>


<div class="row align-items-center justify-content-center mb-3 m-2">
    <div class="col-lg-6">
        <div class="card shadow-sm mb-4">
            <div class="card-body">
                <h6 class="fw-semibold mb-3">Add Reject Days</h6>

                <div class="mb-3">
                    <form action="{{route('submit_reject_days')}}" method="post" id="submitForm">
                        @csrf
                        <div class="row g-3">

                            <div class="col-md-12">
                                <label class="form-label small mb-1">Reject Date</label>
                                <input type="date"
                                    name="reject_date"
                                    id="reject_date"
                                    class="form-control"
                                    value="{{ old('reject_date', isset($data->reject_date) ? \Carbon\Carbon::parse($data->reject_date)->format('Y-m-d') : '') }}"
                                    required>
                                @error('reject_date')
                                <small class="text-danger">{{ $message }}</small>
                                @enderror
                            </div>

                            <div class="col-md-12">
                                <label class="form-label small mb-1">Remark</label>
                                <textarea
                                    name="remark"
                                    id="remark"
                                    rows="4"
                                    class="form-control"
                                    placeholder="Enter remark"
                                    required>{{ old('remark', $data->remark ?? '') }}</textarea>
                                @error('remark')
                                <small class="text-danger">{{ $message }}</small>
                                @enderror
                            </div>




                        </div>
                        <div class="d-flex justify-content-center gap-3 mt-4">
                            <button type="reset" class="btn btn-label-secondary px-5 btn-sm">Discard</button>
                            <button type="button" id="" class="btn btn-primary px-5 btn-sm" data-bs-toggle="modal" data-bs-target="#confirmmodal">Submit</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>


<div class="card shadow-sm">
    <div class="card-header border-0 pb-0">
        <h6 class="fw-semibold mb-0">Reject Days History</h6>
    </div>
    <div class="card-body p-3">
        <div class="table-responsive">
            <table class="table table-hover mb-0" id="payoutTable">
                <thead class="table-light">
                    <tr>
                        <th>ID</th>
                        <th>Date</th>
                        <th>Reject Day</th>
                        <th>Remark</th>
                    </tr>
                </thead>
                <tbody>
                </tbody>
            </table>
        </div>
    </div>
</div>

<div class="modal fade" id="confirmmodal" tabindex="-1" data-bs-backdrop="static" data-bs-keyboard="false">
    <div class="modal-dialog modal-sm modal-dialog-centered">
        <div class="modal-content rounded-4 text-center p-4 py-5">
            <h5 class="fw-bold mb-2">Are you sure!!</h5>
            <p class="text-muted">Are you confirm to submit?</p>
            <div class="d-flex justify-content-center align-items-center gap-3 mt-4">
                <button type="button" class="btn btn-outline-primary p-2 fw-semibold" data-bs-dismiss="modal">Cancel</button>
                <button type="submit" id="submit_btn" class="btn btn-success p-2 ms-2 fw-semibold">Yes, Sure</button>
            </div>
        </div>
    </div>
</div>



<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.datatables.net/1.11.5/js/jquery.dataTables.min.js"></script>

<script>
         document.getElementById('submit_btn').addEventListener('click', function () {

        const btn = this;

        btn.disabled = true;
        btn.innerHTML = 'Processing...';

        document.getElementById('submitForm').submit();
    });
</script>


<script>
    $(document).ready(function() {

        const table = $('#payoutTable').DataTable({
            ajax: "{{ route('reject_days_list') }}",
            paging      : true,
            processing  : false,
            searching   : true,
            info        : true,
            ordering    : false,
            lengthChange: false,
            pageLength  : 10,
            columnDefs  : [{
                targets: '_all',
                className: 'text-nowrap'
            }],

            columns: [{
                    data: "DT_RowIndex",
                    name: "DT_RowIndex"
                },
                {
                    data: 'created_at',
                    name: 'created_at'
                },
                {
                    data: 'reject_date',
                    name: 'reject_date'
                },
                {
                    data: 'remark',
                    name: 'remark'
                },
                
            ]
        });
        $('#toDate').on('keyup change', function() {
            table.search(this.value).draw();
        });

        $('#pageLength').on('change', function() {
            table.page.len(this.value).draw();
        });

    });
</script>

@endsection