@extends('back.layouts.app', ['title' => $title])
@section('content')
    <div class="pl-3 pr-2 content-wrapper">
        <!-- Content Header (Page header) -->
        <section class="content-header">
            <div class="row align-items-center mb-3">
                <div class="col-md-12 text-end">
                    @include('back.common_views.quicklinks')
                </div>
            </div>
            <div class="row align-items-center">
                <div class="col-md-6 col-sm-12">
                    <h3 class="mb-0 font-weight-bold text-dark">
                        <i class="fas fa-user-friends text-primary mr-2"></i> Client Management
                    </h3>
                    <nav aria-label="breadcrumb" class="mt-2">
                        <ol class="breadcrumb bg-transparent p-0 mb-0">
                            <li class="breadcrumb-item"><a href="{{ admin_url() }}"><i class="fas fa-home"></i> Dashboard</a></li>
                            <li class="breadcrumb-item active">Manage Clients</li>
                        </ol>
                    </nav>
                </div>
                <div class="col-md-6 col-sm-12 text-md-end">
                    <div class="btn-group shadow-sm">
                        <a href="{{ admin_url() }}manage_clients/create" class="btn btn-primary">
                            <i class="fas fa-plus-circle mr-1"></i> Add New Client
                        </a>
                        <a href="{{ admin_url() }}mass-mail?clients=yes" class="btn btn-info">
                            <i class="fas fa-envelope mr-1"></i> Mass Email
                        </a>
                    </div>
                </div>
            </div>
        </section>

        <section class="content mt-3">
            <div class="row">
                <div class="col-md-12">
                    <!-- Filters Card -->
                    <div class="card shadow-sm border-0 mb-4">
                        <div class="card-body p-3">
                            <form method="get" action="{{ route('manage_clients.index') }}" id="search_form">
                                <div class="row align-items-end g-3">
                                    <div class="col-md-4">
                                        <label class="form-label font-weight-bold text-muted small">SEARCH BY NAME OR EMAIL</label>
                                        <div class="input-group">
                                            <span class="input-group-text bg-white"><i class="fas fa-search text-muted"></i></span>
                                            <input type="text" name="name" id="search-box" class="form-control border-left-0" 
                                                placeholder="Type to search..." value="{{ request('name') }}">
                                        </div>
                                    </div>
                                    <div class="col-md-4">
                                        <label class="form-label font-weight-bold text-muted small">ENROLLMENT DATE RANGE</label>
                                        <div class="input-group">
                                            <span class="input-group-text bg-white"><i class="fas fa-calendar-alt text-muted"></i></span>
                                            <input type="text" name="dates" id="reportrange" class="form-control border-left-0" placeholder="All Time">
                                        </div>
                                    </div>
                                    <div class="col-md-4">
                                        <button type="submit" class="btn btn-primary px-4"><i class="fas fa-filter mr-1"></i> Apply Filters</button>
                                        <a href="{{ route('manage_clients.index') }}" class="btn btn-outline-secondary px-4"><i class="fas fa-sync-alt mr-1"></i> Reset</a>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>

                    <!-- Clients Table Card -->
                    <div class="card shadow-sm border-0">
                        <div class="card-header bg-white py-3 border-0">
                            <div class="d-flex justify-content-between align-items-center">
                                <h5 class="mb-0 font-weight-bold"><i class="fas fa-list text-muted mr-2"></i> Registered Clients</h5>
                                <button type="button" class="btn btn-sm btn-danger bulk_actions_btn" onclick="triggerBulkDelete()" style="display:none;">
                                    <i class="fas fa-trash-alt mr-1"></i> Delete Selected
                                </button>
                            </div>
                        </div>
                        <div class="card-body p-0">
                            <form method="post" action="{{ route('client.delete') }}" id="delete_client_form">
                                @csrf
                                <div class="table-responsive">
                                    <table class="table table-hover align-middle mb-0" id="clients-table">
                                        <thead class="bg-light text-muted small">
                                            <tr>
                                                <th class="px-4" width="40">
                                                    <div class="form-check">
                                                        <input type="checkbox" class="form-check-input" id="client_check_all">
                                                    </div>
                                                </th>
                                                <th width="40"></th>
                                                <th width="80">ID</th>
                                                <th>CLIENT NAME</th>
                                                <th>CONTACT DETAILS</th>
                                                <th>ENROLLED ON</th>
                                                <th class="text-center">ACTIONS</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            @forelse ($result as $row)
                                                <tr id="trr{{ $row->id }}">
                                                    <td class="px-4">
                                                        <div class="form-check">
                                                            <input type="checkbox" class="form-check-input client_check" name="client_check[]" value="{{ $row->id }}">
                                                        </div>
                                                    </td>
                                                    <td class="text-center">
                                                        <a href="javascript:;" class="text-muted" onclick="showme_page('#subtrr{{ $row->id }}',this)">
                                                            <i class="fas fa-chevron-down"></i>
                                                        </a>
                                                    </td>
                                                    <td class="font-weight-bold text-muted">#{{ $row->id }}</td>
                                                    <td>
                                                        <div class="d-flex align-items-center">
                                                            <div class="avatar-sm bg-light text-success rounded-circle mr-2 d-flex align-items-center justify-content-center" style="width: 32px; height: 32px; font-weight: bold;">
                                                                {{ strtoupper(substr($row->name, 0, 1)) }}
                                                            </div>
                                                            <div>
                                                                <span class="d-block font-weight-bold text-dark">{{ $row->name }} {{ $row->last_name ?? '' }}</span>
                                                            </div>
                                                        </div>
                                                    </td>
                                                    <td>
                                                        <div class="small">
                                                            <a href="mailto:{{ $row->email }}" class="text-muted d-block"><i class="far fa-envelope mr-1"></i> {{ $row->email }}</a>
                                                            <a href="tel:{{ $row->phone }}" class="text-muted d-block"><i class="fas fa-phone-alt mr-1"></i> {{ $row->phone }}</a>
                                                        </div>
                                                    </td>
                                                    <td class="small text-muted">
                                                        <i class="far fa-calendar-alt mr-1"></i> {{ format_date($row->dated, 'date') }}
                                                    </td>
                                                    <td class="text-center">
                                                        <div class="btn-group">
                                                            <a href="{{ admin_url() }}manage_clients/{{ $row->id }}" 
                                                                class="btn btn-sm btn-outline-success" title="View History">
                                                                <i class="fas fa-history"></i>
                                                            </a>
                                                            <a href="{{ admin_url() }}manage_clients/{{ $row->id }}/edit" 
                                                                class="btn btn-sm btn-outline-info" title="Edit Profile">
                                                                <i class="fas fa-edit"></i>
                                                            </a>
                                                            <button type="button" onclick="del_recrod('{{ $row->id }}')" 
                                                                class="btn btn-sm btn-outline-danger" title="Delete">
                                                                <i class="fas fa-trash-alt"></i>
                                                            </button>
                                                        </div>
                                                    </td>
                                                </tr>
                                                
                                                <!-- Expanded Actions Row -->
                                                <tr style="display: none;" id="subtrr{{ $row->id }}" class="bg-light-actions">
                                                    <td colspan="2"></td>
                                                    <td colspan="5" class="py-3 px-4">
                                                        <div class="d-flex flex-wrap gap-2">
                                                            <a href="mailto:{{ $row->email }}" class="btn btn-sm btn-info text-white"><i class="fas fa-reply mr-1"></i> Reply via Email</a>
                                                            <button onclick="comment_model({{ $row->id }})" class="btn btn-sm btn-success text-white"><i class="fas fa-comment-dots mr-1"></i> Add Comment</button>
                                                            <a href="{{ admin_url() }}mass-mail?client_id={{ $row->id }}" class="btn btn-sm btn-outline-info"><i class="fas fa-paper-plane mr-1"></i> Send Direct Email</a>
                                                        </div>
                                                        <div class="mt-2 small text-muted">
                                                            <span class="mr-3"><i class="fas fa-network-wired mr-1"></i> IP Address: {{ $row->ip }}</span>
                                                            <span class="mr-3"><i class="fas fa-calendar-check mr-1"></i> Registered: {{ format_date($row->dated, 'date_time') }}</span>
                                                            <span><i class="fas fa-user-edit mr-1"></i> Added By: {{ $row->user->name ?? '-' }}</span>
                                                        </div>
                                                    </td>
                                                </tr>
                                            @empty
                                                <tr>
                                                    <td colspan="7" class="text-center py-5 text-muted">
                                                        <i class="fas fa-user-slash fa-3x mb-3 opacity-2"></i>
                                                        <p class="mb-0 font-weight-bold">No clients found matching your search.</p>
                                                    </td>
                                                </tr>
                                            @endforelse
                                        </tbody>
                                    </table>
                                </div>
                            </form>
                        </div>
                        <div class="card-footer bg-white border-0 py-3">
                            <div class="d-flex justify-content-between align-items-center">
                                <div class="small text-muted">
                                    Showing {{ $result->firstItem() }} to {{ $result->lastItem() }} of {{ $result->total() }} clients
                                </div>
                                <div>
                                    {{ $result->links() }}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div>
                {{ $result->links() }}
            </div>
        </section>
        <td>
            <div class="modal fade" id="exampleModal-comment" tabindex="-1" role="dialog"
                aria-labelledby="exampleModalLabel" aria-hidden="true">
                <div class="modal-dialog" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title" id="exampleModalLabel">Add
                                Comment</h5>
                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">
                            </button>
                        </div>
                        <form name="frm_process" id="contactFormComment" class="contact-form">
                            @csrf
                            <div class="modal-body">
                                <input type="hidden" name="contact_id" class="form-control" id="contact_id">
                                <div class="col-sm-12">
                                    <label>Enter Comment</label>
                                    <textarea class="form-control" name="message" id="comment"></textarea>
                                </div>
                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                                {{-- <input type="submit"  value="Send Request Review Email" class="btn btn-primary"> --}}
                                <button type="button" class="btn btn-primary" onclick="comment_save()">Save
                                    Comment</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
            <div class="modal fade" id="SMS_Template_model" tabindex="-1" role="dialog"
                aria-labelledby="SMS_Template_model-2" aria-hidden="true">
                <div class="modal-dialog modal-lg" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title" id="SMS_Template_model-2">SMS Template</h5>
                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">
                            </button>
                        </div>
                        <form id="smsTemplateForm">
                            @csrf
                            <div class="modal-body">
                                <input type="hidden" name="sms_receiver_user_id" id="sms_receiver_user_id">
                                <input type="hidden" name="sms_receiver_type" id="sms_receiver_type">
                                <input type="hidden" name="sms_value_send" id="sms_value_send">
                                <div class="form-group">
                                    <label for="">Select SMS Template</label>
                                    <select class="form-control" name="sms_template_id" id="sms_template_id">
                                        @foreach ($sms_template as $temp)
                                            <option value="{{ $temp->id }}">{{ $temp->title }}</option>
                                        @endforeach
                                    </select>
                                </div>
                                <div class="form-group">
                                    <label for="">Subject Of SMS</label>
                                    <input name="sms_subject" id="sms_subject" class="form-control">
                                </div>
                                <div class="form-group">
                                    <div id="user_email_area">
                                        <div class="row" style="margin-top:10px;">
                                            <div class="col-sm-12">
                                                <label for="User SMS Body:">User SMS Body:</label>
                                                <textarea name="sms_user_body" id="sms_user_body" class="form-control" required="">
                                            </textarea>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div id="sms_combine_send" style="display: none;">
                                    <div class="form-group">
                                        <label style="margin-top: 10px;font-size:18px;">Do You Want Send This SMS To
                                            Client's</label>
                                        <input type="checkbox" name="sms_send_to_client" id="sms_send_to_client_id">
                                    </div>
                                    <div class="col-sm-12" id="sms_client_packages_id" style="display:none;">
                                        <p>Please Select Package</p>
                                        <div class="row">
                                            @foreach ($get_all_packages as $package)
                                                <div class="col-sm-3">
                                                    <div class="form-group">
                                                        <label
                                                            style="margin-top: 10px;font-size:18px;">{{ $package->heading }}</label>
                                                        <input type="checkbox"
                                                            name="sms_client_package[{{ $package->id }}]">
                                                    </div>
                                                </div>
                                            @endforeach
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label style="margin-top: 10px;font-size:18px;">Do You Want Send This SMS To
                                            Leads's</label>
                                        <input type="checkbox" name="sms_send_to_leads">
                                    </div>
                                </div>
                                <div class="modal-footer">
                                    <label style="margin-top: 10px;">Save Changes In Selected SMS Template</label>
                                    <input type="checkbox" name="new_temp">
                                    <button type="button" class="btn btn-secondary"
                                        data-bs-dismiss="modal">Close</button>
                                    <button type="button" class="btn btn-primary" onclick="save_sms_record_send()">Send
                                        SMS</button>
                                </div>
                        </form>
                    </div>
                </div>
            </div>
        </td>
    </div>
    <style>
        .badge-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
        .bg-light-actions { background-color: #fcfcfc !important; border-bottom: 2px solid #eee; }
        #clients-table th { letter-spacing: 0.05em; font-weight: 700; border-top: none; }
        #clients-table td { padding-top: 1rem; padding-bottom: 1rem; vertical-align: middle; }
        .avatar-sm { font-weight: bold; font-size: 14px; }
        .btn-group .btn { border-radius: 6px; margin: 0 2px; }
        .gap-2 { gap: 0.5rem; }
    </style>
@endsection
@section('beforeBodyClose')
    <script type="text/javascript" src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />
    <script src="{{ asset_storage('lib/sweetalert/sweetalert2.js') }}"></script>
    <script type="text/javascript" src="{{ asset_storage('') }}back/mod/mod_js.js"></script>
    @include('back.clients.common.sms_script')
    <script>
        $(document).ready(function() {
            $('[data-bs-toggle="popover"]').popover();
        });
        $('html').on('mouseup', function(e) {
            if (!$(e.target).closest('.popover').length) {
                $('.popover').each(function() {
                    $(this.previousSibling).popover('hide');
                });
            }
        });

        function del_recrod(id) {
            if (confirmDel()) {
                $.ajaxSetup({
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    }
                });
                $.ajax({
                    type: "DELETE",
                    url: "{{ admin_url() }}manage_clients/" + id,
                    data: {
                        '_token': $('meta[name="csrf-token"]').attr('content')
                    },
                    success: function(data) {
                        if (JSON.parse(data).status) {
                            $("#trr" + id).fadeOut(1000);
                            $("#subtrr" + id).fadeOut(1000);
                            $("#subtr" + id).fadeOut(1000);
                            var tolrec = $("#total_rec").html();
                            var tolrec = $("#total_rec").html(parseInt(tolrec) - 1);
                            // location.reload();
                        } else {
                            alert('ERROR: Deleting');
                            console.log(data);
                        }
                    },
                });
            }
        }

        function update_status(cid, sts) {
            console.log(sts);
            postMyForm(
                '{{ admin_url() }}' + "manage_clients/status", {
                    idds: cid,
                    sts: sts,
                    _token: $("meta[name=csrf-token]").attr("content")
                },
                function() {
                    alertme('<i class="fas fa-check" aria-hidden="true"></i> Status Updated ', 'success', true,
                        1500);
                }
            );
        }

        function update_conditions(id, val) {
            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });
            $.ajax({
                url: "{{ base_url() . 'adminmedia/manage_clients/update_condition' }}",
                type: "POST",
                data: {
                    'id': id,
                    'val': val
                },
                success: function(data) {
                    swal(
                        'Success',
                        'Condition Update Successfully!',
                        'success'
                    );
                },
            });
        }
    </script>
    <script type="text/javascript">
        $(function() {
            var value = $("#previous_sts").val();
            if (value == '') {
                var start = moment('01/01/2010', 'MM-DD-YYYY');
                var end = moment();
            } else {
                var myarray = value.split('-');
                var from = myarray[0];
                var to = myarray[1];
                var date1 = new Date(from);
                var date2 = new Date(to);
                var Difference_In_Time = date2.getTime() - date1.getTime();
                var Difference_In_Days = Difference_In_Time / (1000 * 3600 * 24);
                var start = moment().subtract(Difference_In_Days, 'days');
                var end = moment();
            }

            function cb(start, end) {
                $('#reportrange span').html(start.format('MMMM D, YYYY') + ' - ' + end.format('MMMM D, YYYY'));
            }
            $('#reportrange').daterangepicker({
                startDate: start,
                endDate: end,
                "linkedCalendars": false,
                "closeText": false,
                ranges: {
                    'Today': [moment(), moment()],
                    'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
                    'Last 7 Days': [moment().subtract(6, 'days'), moment()],
                    'Last 30 Days': [moment().subtract(29, 'days'), moment()],
                    'Last 60 Days': [moment().subtract(59, 'days'), moment()],
                    'This Month': [moment().startOf('month'), moment().endOf('month')],
                    'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1,
                        'month').endOf('month')]
                }
            }, cb);
            cb(start, end);
        });
    </script>
    <script>
        function comment_model(id) {
            $("#contact_id").val(id);
            $("#exampleModal-comment").modal('show');
        }

        function comment_save() {
            var id = $('#contact_id').val();
            $('#btnSave').css('display', 'none');
            $('#loader').css('display', 'block');
            url = "{{ route('client_comments') }}";
            method = 'POST';
            header = '';
            let formData = new FormData($('#contactFormComment')[0]);
            // console.log(formData);
            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });
            $.ajax({
                url: url,
                type: method,
                data: formData,
                headers: header,
                async: true,
                cache: false,
                contentType: false,
                processData: false,
                success: function(data) {
                    console.log(data);
                    data = JSON.parse(data);
                    $('#btnSave').css('display', 'block');
                    $('#loader').css('display', 'none');
                    if (data.status) {
                        // $('#msgSuccess').text(data.error);
                        $("#contactFormComment").trigger('reset');
                        // $('#exampleModal-comment-'+id).modal('hide');
                        $('#exampleModal-comment-' + id).modal('hide');
                        swal(
                            'Thank you!',
                            'Your Comment Has Been Saved.',
                            'success'
                        );
                        location.reload();
                    } else {
                        swal(
                            'Sorry!',
                            data.error,
                            'error'
                        );
                        // $('#msgSuccess').text(data.error);
                    }
                },
                error: function(jqXHR, textStatus, errorThrown) {
                    alert('Error sending your request');
                    console.log(jqXHR);
                    console.log(textStatus);
                    console.log(errorThrown);
                }
            });
        }

        function validateForm1() {
            $("#comment").css('background-color', '');
            var valid = true;
            var text = '';
            var comment = $("#comment").val();
            if (comment.length < 3) {
                text += "*Message must be valid <br>";
                $("#comment").css('background-color', '#e6cfcf');
                valid = false;
            }
            if (!valid) {
                swal(
                    'ERROR',
                    text,
                    'error'
                );
                return false;
            }
            return true;
        }

        function isEmail(email) {
            var regex = /^([a-zA-Z0-9_.+-])+\@(([a-zA-Z0-9-])+\.)+([a-zA-Z0-9]{2,4})+$/;
            return regex.test(email);
        }
    </script>
    <script>
        document.onkeydown = function(evt) {
            var keyCode = evt ? (evt.which ? evt.which : evt.keyCode) : event.keyCode;
            if (keyCode == 13) {
                $("#search_form").submit();
            }
        }

        function send_assessment_email(id, sts) {
            $.ajax({
                type: "GET",
                url: "{{ route('send_assesment_email') }}",
                data: {
                    '_token': $('meta[name="csrf-token"]').attr('content'),
                    'id': id,
                    'status': sts
                },
                success: function(data) {
                    alertme('<i class="fas fa-check" aria-hidden="true"></i> Questionnaire Email Has Been Sent Successfully',
                        'success', true,
                        1500);
                    location.reload();
                },
            });
        }

        function show_hides(id) {
            $('.' + id).css("display", "table-row");
            $('.down_' + id).css("display", "none");
            $('.up_' + id).css("display", "block");
        }

        function hide_show(id) {
            $('.' + id).css("display", "none");
            $('.down_' + id).css("display", "block");
            $('.up_' + id).css("display", "none");
        }
        $('#client_check_all').on('change', function() {
            if ($('#client_check_all').is(':checked')) {
                $('.client_check').prop('checked', true);
            } else {
                $('.client_check').prop('checked', false);
            }
            checkUncheckDelCheckBoxes();
        })
        $('.client_check').on('change', function() {
            checkUncheckDelCheckBoxes();
        })

        function checkUncheckDelCheckBoxes() {
            if ($('.client_check:checked').length == $('.client_check').length) {
                $('#client_check_all').prop('checked', true);
            } else {
                $('#client_check_all').prop('checked', false);
            }
            if ($('.client_check:checked').length > 0) {
                $('.bulk_actions_btn').show();
            } else {
                $('.bulk_actions_btn').hide();
                $('#client_check_all').prop('checked', false);
            }
        }

        function triggerBulkDelete() {
            if (confirm('Are you sure you want to delete selected clients?')) {
                $('#delete_client_form').submit();
            }
        }
    </script>
    <script>
        $(document).ready(function() {
            var searchInput = $('#search-box');

            // Initialize Typeahead
            searchInput.typeahead({
                minLength: 2, // Minimum characters before searching
                highlight: true
            }, {
                name: 'data',
                display: 'name', // Adjust according to API response
                source: function(query, syncResults, asyncResults) {
                    $.ajax({
                        url: '{{ route('search.client') }}', // Backend PHP script
                        type: 'GET',
                        data: {
                            q: query
                        },
                        dataType: 'json',
                        success: function(data) {
                            asyncResults(data);
                        }
                    });
                }
            });
        });
    </script>
@endsection