@extends('user.layouts')
@section('title', 'Users Agent')
@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')
<style>
 .badge {
    padding: 5px 10px;
    border-radius: 5px;
    color: #fff;
    font-size: 12px;
}
.danger-badge {
    background-color: #e74c3c;
}
.success-badge {
    background-color: #2ecc71;
}
.warning-badge {
    background-color: #f39c12;
}
  </style>
    <div class="container-fluid page-wrapper">
        <div class="row">
            <div class="d-flex justify-content-between align-items-center">
                <div class="d-flex align-items-center">
                    <div class="breadcrumb-box" onclick="redirectToPreviousPage()">
                        <i class="fa-solid fa-chevron-left"></i>
                    </div>
                    <div class="ms-3">
                        <h3 class="page-top-heading" style="font-weight:600 !important;"><span
                                class="ms-2 text-primary text-decoration-underline">{{ $user_agent->agent_code }}</span>
                        </h3>
                    </div>
                </div>
           
            </div>
        </div>
        <div class="row mt-4">
            <div class="card basic-card">
                <div class="card-body">
                    <div class="row mt-2">
                        <div class="col-xxl-3 col-xl-3 col-lg-3 col-md-4 col-sm-6 col-6">
                            <div class="card user-widget-card mb-3 mb-sm-3 mb-md-0 mb-lg-0 mb-xl-0 mb-xxl-0">
                                <div class="card-body">
                                    <p class="card-title">Wallet Balance</p>
                                    <h6 class="value-show"><span class="pe-2">₹</span>{{ $user_agent->wallet }}</h6>
                                </div>
                            </div>
                        </div>
                        <div class="col-xxl-3 col-xl-3 col-lg-3 col-md-4 col-sm-6 col-6">
                            <div class="card user-widget-card mb-3 mb-sm-3 mb-md-0 mb-lg-0 mb-xl-0 mb-xxl-0">
                                <div class="card-body">
                                    <p class="card-title">Total Reward</p>
                                    <h6 class="value-show"><span class="pe-2">₹</span>{{ $reward }}</h6>
                                </div>
                            </div>
                        </div>
                        <div class="col-xxl-3 col-xl-3 col-lg-3 col-md-4 col-sm-6 col-6">
                            <div class="card user-widget-card mb-3 mb-sm-3 mb-md-0 mb-lg-0 mb-xl-0 mb-xxl-0">
                                <div class="card-body">
                                    <p class="card-title">Withdraw</p>
                                    <h6 class="value-show"><span class="pe-2">₹</span>{{ number_format($withdraw, 2) }}</h6>
                                </div>
                            </div>
                        </div>
                        <div class="col-xxl-3 col-xl-3 col-lg-3 col-md-4 col-sm-6 col-6">
                            <div class="card user-widget-card mb-3 mb-sm-3 mb-md-0 mb-lg-0 mb-xl-0 mb-xxl-0">
                                <div class="card-body">
                                    <p class="card-title">Total Referral</p>
                                    <h6 class="value-show">{{ $referrals }}</h6>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- Table Row -->
                    <div class="row mt-5">
                        <form action="{{ route('user_agent_month') }}" method="POST">
                            @csrf
                        <div class="table-header d-flex justify-content-between align-items-center mt-2 mb-3">
                            <div class="d-flex justify-content-center align-items-center">
                                <h5 class="table-sub-heading me-4">Total Referrals</h5>
                                <div>
                                    <input type="hidden" name="id" value="{{$user_agent->id}}">
                                    <select class="form-select month-filter-select" aria-label="MonthFilterSelect" required>
                                        <option value=" "selected>Select Month</option>
                                        <option value="1"selected>January</option>
                                        <option value="2">February</option>
                                        <option value="3">march</option>
                                        <option value="4">April</option>
                                        <option value="5">May</option>
                                        <option value="6">June</option>
                                        <option value="7">July</option>
                                        <option value="8">August</option>
                                        <option value="9">September</option>
                                        <option value="10">October</option>
                                        <option value="11">November</option>
                                        <option value="12">December</option>
                                    </select>
                                </div>
                                <button class="btn btn-primary" type="submit"><i
                                    class="ri-file-excel-2-line me-2"></i>Filter
                                </button>
                            </div>
                            <button class="btn btn-primary excel-btn excel-users-agent"><i
                                    class="ri-file-excel-2-line me-2"></i>Excel</button>
                                </form>
                        </div>
                        <table id="data-table" class="table nowrap align-middle" style="width:100%">
                            <thead>
                                <tr>
                                    <th>SN</th>
                                    <th>DATE</th>
                                    <th>AGENT ID</th>

                                    <th>NAME</th>
                                    <th>PHONE NO</th>
                                    <th>REFERRAL ID</th>
                                    <th>STATUS</th>
                                  
                                </tr>
                            </thead>
                            @php
                            $sn = 1; 
                            @endphp
                            <tbody>
                             @foreach($referral_users as $user)
<tr>
    <td>{{ $loop->iteration }}</td>
    <td>{{ $user->created_at->format('d-m-Y') }}</td>
    <td>{{ $user->agent_code ?? 'null' }}</td>

    <td>{{ $user->name }}</td>
    <td>{{ $user->phone_number }}</td>
    <td>{{ $user_agent->agent_code }}</td> {{-- referral id --}}
    <td>
        <span class="{{ $user->is_active ? 'text-warning' : 'text-primary' }}">
            {{ $user->is_active ? 'Active' : 'InActive' }}
        </span>
    </td>
</tr>
@endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
        <!--Convert Modal  Starts-->
        <div class="modal fade zoom-in" id="ConvertModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-body">
                        <div class="row">
                            <div class="col-lg-12">
                                <div class="p-3">
                                    <div class="text-center">
                                        <img class="mb-3" src="{{ asset('/assets/images/icons/convert.svg') }}">
                                        <p class="my-4 are-you-sure"></p>
                                        <p class="text-muted my-2 are-you-sure-subtext">Are you sure want to convert this agent to jilla coordinator?</p>
                                    </div>
                                    <form action="{{ route('jilla_user') }}" method="POST" enctype="multipart/form-data">
                                        @csrf
                                        <input type="hidden" id="jilla_id" name="jilla_id">
                                        <div class="form-group my-3">
                                            <label for="dropdownField">Select A District:</label>
                                            <select id="dropdownField" name="district" class="form-control" required>
                                                @foreach ($districts as $district)
                                                    <option value="{{ $district->id }}">{{ $district->district_name }}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                        <div class="d-flex align-items-center mt-5 mb-3">
                                            <button type="button" data-bs-dismiss="modal" class="btn btn-light cancel-btn me-3">Cancel</button>
                                            <button type="submit" class="btn btn-primary yes-btn"><i class="fa-regular fa-circle-check me-2"></i>Yes, Convert</button>
                                        </div>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- Modal Ends-->
    </div>
    <!-- Container Fluid ends -->
@endsection
@section('footer')
    <script>
        function JillaId(button) {
            var jilla_id = button.getAttribute('data-user-id');
            document.getElementById('jilla_id').value = jilla_id;
        }
    </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.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>
    <script>
        $(document).ready(function() {
            var table1 = $('#data-table').DataTable({
                dom: 'Bfrtip',
                buttons: [{
                    extend: 'excelHtml5',
                    text: 'Export to Excel',
                    className: 'd-none',
                    filename: 'Total Referrals'
                }],
                responsive: true
            });
            $('.excel-users-agent').on('click', function() {
                table1.button('.buttons-excel').trigger();
            });
        });
    </script>
@endsection