@extends('layouts.main-layout')

@section('content')
    <!--**********************************
                                        Content body start
                                    ***********************************-->
    <div class="content-body">

        <div class="row page-titles mx-0">
            <div class="col p-md-0">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="{{ url('/') }}">Dashboard</a></li>
                    <li class="breadcrumb-item active"><a href="">Builder List</a></li>
                </ol>
            </div>
        </div>
        <!-- row -->

        <div class="container-fluid">
            <div class="row">
                <div class="col-12">


                    <div class="card">
                        <div class="card-body">
                            <div class="table-responsive">
                                <button class="btn mb-1 btn-primary" data-toggle="modal" data-target="#ClientAddModel">Add
                                    New Builder Client</button>
                                <h4 class="card-title" style="text-align: -webkit-center;color: slategrey;">Builders Clients List
                                </h4>

                                <table class="table table-striped table-bordered zero-configuration dataTable"
                                    id="example">
                                    <thead>
                                        <tr>
                                            <th>No.</th>
                                            <th>Name</th>
                                            <th>Email</th>
                                            <th>Password</th>
                                            <th>Contact</th>
                                            <th>Company</th>
                                            <th>Builder Admin</th>
                                            <th>Status</th>
                                            <th>Action</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <?php $i = 1; ?>
                                        @foreach ($data as $item)
                                            <tr>
                                                <td>{{ $i }}</td>
                                                <td><a title="Click To view Assigned Reports" href="{{ url('client') }}/{{ $item->id }}/reports" class="label mb-1 label-primary">{{ $item->name }}</a></td>
                                                <td>{{ $item->email }}</td>
                                                <td>{{ $item->password }}</td>
                                                <td>{{ $item->contact }}</td>
                                                <td>{{ $item->company }}</td>
                                                <td><a title="Click Here" href="{{ url('admin') }}/{{$item->builderAdminID}}/builder" class="label mb-1 label-success">{{ $item->adminName }}</a></td>
                                                {{-- <td>{{ \Carbon\Carbon::parse($item->created_at)->format('m-d-Y') }}</td> --}}
                                                <td>
                                                    @if ($item->status == 1)
                                                        <a title="Click To Inactive/Activate Builder" href="javascript:void(0)"
                                                            class="updateBuilderStatus  mb-1 label label-success"
                                                            builder_id="{{ $item->id }}"
                                                            id="builder-{{ $item->id }}">Active</a>
                                                    @else
                                                        <a title="Click To Inactive/Activate Builder" href="javascript:void(0)"
                                                            class="updateBuilderStatus mb-1 label label-danger"
                                                            builder_id="{{ $item->id }}"
                                                            id="builder-{{ $item->id }}">Inactive</a>
                                                    @endif
                                                </td>
                                                <td>

                                                    <a class="btn-danger btn-sm delete-confirm" data-toggle="tooltip"
                                                        href="{{ url('delete') }}/{{ $item->id }}/builder"><i
                                                            class="fa fa-trash" title="Delete"
                                                            aria-hidden="true"></i></a>&nbsp;
                                                    <a class="btn-success btn-sm edit" id="{{ $item->id }}"
                                                        href="#"><i class="fa fa-edit" title="Edit"
                                                            aria-hidden="true"></i></a>&nbsp;
                                                </td>
                                            </tr>
                                            <?php $i++; ?>
                                        @endforeach
                                    </tbody>
                                    <tfoot>
                                        <tr>
                                            <th>No.</th>
                                            <th>Name</th>
                                            <th>Email</th>
                                            <th>Password</th>
                                            <th>Contact</th>
                                            <th>Company</th>
                                            <th>Builder Admin</th>
                                            <th>Date</th>
                                            <th>Action</th>
                                        </tr>
                                    </tfoot>
                                </table>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
        </div>
        <!-- #/ container -->
    </div>
    </div>

    <!-- #/ container -->
    </div>
    <!--*************   Update Admin Model Starts   **************-->
    <div class="modal fade" id="ClientAddModel" tabindex="-1" role="dialog"
        aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered term" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">Add Builder Client</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <form action="javascript:void(0)" id="addStaffForm" name="addStaffForm"
                        class="form-horizontal" method="POST">
                        <div class="form-group">
                            <label>Name</label>
                            <input type="text" class="form-control" id="username-s" name="username"
                                placeholder=" Name">
                        </div>
                        <div class="form-group">
                            <label>Password</label>
                            <input type="password" class="form-control" id="password-s" name="username"
                                placeholder="Enter Password">
                        </div>
                        <div class="form-group">
                            <label>Email</label>
                            <input type="email" class="form-control" id="email-s" name="email"
                                placeholder="Email">
                        </div>
                        <div class="form-group">
                            <label>Company Name</label>
                            <input type="text" class="form-control" id="company-s" name="company"
                                placeholder="Company" value="Allscape">
                        </div>
                        <div class="form-group">
                            <label>Location</label>
                            <input type="text" class="form-control" id="location-s" name="location"
                                placeholder="Location">
                        </div>
                        <div class="form-group">
                            <label>Contact</label>
                            <input type="number" class="form-control" id="contact-s" name="contact"
                                placeholder="Contact Number">
                           
                        </div>
                        <div class="form-group">
                            <select class="form-control js-example-basic-single-admin" id="builderAdmin" name="builderAdmin" style="width:50%;" >
                                <option></option>
                                @foreach($builderAdmins as $staffAdmin)
                                    <option value="{{$staffAdmin->id}}">{{$staffAdmin->name}}</option>
                                @endforeach
                            </select>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-success" id="btn-save">Save</button>
                </div>
            </div>
        </div>
    </div>
    <!--*************   Save Admin Model Ends   **************-->
    <!--*************   Update Admin Model Starts   **************-->
    <div class="modal fade" id="BuilderUpdateModel" tabindex="-1" role="dialog"
        aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered term" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">Update Builder </h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <form action="javascript:void(0)" id="addStaffForm" name="addStaffForm"
                        class="form-horizontal" method="POST">
                        <div class="form-group">
                            <label>Name</label>
                            <input type="text" class="form-control" id="username" name="username"
                                placeholder=" Name">
                        </div>
                        <div class="form-group">
                            <label>Email</label>
                            <input type="email" class="form-control" id="email" name="email"
                                placeholder="Email">
                        </div>
                        <div class="form-group">
                            <label>Password</label>
                            <input type="text" class="form-control" id="password-up" name="username-u"
                                placeholder="Enter Password">
                        </div>
                        <div class="form-group">
                            <label>Company Name</label>
                            <input type="text" class="form-control" id="company" name="company"
                                placeholder="Email">
                        </div>
                        <div class="form-group">
                            <label>Location</label>
                            <input type="text" class="form-control" id="location" name="location"
                                placeholder="Email">
                        </div>
                        <div class="form-group">
                            <label>Contact</label>
                            <input type="number" class="form-control" id="contact" name="contact"
                                placeholder="Contact Number">
                            <input type="hidden" class="form-control" id="builderId" name="builderId" />
                        </div>
                        <div class="form-group">
                            <label>Builder Admin</label>
                            <select class="form-control js-example-basic-single-admin-u" id="builderAdmin-u" name="builderAdmin" style="width:50%;" >
                                <option></option>
                                @foreach($builderAdmins as $staffAdmin)
                                    <option value="{{$staffAdmin->id}}">{{$staffAdmin->name}}</option>
                                @endforeach
                            </select>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-success" id="btn-update">Update</button>
                </div>
            </div>
        </div>
    </div>
    <!--*************   Save Admin Model Ends   **************-->
    <!--**********************************
                                        Content body end
                                    ***********************************-->
    <script>
        $(document).ready(function() {
            toastr.options.timeOut = 10000;
            @if (Session::has('error'))
                toastr.error('{{ Session::get('error') }}');
            @elseif (Session::has('success'))
                toastr.success('{{ Session::get('success') }}');
            @endif
        });
        
        $(document).ready(function() {
        $('.js-example-basic-single-admin').select2({
                placeholder: 'Select Builder Admin',
                selectOnClose: true,
            });
             $('.js-example-basic-single-admin-u').select2({
                placeholder: 'Select Builder Admin',
                selectOnClose: true,
            });
    });  
    </script>


    <script src="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/2.1.0/sweetalert.min.js"></script>
    <script type="text/javascript">
        toastr.options = {
            "closeButton": true,
            "debug": false,
            "newestOnTop": false,
            "progressBar": true,
            "positionClass": "toast-top-right",
            "preventDuplicates": true,
            "onclick": null,
            "showDuration": "300",
            "hideDuration": "1000",
            "timeOut": "1000",
            "extendedTimeOut": "1000",
            "showEasing": "swing",
            "hideEasing": "linear",
            "showMethod": "fadeIn",
            "hideMethod": "fadeOut"
        }
        $('.delete-confirm').click(function(event) {

            const url = $(this).attr('href');
            event.preventDefault();
            swal({
                    title: `Are you sure you want to delete this record?`,
                    text: "If you delete this, it will be gone forever.",
                    icon: "warning",
                    buttons: true,
                    dangerMode: true,
                })
                .then((willDelete) => {
                    if (willDelete) {
                        window.location.href = url;
                    }
                });
        });
        
         //Add  admin
        $('body').on('click', '#btn-save', function(event) {
            if ($.trim($("#username-s").val()) == "" || $.trim($("#email-s").val()) == "" || $.trim($("#builderAdmin").val()) == "" || $.trim($("#password-s").val()) == "" || $.trim($(
                        "#contact-s").val()) == "" || $.trim($("#company-s").val()) == "" || $.trim($("#location-s").val()) == ""){
                alert("Please Fill All Fields!");
            } else {
                var username = $("#username-s").val();
                var email = $("#email-s").val();
                var contact = $("#contact-s").val();
                var company = $("#company-s").val();
                var location = $("#location-s").val();
                var password = $("#password-s").val();
                var builderAdmin = $("#builderAdmin").val();
                $("#btn-save").html('Please Wait...');
                $("#btn-save").attr("disabled", true);
                // ajax
                $.ajax({
                    type: "POST",
                    url: "{{ route('builder.save') }}",
                    data: {
                        _token: "{{ csrf_token() }}",
                        username: username,
                        email: email,
                        contact: contact,
                        company: company,
                        location: location,
                        password: password,
                        builderAdmin: builderAdmin,
                    },
                    dataType: 'json',
                    success: function(res) {
                        console.log(res)
                        $('#ClientAddModel').modal('hide');
                        //window.location.reload();
                        toastr.success('Builder Details Added', 'Hi');
                        $("#btn-save").html('Update');
                        $("#btn-save").attr("disabled", false);
                        
                        window.location.reload();
                    },
                    error: function(reject) {
                        if (reject.status === 422) {
                            var errors = $.parseJSON(reject.responseText);
                            $.each(errors, function(key, val) {
                                $("#" + key + "_error").text(val[0]);
                            });
                            toastr.error('Email or Number already exists', 'Hi');
                            $("#btn-save").html('Submit');
                            $("#btn-save").attr("disabled", false);
                            $('#ClientAddModel').modal('hide');
                        }
                    }
                });
            }
        });
        //update  admin
        $('body').on('click', '#btn-update', function(event) {
            if ($.trim($("#username").val()) == "" || $.trim($("#email").val()) == "" || $.trim($("#builderAdmin-u").val()) == "" || $.trim($(
                        "#contact").val()) == "" || $.trim($("#company").val()) == "" || $.trim($("#location").val()) == "" || $.trim($("#password-up").val()) == ""){
                alert("Please Fill All Fields!");
            } else {
                var username = $("#username").val();
                var email = $("#email").val();
                var contact = $("#contact").val();
                var company = $("#company").val();
                var location = $("#location").val();
                var password = $("#password-up").val();
                var id = $("#builderId").val();
                var adminId = $("#builderAdmin-u").val();
                $("#btn-update").html('Please Wait...');
                $("#btn-update").attr("disabled", true);
                // ajax
                $.ajax({
                    type: "POST",
                    url: "{{ route('builder.update') }}",
                    data: {
                        _token: "{{ csrf_token() }}",
                        username: username,
                        email: email,
                        contact: contact,
                        company: company,
                        location: location,
                        id: id,
                        password: password,
                        adminId: adminId,
                    },
                    dataType: 'json',
                    success: function(res) {
                        console.log(res)
                        $('#BuilderUpdateModel').modal('hide');
                        //window.location.reload();
                        toastr.success('Builder Details Updated', 'Hi');
                        $("#btn-update").html('Update');
                        $("#btn-update").attr("disabled", false);
                        
                        window.location.reload();
                    },
                    error: function(reject) {
                        if (reject.status === 422) {
                            var errors = $.parseJSON(reject.responseText);
                            $.each(errors, function(key, val) {
                                $("#" + key + "_error").text(val[0]);
                            });
                            toastr.error('Email or Number already exists', 'Hi');
                            $("#btn-update").html('Submit');
                            $("#btn-update").attr("disabled", false);
                            $('#BuilderUpdateModel').modal('hide');
                        }
                    }
                });
            }
        });

        //update Builder Admin Status Attruibute status
        $(".updateBuilderStatus").click(function() {
            var status = $(this).text();
            var builder_id = $(this).attr("builder_id");
            $.ajax({
                type: 'post',
                url: 'builder-status',
                data: {
                    status: status,
                    builder_id: builder_id,
                    _token: '{{ csrf_token() }}'
                },
                success: function(resp) {
                    if (resp['status'] == 0) {
                        $("#builder-" + builder_id).html("Inactive");
                        $("#builder-" + builder_id).removeClass('btn-success');
                        $("#builder-" + builder_id).addClass('btn-danger');
                    } else if (resp['status'] == 1) {
                        $("#builder-" + builder_id).html("Active");
                        $("#builder-" + builder_id).removeClass('btn-danger');
                        $("#builder-" + builder_id).addClass('btn-success');
                    }
                },
                error: function() {
                    alert("error");
                }
            });

        });

        $(document).on('click', '.edit', function() {
            var id = $(this).attr("id");
            $('#form_output').html('');
            $.ajax({
                url: "{{ route('builder.fetchdata') }}",
                method: 'get',
                data: {
                    id: id
                },
                dataType: 'json',
                success: function(data) {
                    $('#username').val(data.name);
                    $('#email').val(data.email);
                    $('#contact').val(data.contact);
                    $('#company').val(data.company);
                    $('#location').val(data.locationn);
                    $('#password-up').val(data.password);
                    $('#builderId').val(id);
                     $('#builderAdmin-u').val(data.adminId).trigger('change');
                    $('#BuilderUpdateModel').modal('show');
                }
            })
        });
    </script>
@endsection
