@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-roi {
        border: none;
        border-radius: 12px;
        overflow: hidden;
    }

    .card-roi .card-header {
        background: linear-gradient(135deg, #0f2f36, #133d45, #1c5a64) !important;
        color: white;
        padding: 1.5rem;
        border-bottom: none;
    }

    .card-roi .card-title {
        color: white !important;
        margin-bottom: 0;
        display: flex;
        align-items: center;
        gap: 10px;
        font-weight: 600;
    }
</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('admin.profit_payout') }}">
                <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
    </h5>
    <div class="container py-5">
        <div class="row justify-content-center">
            <div class="col-lg-5 col-md-7 col-sm-12">
                <div class="card card-roi shadow-lg">
                    <div class="card-header text-center">
                        <h3 class="card-title">
                            <i class="ti tabler-chart-arrows-vertical fs-1"></i>
                            Weekly Generate
                        </h3>
                    </div>
                    <div class="card-body p-5">
                        <form id="SubmitForm" action="{{ route('admin.weekly_profit_payout') }}" method="POST">
                            @csrf

                            <div class="row">

                                <!-- From Date -->
                                <div class="col-md-6 mb-4">
                                    <label class="form-label fw-bold 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" id="from_date"
                                            class="form-control form-control-lg" required>
                                    </div>
                                    <small class="text-danger d-none" id="date_error">Only Saturday is allowed</small>
                                </div>

                                <!-- To Date -->
                                <div class="col-md-6 mb-4">
                                    <label class="form-label fw-bold mb-2">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" id="to_date"
                                            class="form-control form-control-lg" readonly required>
                                    </div>
                                </div>

                            </div>

                            <div class="d-grid gap-2 mt-4">
                                <button type="submit" class="btn btn-primary fw-bold" id="submit_btn">
                                    <i class="ti tabler-rocket"></i> Submit & Generate
                                </button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script>
        document.getElementById('submit_btn').addEventListener('click', function(e) {

            e.preventDefault(); // ✅ prevent double submit

            let btn = this;

            btn.disabled = true;

            btn.innerText = 'Processing...';

            document.getElementById('SubmitForm').submit();

        });
    </script>
    <script>
        document.getElementById('from_date').addEventListener('change', function() {

            let fromDate = new Date(this.value);
            let day = fromDate.getDay(); // 6 = Saturday

            let error = document.getElementById('date_error');

            if (day !== 6) {

                error.classList.remove('d-none');
                this.value = '';
                document.getElementById('to_date').value = '';
                return;

            }

            error.classList.add('d-none');

            // add 6 days → next Friday
            let toDate = new Date(fromDate);
            toDate.setDate(fromDate.getDate() + 6);

            let yyyy = toDate.getFullYear();
            let mm = String(toDate.getMonth() + 1).padStart(2, '0');
            let dd = String(toDate.getDate()).padStart(2, '0');

            document.getElementById('to_date').value = `${yyyy}-${mm}-${dd}`;

        });
    </script>
@endsection