@extends('Admin.layout')

@section('content')

    <style>
        .page-title {
            font-weight: 700;
            color: var(--bs-body-color);
            letter-spacing: .3px;
        }

        .roi-card {
            border: 1px solid rgba(255, 255, 255, .08);
            border-radius: 18px;
            background: var(--bs-body-bg);
            box-shadow: 0 12px 28px rgba(0, 0, 0, .08);
            overflow: hidden;
            transition: .3s ease;
        }

        .roi-card:hover {
            transform: translateY(-4px);
            box-shadow: 0 18px 35px rgba(0, 0, 0, .12);
        }

        .card-head {
            background: linear-gradient(135deg, #dc3545, #ff6b6b);
            color: #fff;
            padding: 16px 20px;
            font-size: 17px;
            font-weight: 700;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        .card-body-custom {
            padding: 24px;
        }

        .form-label {
            font-weight: 600;
            margin-bottom: 8px;
            color: var(--bs-body-color);
        }

        .form-control {
            border-radius: 12px;
            padding: 12px 14px;
            background: var(--bs-body-bg);
            color: var(--bs-body-color);
            border: 1px solid rgba(128, 128, 128, .25);
        }

        .form-control:focus {
            box-shadow: 0 0 0 .18rem rgba(220, 53, 69, .15);
            border-color: #dc3545;
        }

        textarea.form-control {
            resize: none;
        }

        .submit-btn {
            border-radius: 12px;
            padding: 10px 28px;
            font-weight: 600;
            min-width: 170px;
            transition: .3s ease;
        }

        .submit-btn:hover {
            transform: scale(1.03);
        }

        .info-note {
            font-size: 13px;
            opacity: .75;
            margin-top: 6px;
        }
    </style>
<div class="row d-flex justify-content-between">
    <div class="col-auto">
        <h5>

   Block ROI
</h5>
    </div>
    <div class="col-auto">
        <a href="{{ route('admin.block_roi_report') }}" class="btn btn-primary">
            <i class="ti tabler-chart-bar"></i>&nbsp;
             Report
        </a>
    </div>
</div>
    <div class="container-fluid">

        <div class="row justify-content-center">
            <div class="col-lg-6 col-md-8">


                <div class="roi-card">

                    <div class="card-head">
                        <span><i class="ti tabler-ban me-2"></i>Block ROI</span>
                    </div>

                    <div class="card-body-custom">
                        <form action="#" method="POST">
                            @csrf

                            <div class="mb-4">
                                <label class="form-label">Select Date</label>
                                <input type="date" name="date" class="form-control">
                                <div class="info-note">Choose the date to suspend ROI generation.</div>
                            </div>

                            <div class="mb-4">
                                <label class="form-label">Reason</label>
                                <textarea name="reason" rows="4" class="form-control"
                                    placeholder="Enter reason for blocking ROI..."></textarea>
                            </div>

                            <div class="text-center">
                                <button type="submit" class="btn btn-danger submit-btn">
                                    <i class="ti tabler-lock me-1"></i> Submit
                                </button>
                            </div>

                        </form>
                    </div>

                </div>

            </div>
        </div>

    </div>

@endsection