@extends('admin.layouts.master')

@section('title', 'Assigned Requests And Listings')

@section('content')
    <div class="my-4">
        <h2 class="text-center">Assigned Requests And Listings</h2>
    </div>
    @if(auth()->guard('web_admin')->user()->id == 1)
    <div class="text-center">
        <a href="{{ route('admin.warningControl') }}" class="btn btn-primary">Warning Times Control</a>
    </div>
    @endif
    <div>
        <form action="" class="d-flex justify-content-around align-items-center col-10 px-0 mx-auto my-3">
            <div class="form-group d-flex jsutify-content-center align-items-center col-5">
                <label class="col-6" for="agent_select">Select Agent:</label>
                <select name="agent_id" id="agent_select" class="form-control col-6">
                    @foreach ($agents as $agent)
                        <option value="{{ $agent->id }}">{{ $agent->username }}</option>
                    @endforeach
                </select>
            </div>
            <div class="form-group d-flex jsutify-content-center align-items-center col-5">
                <label class="col-6" for="type_select">Select Agent:</label>
                <select name="type" id="type_select" class="form-control col-6">
                    <option value="Property">Listing</option>
                    <option value="Request">Request</option>
                </select>
            </div>
            <div class="form-group col-2">
                <button type="submit" class="btn btn-primary">Search</button>
            </div>
        </form>
        <table class="table table-bordered text-center bg-white py-4">
            <thead>
                <tr class="text-white" style="background-color:#01648af7;">
                    <th>Type</th>
                    <th>ID</th>
                    <th>Assign Date</th>
                    <th>Action Taken</th>
                    <th>Action Date</th>
                    <th>Feed Back</th>
                    <th>Status</th>
                    <th>Take Action</th>
                </tr>
            </thead>
            <tbody id="table_body">
            </tbody>
        </table>
    </div>
@endsection
@section('js')
    <script>
        $('form').on('submit', function(e) {
            e.preventDefault();
            var type = $('#type_select').val();
            var agent_id = $('#agent_select').val();
            console.log(type);
            if(type == 'Property') url = 'agentProperties/' + agent_id;
            if(type == 'Request') url = 'agentRequests/' + agent_id;
            $.ajax({
                'url': url,
                'type': 'GET',
                'data': {},

                success: function(res) { // What to do if we succeed
                    $('#table_body').empty();
                    res.data.forEach(dat => {
                        if(dat.status == 'need to take action within 30 mins') textColor = 'text-warning';
                        if(dat.status == 'warning this assign will be re-assign to another agent') textColor = 'text-danger';
                        if(dat.status != 'need to take action within 30 mins' && dat.status != 'warning this assign will be re-assign to another agent') textColor = 'text-body';
                        var urlVar = '{{ route("admin.takeAction", ":id") }}';
                        urlVar = urlVar.replace(':id', dat.id);
                        if(dat.action.includes(',')) dat.action = dat.action.split(',');
                        if(dat.action_date.includes(',')) dat.action_date = dat.action_date.split(',');
                        if(dat.feed_back.includes(',')) dat.feed_back = dat.feed_back.split(',');
                        $('#table_body').append('<tr>\
                            <td class="text-white" style="background-color:#01648af7;">'+type+'</td>\
                            <td class="bg-dark text-white">'+dat.prop_req_id+'</td>\
                            <td class="text-white" style="background-color:#213347;">'+dat.created_at+'</td>\
                            <td class="text-white" style="background-color:#3a7a85;" id="actCont'+dat.id+'"></td>\
                            <td class="text-white" style="background-color:#5b4056;" id="actDat'+dat.id+'"></td>\
                            <td class="text-white" style="background-color:#5b4056;" id="actFed'+dat.id+'"></td>\
                            <td class="bg-white  '+textColor+'">'+dat.status+'</td>\
                            <td class="bg-white"><a class="btn btn-success" href="'+urlVar+'">Take Action</a></td>\
                        </tr>');
                        dat.action.forEach(act=>{
                            $('#actCont'+dat.id).append('<tr><td>'+act+'</td></tr>');
                        })
                        dat.action_date.forEach(actD=>{
                            $('#actDat'+dat.id).append('<tr><td>'+actD+'</td></tr>');
                        })
                        dat.feed_back.forEach(actF=>{
                            $('#actFed'+dat.id).append('<tr><td>'+actF+'</td></tr>');
                        })
                    });
                },
                error: function(res) {
                    alert('Error' + res);
                }



            });
        })
    </script>
@endsection