@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_generation') }}">

                <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>

        Profit 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>

                            Profit Generate

                        </h3>

                    </div>

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

                        <form id="SubmitForm" action="{{ route('admin.manual_generate_roi') }}" method="POST">
                            @csrf

                            <div class="mb-4">
                                <label class="form-label fw-bold mb-2">Process Date</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="date" class="form-control form-control-lg" required
                                        value="{{ date('Y-m-d') }}">
                                </div>

                                <small class="text-muted mt-2 d-block">
                                    Defaulted to today's date.
                                </small>
                            </div>

                            <div class="d-grid gap-2 mt-5">
                                <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>
@endsection