@extends('layouts.master')
@section('title','SALES | VIEW REPRESENTATIVE')
@section('headasset')
@include('layouts.head-asset')
@stop
@section('content')
<div class="wrapper">
    @include('admin.main-header')
    <!-- Sidebar -->
    @include('admin.sidebar')
    <!-- End Sidebar -->
    <div class="main-panel">
        <div class="content">
            <div class="panel-header bg-info-gradient">
                <div class="page-inner py-5">
                    <div class="d-flex align-items-left align-items-md-center flex-column flex-md-row">
                        <div>
                            <h2 class="text-white pb-2 fw-bold">Sales Representative > {{$user->name}}</h2>
                        </div>
                        <div class="ml-md-auto py-2 py-md-0">
                            <!-- <a href="#" class="btn btn-white btn-border btn-round mr-2">Manage</a> -->
                            <a href="{{route('edit-user-sr',encrypt($user->id))}}"
                                class="btn btn-secondary btn-round btn-model-data-new">Edit Sales Representative</a>
                            <a href="{{route('assign-user-sr-region',encrypt($user->id))}}"
                                class="btn btn-secondary btn-round btn-model-data-new">Assign Region</a>
                        </div>
                    </div>
                </div>
            </div>
            <div class="page-inner mt--5">
                <div class="row">
                    <div class="col-md-12">
                        <div class="card">
                            <div class="card-body">
                                <div class="row mt--2">
                                    <div class="col-md-5">
                                        <div class="bp-list-wrapper">
                                            <div class="form-row px-2 py-2">
                                                <h3 class="bg-info text-white w-100 px-2">PERSONAL DETAILS</h3>
                                                <div class="form-group w-100">
                                                    <label for="name">Representative Name</label>
                                                    <input type="text" class="form-control" name="name" id="name"
                                                        value="{{$user->name}}" readonly>
                                                </div>
                                                <div class="form-group w-50">
                                                    <label for="gender">Gender</label>
                                                    <input type="text" class="form-control" name="gender" id="gender"
                                                        value="{{$user->gender}}" readonly>
                                                </div>
                                                <div class="form-group w-50">
                                                    <label for="dob">D.O.B</label>
                                                    <input type="date" class="form-control" name="dob" id="dob"
                                                        value="{{$user->dob}}" readonly>
                                                </div>
                                                <div class="form-group w-50">
                                                    <label for="designation">Designation</label>
                                                    <input type="text" class="form-control" name="designation"
                                                        id="designation" value="{{$user->designation}}" readonly>
                                                </div>

                                                <div class="form-group w-50">
                                                    <label for="mobile">Contact</label>
                                                    <input type="text" class="form-control" name="mobile" id="mobile"
                                                        value="{{$user->mobile}}" readonly>
                                                </div>

                                                <div class="form-group w-100">
                                                    <label for="email">Email</label>
                                                    <input type="text" class="form-control" name="email" id="email"
                                                        value="{{$user->email}}" readonly>
                                                </div>
                                                <div class="form-group w-100">
                                                    <label for="address">Address</label>
                                                    <input type="text" class="form-control" name="address" id="address"
                                                        value="{{$user->address}}" readonly>
                                                </div>

                                                <div class="form-group w-50">
                                                    <label for="city">City</label>
                                                    <input type="text" class="form-control" name="city" id="city"
                                                        value="{{$user->city}}" readonly>
                                                </div>
                                                <div class="form-group w-50">
                                                    <label for="zipcode">Pincode</label>
                                                    <input type="text" class="form-control" name="zipcode" id="zipcode"
                                                        value="{{$user->zipcode}}" readonly>
                                                </div>

                                                @if(Auth::user()->role_id==1)
                                                <div class="form-group w-100">
                                                    <label for="status">Status</label>
                                                    <input type="text" class="form-control" name="status" id="status"
                                                        value="{{$user->status==1 ? " Active" : "Inactive" }}" readonly>
                                                </div>
                                                @endif

                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-7">
                                        <div class="bp-list-wrapper">
                                            <div class="form-row px-2 py-2">
                                                <h3 class="bg-info text-white w-100 px-2">ZONE / REGION DETAILS</h3>
                                                <div class="form-group w-100">
                                                <table class="table table-bordered mt-4">
                                                    <tr>
                                                        <th>Zone</th>
                                                        <th>Zone Head</th>
                                                        <th>Regions</th>
                                                        <th>Region Head</th>
                                                        <th>Action</th>
                                                    </tr>
                                                    @if($srep)
                                                    @foreach($srep as $sr)
                                                    <tr>
                                                        <td>{{$sr->zone_name}}</td>
                                                        <td>
                                                            <input type="checkbox" class="manage-zone"
                                                                data-sr-id="{{$sr->id}}" data-zone-id="{{$sr->zone_id}}" data-user-id="{{$user->id}}"
                                                                {{$sr->is_zone_head?"checked":""}}>
                                                        </td>
                                                        <td>{{$sr->region_name}}</td>
                                                        <td>
                                                            <input type="checkbox" class="manage-region" data-user-id="{{$user->id}}"
                                                                data-sr-id="{{$sr->id}}"
                                                                data-region-id="{{$sr->region_id}}"
                                                                {{($sr->is_region_head)
                                                            ?"checked":""}}>
                                                        </td>
                                                        <td>
                                                            <a href='#' class='text-danger' data-class-level='$val'
                                                                onclick="deleteModelData('{{$sr}}','{{$user->name}}')"
                                                                data-toggle='modal' data-target='#delete_model_data'
                                                                title='Delete This Region'>
                                                                <i class='fas fa-trash'></i>
                                                            </a>
                                                        </td>
                                                    </tr>
                                                    @endforeach
                                                    @endif
                                                </table>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        @include('admin.footer')
    </div>
