@extends('user.layouts')
@section('title', 'Referral Master')
@section('header')

    <!-- DataTable CSS -->
    <link rel="stylesheet" type="text/css" href="{{ asset('/assets') }}/css/datatable/dataTables.bootstrap5.min.css">
    <link rel="stylesheet" type="text/css" href="{{ asset('/assets') }}/css/datatable/responsive.bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="{{ asset('/assets') }}/css/datatable/buttons.dataTables.min.css">

@endsection
@section('content')

@if(session('successmessage'))
<script>
    toastr.success("{{ session('successmessage') }}");
</script>
@endif

@if(session('errormessage'))
<script>
    toastr.error("{{ session('errormessage') }}");
</script>
@endif

    <div class="container-fluid page-wrapper">
        <div class="row">
            <div class="">
                <h3 class="page-top-heading">Referral Master</h3>
            </div>
        </div>


        <form action="{{ route('add_referral_master') }}" method="POST" class="mt-5">
            @csrf


            <div class="row mt-4">
                <div class="col-xl-4 col-lg-4 col-md-4 col-sm-6 col-6 mb-2">
                    <div class="">
                        <label class="mb-2 filter-by-p">Reward Amount</label>
                       

                             <input type="text"
           name="price"
           value="{{ old('price') }}"
           class="form-control @error('price') is-invalid @enderror">

    @error('price')
        <small class="text-danger">{{ $message }}</small>
    @enderror
                    </div>
                </div>
                <div
                    class="col-xl-3 col-lg-3 col-md-4 col-sm-6 col-6 mb-2 d-flex justify-content-center align-items-center">
                    <div class="">
                        <p style="visibility:hidden;" class="mb-2 filter-by-p">Submit</p>
                      <button type="submit" id="submitBtn" class="btn btn-primary feature-btn">
    <i class="fa-regular fa-circle-check me-2"></i>Submit
</button>
                    </div>
                </div>
            </div>
        </form>


        <!-- Table Row -->
        <div class="row mt-4">
            <div class="col-lg-12">
                <div class="card datatable-card">
                    <div class="card-body">
                        <table id="data-table" class="table nowrap align-middle" style="width:100%">
                            <thead>
                                <tr>
                                    <th>SN</th>
                                    <th>DATE</th>
                                    <th>REWARD</th>
                                    <th>STATUS</th>
                                </tr>
                            </thead>
                            @php
                                $sn = 1; // Initialize serial number
                            @endphp
                            <tbody>
                                @foreach ($referral_master as $ref_master)
                                    <tr>
                                        <td>{{ $loop->iteration }}</td>
                                        <td>{{ $ref_master->created_at ->format('Y-m-d') }}</td>
                                     
                                        <td>{{ $ref_master->price }}</td>
                                        <td>
                                            @if ($ref_master->is_active == 1)
                                                <span class="active-status">Active</span>
                                            @else
                                                <span class="inactive-status">Inactive</span>
                                            @endif
                                        </td>

                                    </tr>
                                @endforeach

                            </tbody>
                        </table>

                    </div>
                </div>
            </div>
        </div>


    </div>
    <!-- end container fluid -->



@endsection
@section('footer')
<script>
    document.addEventListener("DOMContentLoaded", function () {

        const form = document.querySelector('form');
        const submitBtn = document.getElementById('submitBtn');

        form.addEventListener('submit', function () {

            submitBtn.disabled = true;

            submitBtn.innerHTML =
                '<i class="fa-solid fa-spinner fa-spin me-2"></i>Submitting...';

        });

    });
</script>

    <!-- JQuery CDN -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"
        integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>

    <!-- Datatable JS -->
    <script type="text/javascript" src="{{ asset('/assets') }}/js/datatable/dataTables.bootstrap5.min.js"></script>
    <script type="text/javascript" src="{{ asset('/assets') }}/js/datatable/datatables.init.js"></script>
    <script type="text/javascript" src="{{ asset('/assets') }}/js/datatable/dataTables.responsive.min.js"></script>
    <script type="text/javascript" src="{{ asset('/assets') }}/js/datatable/jquery.dataTables.min.js"></script>
    <script type="text/javascript" src="{{ asset('/assets') }}/js/datatable/dataTables.buttons.min.js"></script>
    <script type="text/javascript" src="{{ asset('/assets') }}/js/datatable/buttons.html5.min.js"></script>
    <script type="text/javascript" src="{{ asset('/assets') }}/js/datatable/buttons.print.min.js"></script>
    <script type="text/javascript" src="{{ asset('/assets') }}/js/datatable/jszip.min.js"></script>
    <script type="text/javascript" src="{{ asset('/assets') }}/js/datatable/pdfmake.min.js"></script>
    <script type="text/javascript" src="{{ asset('/assets') }}/js/datatable/vfs_fonts.js"></script>



@endsection