@extends('Admin.layout')

<link rel="stylesheet" href="https://cdn.datatables.net/1.13.6/css/jquery.dataTables.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@tabler/icons-webfont@latest/tabler-icons.min.css">

<style>
    .card-level {
        border: none;
        border-radius: 14px;
        overflow: hidden;
    }

    .card-level .card-header {
        background: linear-gradient(to right, #660066, #0E4E6D);
        color: #fff;
        padding: 1.5rem;
        border-bottom: none;
    }

    .card-level .card-title {
        margin-bottom: 0;
        display: flex;
        align-items: center;
        justify-content: start;
        gap: 10px;
        font-weight: 600;
        font-size: 1.3rem;
        color: #fff;
    }
</style>

@section('content')
<meta name="csrf-token" content="{{ csrf_token() }}">

<h5>
    <button type="button" class="btn btn-icon bg-white me-2" style="box-shadow: 0px 9px 12px -2px #66328E1F;">
        <a href="{{ route('generate_payout_profit_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>
    Generate 5 Star Profit Payout
</h5>
<div class="container mt-5">

    <div class="row justify-content-center">
        <div class="col-lg-5 col-md-7 col-sm-12">

            <div class="card card-level shadow-lg">

                <div class="card-header">
                    <h5 class="card-title">
                        <i class="ti tabler-chart-bar"></i>
                        5Star Payout Generation
                    </h5>
                </div>

                <div class="card-body p-4">

                    <form action="{{ route('manual_fivestar_profit_payout')}}" id="submitForm" method="post">
                        @csrf

                        <div class="mb-4">
                            <label class="form-label fw-semibold mb-2">From Date(Saturday Only)</label>
                            <div class="input-group">
                                <span class="input-group-text bg-light">
                                    <i class="ti tabler-calendar-event text-primary"></i>
                                </span>
                                <input type="date"
                                    name="from_date"
                                    class="form-control form-control-lg"
                                    value="{{ old('from_date', \Carbon\Carbon::now()->previous(\Carbon\Carbon::SATURDAY)->format('Y-m-d')) }}"
                                    required>

                            </div>
                            @error('from_date')
                            <small class="text-danger">{{ $message }}</small>
                            @enderror

                        </div>
                        <div class="mb-4">
                            <label class="form-label fw-semibold mt-5">To Date(Auto)</label>

                            <div class="input-group">
                                <span class="input-group-text bg-light">
                                    <i class="ti tabler-calendar-event text-primary"></i>
                                </span>
                                <input type="date"
                                    name="to_date"
                                    class="form-control form-control-lg"
                                    value="{{ old('to_date', \Carbon\Carbon::now()->previous(\Carbon\Carbon::FRIDAY)->format('Y-m-d')) }}"
                                    required readonly>
                            </div>
                            @error('to_date')
                            <small class="text-danger">{{ $message }}</small>
                            @enderror


                        </div>

                        <div class="d-grid gap-2 mt-5">
                            <button type="submit" id="submit_btn" class="btn btn-primary btn-submit fw-bold">
                                <i class="ti tabler-rocket"></i> Submit & Generate
                            </button>

                        </div>

                    </form>

                </div>
            </div>

        </div>
    </div>

</div>
<!-- delete -->
<div class="modal fade" id="deletePayout" 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 delete?</p>
            <form action="{{route('delete_profit_payout')}}" id="DeleteForm" method="post">
                @csrf
                <input type="hidden" name="id" id="payout_id" value="{{ old('id') }}">

                <div class="mb-3 text-start">
                    <label class="form-label fw-semibold">Reason</label>
                    <textarea name="reason" class="form-control" rows="3" placeholder="Enter reason for deletion">{{ old('reason') }}</textarea>
                    @error('reason')
                    <small class="text-danger">{{ $message }}</small>
                    @enderror

                </div>

                <div class="d-flex justify-content-center align-items-center gap-3 mt-4">
                    <button type="button" class="btn btn-outline-secondary p-3 fw-semibold" data-bs-dismiss="modal">
                        Cancel
                    </button>
                    <button type="submit" id="submit_delete" class="btn btn-danger p-3 ms-2 fw-semibold">
                        Yes, Sure
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

<script>
    function setDeleteId(button) {
        document.getElementById('payout_id').value = button.getAttribute('data-id');
    }

    document.getElementById('DeleteForm').addEventListener('submit', function() {
        const btn = document.getElementById('submit_delete');
        btn.disabled = true;
        btn.innerText = 'Deleting...';
    });
</script>
<script>
   document.addEventListener('DOMContentLoaded', function () {

    const fromDate = document.querySelector('input[name="from_date"]');
    const toDate = document.querySelector('input[name="to_date"]');

    fromDate.addEventListener('change', function () {

        if (!this.value) return;

        let date = new Date(this.value);

        // Allow only Saturday (6)
        if (date.getDay() !== 6) {
            alert('Please select a Saturday.');
            this.value = '';
            toDate.value = '';
            return;
        }

        // Saturday + 6 days = Friday
        date.setDate(date.getDate() + 6);

        const year = date.getFullYear();
        const month = String(date.getMonth() + 1).padStart(2, '0');
        const day = String(date.getDate()).padStart(2, '0');

        toDate.value = `${year}-${month}-${day}`;
    });

});
</script>
@endsection