</div>
<div class="modal fade" id="delete_model_data" tabindex="-1" role="dialog" aria-labelledby="delete_model_data"
    aria-hidden="true">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content px-1">
            <div class="modal-header text-center px2">
                <h5 class="modal-title"></h5>
            </div>
            <form id="ManageUserDataForm" method="POST" action="{{route('remove-user-sr-region-save')}}">
                <div class="bp-list-wrapper">
                    @csrf
                    <div class="form-row form-row-2 px-3 py-2">
                        <input type="hidden" id="sr_id" name="sr_id" required>
                        <div class="form-group w-100">
                            <label for="name">Sales Representative Name</label>
                            <input type="text" class="form-control" name="name" id="name_del">
                        </div>

                        <div class="form-group text-center" style="width: 100%;">
                            <button type="submit" class="btn btn-submit btn-dark w-100"><i
                                    class="fas fa-edit"></i></button>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>
@stop
@section('jsscript')
@include('layouts.jsscript')
<script>
    function deleteModelData(sr, name) {
        var srep=JSON.parse(sr);
        $(".modal-title").html("SURE YOU WANT TO DELETE FOLLOWING REGION?").css('color', '#d9534f');
        $(".btn-submit").html("DELETE REGION").css('background-color', '#d9534f');
        $('#sr_id').val(srep.id);
        $('#name_del').val(name).prop('readonly', true);
        sr = {};
    }

    $(document).ready(function () {
        var csrfToken = '{{ csrf_token() }}';
        $('.manage-zone').on('change', function () {
            var opt = "";
            var user_id=$(this).data('user-id');
            var sr_id = $(this).data('sr-id');
            var zone_id = $(this).data('zone-id');

            if ($(this).is(':checked')) {
                opt = "add";

            } else {
                opt = "remove";
            }
            $.ajax({
                url: "{{route('admin-assign-zone')}}",
                type: 'POST',
                data: { "_token": csrfToken,"user_id":user_id, "sr_id": sr_id, "zone_id": zone_id, 'opt': opt },
                headers: {
                    'X-CSRF-TOKEN': csrfToken,
                },
                success: function (response) {
                    if(response.msg==="success"){
                        location.reload();
                    }
                },
                error: function (error) {
                    // Handle the error response
                    console.error('Error:', error);
                }
            });
        });

        $('.manage-region').on('change', function () {
            var opt = "";
            var user_id=$(this).data('user-id');
            var sr_id = $(this).data('sr-id');
            var region_id = $(this).data('region-id');

            if ($(this).is(':checked')) {
                opt = "add";

            } else {
                opt = "remove";
            }
            $.ajax({
                url: "{{route('admin-assign-region')}}",
                type: 'POST',
                data: { "_token": csrfToken,"user_id":user_id, "sr_id": sr_id, "region_id": region_id, 'opt': opt },
                headers: {
                    'X-CSRF-TOKEN': csrfToken,
                },
                success: function (response) {
                    if(response.msg==="success"){
                        location.reload();
                    }
                },
                error: function (error) {
                    // Handle the error response
                    console.error('Error:', error);
                }
            });
        });
    });

</script>
@stop