@extends('admin.layouts.main')

@section('content')

@if(Session::has('success'))
<div class="bs-toast" id="successmsgHomevana">
    <div class="toast-container position-fixed top-0 end-0 p-3">
        <div id="liveToast" class="toast show" role="alert" aria-live="assertive" aria-atomic="true">
            <div class="toast-header justify-content-end border-0 d-none">
                <!-- <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button> -->
            </div>
            <div class="toast-body">
                <div class="box-wrapper">
                    <div class="img-box">
                        <img src="{{env('APP_URL')}}assets/images/green-tick.svg" draggable="false" class="img-fluid" alt="">
                    </div>
                    <div class="content-box">
                        <div class="max-235">
                            <h2 class="bs-heading typ-18 typ-500 typ-white">Successful</h2>
                            <p class="bs-para typ-12 typ-white">{{ Session::get('success') }}</p>
                        </div>
                    </div>
                    <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close">
                        <span class="icon icon-close"></span>
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>
@endif
<main class="main">
    <div class="inner-app-main">
        <section class="section lyt-section">
            <div class="property--height">
                <div>
                    <h1 class="bs-heading typ-27 typ-800 mt-18 mb-24">User Management</h1>
                </div>
                <div class="row custom-row-gutter">
                    <div class="bs-card property-card mb-3">
                        <div class="append-div">
                            <div class="bs-flex-lyt upper-flex bs-search-box-set">
                                <div class="d-flex gap-24">
                                    <a href="{{ route('admin.user.AddUser') }}" class="bs-btn typ-blue-btn typ-export-btn">Add User</a>
                                </div>
                                <div class="append-search-bar"></div>
                            </div>
                        </div>
                        <div class="bs-table mb-0">
                            <table id="adminusermanagement" class="table table-striped display nowrap cell-border" style="width:100%">
                                <thead>
                                    <tr>
                                        <th></th>
                                        <th>First Name</th>
                                        <th>Last Name</th>
                                        <th>Type of User</th>
                                        <th>Phone Number</th>
                                        <th>Email ID</th>
                                        <th>No of Properties</th>
                                        <th>End-to-end property </th>
                                        <th>Paperwork made easy</th>
                                        <th>Background check</th>
                                        <th>Action</th>
                                    </tr>
                                </thead>
                                <tbody>
                                   
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </div>
</main>

<div class="bs-model">
        <div class="modal fade" id="servicePayment" aria-hidden="true" tabindex="-2">
            <div class="modal-dialog modal-dialog-centered justify-content-center">
                <div class="max-451 w-100">
                    <!-- <div class="model-logo text-center mb-42">
                        <img src="assets/images/logo.svg" alt="logo" class="img-fluid" >
                    </div> -->
                    <div class="modal-content">
                        <div class="modal-body">
                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">
                                <span class="icon icon-close"></span>
                            </button>

                            <h2 class="bs-heading typ-24 typ-black typ-600 mb-24">
                                Service Payment
                            </h2>

                            <form action="{{route('service-users.store')}}" method="POST" id="subscriptionForm" class="bs-form mb-18">
                                @csrf
                                <input type="number" name="user_id" id="user_id" hidden value="">
                                <div class="row">
                                    <div class="col-12">
                                        <div class="input-box mb-18">
                                            <label class="input-label typ-500 mb-10" for="services">Choose
                                                Service</label>
                                                <select class="input-select" name="service" id="service-name">
                                                <option value="0">Select service</option>
                                                <option value="Paper work made easy">Paper work made easy</option>
                                                <option value="End to end">End to end</option>
                                                <option value="Background check">Background check</option>

                                            </select>
                                            <span id="service-error" class="error"></span>
                                        </div>
                                    </div>
                                    <div class="col-md-6 col-12">
                                        <div class="input-box mb-18">
                                            <label class="input-label typ-500 mb-10" for="from-date">From Date</label>
                                            <div class="">
                                                <input type="date" name="start_date" class="form-control" id="start_date" placeholder="DD/MM/YYYY">
                                                <div class="calender-icon"><img src="assets/images/calender.svg"
                                                        class="img-fluid" alt=""></div>
                                            </div>
                                            @error('date_error')
                                                    <span class="error">{{$message}}</span>
                                            @enderror
                                        </div>
                                    </div>
                                    <div class="col-md-6 col-12">
                                        <div class="input-box mb-18">
                                            <label class="input-label typ-500 mb-10" for="to-date">To Date</label>
                                            <div class="">
                                                <input type="date" name="end_date" class="form-control" id="end_date" placeholder="DD/MM/YYYY">
                                                <div class="calender-icon"><img src="assets/images/calender.svg"
                                                        class="img-fluid" alt=""></div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-12">
                                    <div class="input-box mb-18">
                                    <div class="bs-input-box input-box">
                                        <label for="monthly-rent"
                                            class="input-label typ-500 typ-clr-grey2 ls-0 mb-10">Amount</label>
                                        <div class="rupee-box">
                                            <input type="number" name="amount" class="input-field" id="amount">
                                        </div>
                                        <span id="amount-error" class="error"></span>

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

                                <div class="">
                                <button class="bs-button typ-fill-blue me-3">
                                Submit 
                                </button>
                                <button type="button" id="cancelSubsc" class="bs-button typ-border-grey5">
                                Cancel 
                                </button>
                              
                            </div>
                            </form>
                            
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    @endsection

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<script>
    $(document).ready(function() {
        var table = $('#adminusermanagement').DataTable({
            ajax: {
                url: "{{ route('admin.user.search') }}",
                dataSrc: 'data'
            },
            columns: [
                { data: 'id'},
                { data: 'first_name'},
                { data: 'last_name'},
                { data: 'user_type'},
                { data: 'phone_number'},
                { data: 'email'},
                { data: 'properties_count'}, 
                { data: 'end_to_end'},
                { data: 'paper_work'},  
                { data: 'background_ckeck'},  
                { data: 'action'}
            ],
            "columnDefs": [
        {
            "targets": [ 0 ],
            "visible": false,
            "searchable": true
        },
        ],
            scrollX: true,
            info: true,
            order: [[0, 'desc']],
            ordering: true,
            language: {
                paginate: {
                    first: false,
                    last: false,
                    next: "Next",
                    previous: "Previous"
                }
            }
        });
    });

    setTimeout(function() {
    $('#successmsgHomevana').fadeOut('fast');
}, 1000);


   function handlePayment(userId){
            document.getElementById("user_id").value=userId;
            $("#servicePayment").modal('show')
        }
</script>