@extends('includes/layout')
@section('main-page-content')
    <style>
        .select2-container {
            z-index: 10000;
        }

        .btn_close {
            background-color: white;
            color: #019FF3;
        }

        .folder_color {
            color: #019FF3;
        }

        .check_box_mark {
            color: #019FF3;
        }

        .document {
            border-radius: 10px;
            border: 1px solid #B6BBC4;
            padding: 5px 10px 5px 5px;


        }
    </style>
    <div class="container-xxl flex-grow-1 container-p-y">

        <div class="card mb-3">
            <div class="card-body m-lg-0">
                <div class="row">
                    <div class="col-lg-6 col-md-6 col-12 d-flex h-px-100 p-0">
                        <div class="user-profile-header d-flex flex-column flex-lg-row text-sm-start text-center mb-4">
                            <div class="flex-shrink-0 mt-n2  mx-lg-0 mx-auto">
                                <img src="{{ url('/') }}/{{ $client->logo_img ?? '' }}" alt="user image"
                                    class="d-block h-px-100 w-px-100 ms-0 ms-sm-4 rounded user-profile-img">
                            </div>
                        </div>
                        <div class="user-profile-info  mt-lg-4">
                            <h4 class="user-name">{{ $client->fname ?? '' }} {{ $client->mname ?? '' }}
                                {{ $client->lname ?? '' }}</h4>
                            <ul
                                class="list-inline mb-0 d-flex align-items-center flex-wrap justify-content-sm-start justify-content-center gap-2">
                                <li class="list-inline-item">
                                    <span class="mdi me-1 mdi-email-open-outline"></span>{{ $client->email ?? '' }}
                                </li>
                            </ul>
                        </div>
                    </div>
                    <div class="col-lg-6 col-md-6 col-12  p-0 d-flex justify-content-end align-items-end">
                        <div class="">
                            @if (in_array('Clients Maintain', Session::get('permissions')))
                                <button class="add-docbtn btn btn-primary mb-3" data-bs-toggle="modal"
                                    data-bs-target="#client_document"><span
                                        class="mdi me-1 mdi-file-document-outline"></span>Add Document</button>
                            @endif
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="card mb-4">
            <div class="card-body">
                <div class="col-6 mt-3">
                    <div class="d-flex  mb-3">
                        <div class=" p-2 ">
                            <span class="mdi mdi-checkbox-marked-circle-outline check_box_mark"></span>
                        </div>
                        <div class="p-2  me-auto">Mobile</div>
                        <div class="p-2 ">{{ $client->mobile ?? '' }}</div>
                    </div>
                    <div class="d-flex  mb-3">
                        <div class=" p-2 ">
                            <span class="mdi mdi-checkbox-marked-circle-outline check_box_mark"></span>
                        </div>
                        <div class="p-2  me-auto">Phone</div>
                        <div class="p-2 ">{{ $client->phone ?? '' }}</div>
                    </div>
                    <div class="d-flex  mb-3">
                        <div class=" p-2 ">
                            <span class="mdi mdi-checkbox-marked-circle-outline check_box_mark"></span>
                        </div>
                        <div class="p-2  me-auto">Status</div>
                        <div class="p-2 ">
                            @if ($client->active == 1)
                                <span class="badge bg-success rounded">Active</span>
                            @else
                                <span class="badge bg-secondary rounded">Inactive</span>
                            @endif
                        </div>
                    </div>
                </div>
                <div class="col-12 border-top">
                    @foreach ($clientdocuments as $clientdocument)
                        <div class="d-flex mb-3 mt-3 border">
                            @php
                                $fileExtension = pathinfo($clientdocument->document ?? '', PATHINFO_EXTENSION);
                                $iconClass = '';
                                $textClass = '';

                                switch ($fileExtension) {
                                    case 'pdf':
                                        $iconClass = 'mdi-file-pdf-box';
                                        $textClass = 'text-danger';
                                        break;
                                    case 'jpg':
                                    case 'png':
                                        $iconClass = 'mdi-folder-image';
                                        $textClass = 'text-info';
                                        break;
                                    case 'doc':
                                    case 'docx':
                                        $iconClass = 'mdi-file-word-box';
                                        $textClass = 'text-info';
                                        break;
                                    default:
                                        $iconClass = 'mdi-file';
                                        $textClass = 'text-secondary';
                                        break;
                                }

                                // Generate the URL using the asset function
                                $documentUrl = asset($clientdocument->document ?? '');
                            @endphp

                            <div class="p-2">
                                <span class="mdi {{ $iconClass ?? '' }} mdi-20px {{ $textClass ?? '' }}"></span>
                            </div>

                            <div class="p-2 mx-3">{{ $clientdocument->title ?? '' }}</div>
                            <div class="p-2 mx-3 me-auto">{{ docSize($clientdocument->document) ?? '' }}</div>

                            <div class="p-2 mx-3 cursor-pointer">
                                <div class="dropdown">
                                    <button class="btn p-0" type="button" id="dropdownMenuButton1"
                                        data-bs-toggle="dropdown" aria-expanded="false">
                                        <span class="mdi mdi-dots-vertical"></span>
                                    </button>
                                    <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
                                        <li>
                                            <a class="dropdown-item download_view_doc"
                                            data-document-url="{{ $documentUrl }}"
                                                data-document-title="{{ $clientdocument->title }}"
                                                download="{{ $clientdocument->document }}">
                                                <span class="mdi mdi-cloud-download mdi-20px text-info me-2"></span>Download
                                            </a>
                                        </li>
                                       


                                        <li>
                                            <a class="dropdown-item" data-id="{{ $clientdocument->id }}"
                                                onclick="_delete_modal(this)">
                                                <span
                                                    class="mdi mdi-trash-can-outline mdi-20px text-danger me-2 delete-document-btn"></span>Delete
                                            </a>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    @endforeach

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


    <div class="modal fade" id="client_document" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1"
        aria-labelledby="staticBackdropLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header border-bottom bg-primary">
                    <h5 class="modal-title mb-2 text-white" id="staticBackdropLabel ">Client Document</h5>
                </div>
                <form id="add_document" action="" method="" enctype="multipart/form-data">
                    <input type="hidden" name="c_id" value="{{ $client->id }}">
                    @csrf
                    <div class="modal-body">
                        <div class="row">
                            <div class="col-12 form-group mb-3">
                                <label for="document_title" class="text-dark">Title<span
                                        class="text-danger">*</span></label>
                                <input type="text" id="document_title" name="title" class="form-control mt-1"
                                    placeholder="Document Title">
                            </div>
                            <div class="col-md-12 form-group mb-3">
                                <label for="client_white_card" class="text-dark">Upload Document</label>
                                <div class="document d-flex justify-content-between input-group">
                                    <span style="font-size:14px" class="ms-2"id="file-label1">No file
                                        chosen</span>

                                    <label style="border-radius:5px;font-size:12px"
                                        class="input-group-text btn bg-success  text-white ml-5 btn-sm"
                                        for="client_passport_upload">
                                        Upload<img src="{{ url('/assets/img/upload-icon.png') }}"class="ms-1"
                                            alt="Thumnail Preview" width="15px" height="15px" />

                                    </label>
                                    <input type="file" name="document" class="doc_1 form-control visually-hidden"
                                        id="client_passport_upload" accept=".image/*,.doc,.docx,.ppt,.pptx,.pdf"
                                        onchange="updateFileName1(this)">
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer border-top">
                        <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal"
                            onclick="resetForm()">Close</button>
                        <button type="submit" class="btn btn-primary">Save</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <div class="modal fade" id="DeleteEmp" tabindex="-1" aria-labelledby="deletePreLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header bg-danger px-4 py-2">
                    <h5 class="modal-title text-white" id="deletePreLabel">Delete</h5>
                </div>
                <div class="modal-body">
                    Are you sure you want to delete this record?<br><br>
                    <b class="text-warning">Warning:</b> This record will no longer be available. Please ensure you
                    genuinely want to delete it before clicking the delete button.
                </div>
                <div class="modal-footer border-top py-2">
                    <button type="button" class="btn btn-outline-dark" data-bs-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-danger" id="client-doc-id" data-id=""
                        onclick="_delete(this)">Delete</button>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('main-page-content')

@section('css-js')


    <script>
        function resetForm() {
            var form = document.getElementById('add_document');
            document.getElementById('file-label1').innerText = 'No file chosen';
            form.reset();
        }
        $(document).ready(function() {
            $('.download_view_doc').on('click', function() {
                var documentTitle = $(this).data('document-title');
                var documentUrl = $(this).data('document-url');
                var downloadLink = document.createElement('a');
                downloadLink.href = documentUrl;
                downloadLink.download = documentTitle;
                downloadLink.click();
                var newTab = window.open(documentUrl, '_blank');

                if (!newTab) {
                    console.log('Popup blocked. Please allow popups and try again.');
                }
            });
        });
                   

        //     $('#add_document').submit(function(e) {
        //     e.preventDefault();
        //     var formData = new FormData(this);

        //     $.ajax({
        //         headers: {
        //             'X-CSRF-TOKEN': '{{ csrf_token() }}'
        //         },
        //         type: "POST",
        //         url: "{{ url('/client-document') }}",
        //         data: formData,
        //         contentType: false,
        //         processData: false,
        //         success: function(response) {
        //             console.log(response);
        //             toastr.success(response.message);
        //             $('#add_document')[0].reset();
        //             setTimeout(function () {
        //                 location.reload();
        //             }, 1000);
        //         },
        //         error: function(response) {
        //             if (response.status == 422) {
        //                 var errors = response.responseJSON.data;
        //                 $.each(errors, function(field, messages) {
        //                     error_msg = messages[0];
        //                     toastr.error(error_msg);
        //                 });
        //             } else if (response.status == 500) {
        //                 toastr.error("Something went wrong");
        //             } else {
        //                 toastr.error(response.responseJSON.message);
        //             }
        //         }
        //     });
        // });

        $('#add_document').submit(function(e) {
            e.preventDefault();
            var formData = new FormData(this);

            $.ajax({
                headers: {
                    'X-CSRF-TOKEN': '{{ csrf_token() }}'
                },
                type: "POST",
                url: "{{ url('/client-document') }}",
                data: formData,
                contentType: false,
                processData: false,
                success: function(response) {
                    toastr.success(response.message);
                    $('#add_document')[0].reset();
                    setTimeout(function() {
                        location.reload();
                    }, 1000);
                },
                error: function(response) {
                    loader(false);
                    if (response.status == 422) {
                        var errorResponse = response.responseJSON;
                        toastr.error(errorResponse.message);
                    } else {
                        toastr.error("Something went wrong");
                    }
                }
            });
        });


        function updateFileName1(input) {
            var fileName = input.files[0].name;
            var maxLength = 10;
            var label1 = input.closest('.document').querySelector('#file-label1');

            if (fileName.length > maxLength) {

                fileName = fileName.substring(0, maxLength) + '...';
            }

            label1.textContent = fileName;

        }


        function _delete_modal(_this) {
            var id = $(_this).attr('data-id');
            $('#client-doc-id').attr('data-id', id);
            $('#DeleteEmp').modal('show');
        }

        function _delete(_this) {
            var id = $(_this).attr('data-id');
            $.ajax({
                type: "POST",
                url: "/client-delete-document/" + id,
                headers: {
                    'X-CSRF-TOKEN': '{{ csrf_token() }}'
                },
                success: function(response) {
                    toastr.success(response.message);
                    setTimeout(function() {
                        location.reload();
                    }, 1000);
                },
                error: function(error) {
                    console.error("Error:", error);
                    toastr.error("Failed to delete project");
                }
            });
        }
    </script>


    <style>
        .user-profile-info {
            margin-right: 16px;
            margin-left: 16px;
        }

        .add-docbtn {
            margin-right: 24px;
        }



        @media only screen and (max-width: 320px) {
            .list-inline-item {
                font-size: 10px;
            }

            .user-profile-info {
                margin-right: 0px;
                margin-left: 0px;
            }

            .add-docbtn {
                margin-right: 0px;
            }

        }

        @media only screen and (min-width: 321px) and (max-width: 375px) {
            .list-inline-item {
                font-size: 12px;
            }

            .user-profile-info {
                margin-left: 28px;
            }

            .add-docbtn {
                margin-right: 7px;
            }
        }

        @media only screen and (min-width: 390px) and (max-width: 844px) {
            .user-profile-info {
                margin-right: 0px;
            }

            .add-docbtn {
                margin-right: 29px;
            }

            @media only screen and (min-width: 768px) and (max-width: 1024px) {
                .user-profile-info {
                    margin-left: 14px;
                }
            }
    </style>



@endsection