@extends("administrator.layout.master")
@section("content")
@if(auth()->guard('admins')->user()->can("edit customer"))
    <div class="card card-outline card-primary">
        <div class="card-header">
            @include("administrator.pages.block.nav")
        </div>
        <div class="card-body">
            <div class="row">
                <!--Clients Information-->
                <div class="col-md-4">
                    <div class="clients-summary__box">
                        <h4 class="title">Clients Information</h4>
                        <!--Box info-->
                        <div class="summary__box">
                            <div class="table-responsive">
                                <table class="table table-borderless table-sm">
                                    <tbody>
                                        <tr>
                                            <th scope="row">First Name</th>
                                            <td>{{ $customer->firstname }}</td>

                                        </tr>
                                        <tr>
                                            <th scope="row">Last Name</th>
                                            <td>{{ $customer->lastname }}</td>
                                        </tr>
                                        <tr>
                                            <th scope="row">Company</th>
                                            <td>{{ $customer->company }}</td>
                                        </tr>
                                        <tr>
                                            <th scope="row">Email</th>
                                            <td>{{ $customer->email }}</td>
                                        </tr>
                                        <tr>
                                            <th scope="row">Address</th>
                                            <td>{{ $customer->address }}</td>
                                        </tr>
                                        <tr>
                                            <th scope="row">City</th>
                                            <td>{{ $customer->city }}</td>
                                        </tr>
                                        <tr>
                                            <th scope="row">Country</th>
                                            <td>{{ $customer->country }}</td>
                                        </tr>
                                        <tr>
                                            <th scope="row">Phone Number</th>
                                            <td>{{ $customer->phone }}</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                        <!--Box Action-->
                        <div class="summary--box__action mt-3">
                            <div class="list-group list-group-flush">
                                <div class="list-group-item border-0 px-0">
                                    <a class="btn btn-outline-warning btn-sm btn-block" id="summary-reset-password"
                                        href="{{ route('customer.PasswordReset', ['userid' => $customer->id]) }}">
                                        <i data-lucide="key" class="mr-2"></i>
                                        Reset & Send Password
                                    </a>
                                </div>
                                <div class="list-group-item border-0 px-0">
                                    <a class="btn btn-outline-info btn-sm btn-block" target="_blank" id="summary-login-as-client"
                                        href="{{ route('customer.Login', ['userid' => $customer->id]) }}">
                                        <i data-lucide="log-in" class="mr-2"></i>
                                        Login as Client
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!--Invoices/Billing-->
                <div class="col-md-4">
                    <div class="clients-summary__box">
                        <h4 class="title">Invoices/Billing</h4>
                        <!--Box info-->
                        <div class="summary__box">
                            <div class="table-responsive">
                                <table class="table table-borderless table-sm">
                                    <tbody>
                                        <tr>
                                            <th scope="row">Invoice Paid</th>
                                            <td class="text-success font-weight-bold">
                                                <span class="badge badge-success">{{ $customer->invoices_status_count_1 }}</span>
                                                (@money($customer->invoices_status_1) đ)
                                            </td>

                                        </tr>
                                        <tr>
                                            <th scope="row">Invoice UnPaid</th>
                                            <td class="text-warning font-weight-bold">
                                                <span class="badge badge-warning">{{ $customer->invoices_status_count_0 }}</span>
                                                (@money($customer->invoices_status_0) đ)
                                            </td>
                                        </tr>
                                        <tr class="border-top">
                                            <th scope="row" class="font-weight-bold">Total</th>
                                            <td class="font-weight-bold text-primary">@money($customer->invoices_status_0 + $customer->invoices_status_1) đ</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                    <div class="clients-summary__box">
                        <h4 class="title">Recent Emails</h4>
                        <div class="summary__box">
                            @if($customer->mail->count())
                                <div class="table-responsive">
                                    <table class="table table-borderless table-sm table-hover">
                                        <tbody>
                                            @foreach($customer->mail->take(4)->all() as $item)
                                                <tr>
                                                    <td>
                                                        <a class="text-decoration-none" href="{{ route('customer.email', ['userid' => $userid, 'email_id' => $item->id]) }}"
                                                            target="_blank">
                                                            <div class="d-flex flex-column">
                                                                <small class="text-muted">{{ $item->created_at }}</small>
                                                                <span class="text-dark">{{ $item->subject }}</span>
                                                            </div>
                                                        </a>
                                                    </td>
                                                </tr>
                                            @endforeach
                                        </tbody>
                                    </table>
                                </div>
                            @else
                                <div class="text-center py-3">
                                    <i data-lucide="mail-open" class="text-muted mb-2" style="width: 48px; height: 48px;"></i>
                                    <p class="text-muted mb-0">No recent Email</p>
                                </div>
                            @endif
                        </div>
                    </div>
                </div>
                <!--Products/Services-->
                <div class="col-md-4">
                    <!--Products/Services-->
                    <div class="clients-summary__box">
                        <h4 class="title">Products/Services</h4>
                        <!--Box info-->
                        <div class="summary__box">
                            <div class="table-responsive">
                                <table class="table table-borderless table-sm">
                                    <tbody>
                                        <tr>
                                            <th scope="row">VPS/Server</th>
                                            <td>
                                                <span class="badge badge-primary">{{ $customer->vps_count}}</span>
                                            </td>
                                        </tr>
                                        <tr>
                                            <th scope="row">Hosting</th>
                                            <td>
                                                <span class="badge badge-info">{{ $customer->hosting_count }}</span>
                                            </td>
                                        </tr>
                                        <tr>
                                            <th scope="row">Domain</th>
                                            <td>
                                                <span class="badge badge-success">{{ $customer->domain_count }}</span>
                                            </td>
                                        </tr>
                                        <tr>
                                            <th scope="row">Support Tickets</th>
                                            <td>
                                                <span class="badge badge-warning">{{ $customer->ticket_count }}</span>
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                    <!--File-->
                    <div class="clients-summary__box">
                        <h4 class="title">Files</h4>
                        <div class="summary__box">
                            @if($customer->file->count())
                                <div class="table-responsive">
                                    <table class="table table-borderless table-sm table-hover">
                                        <tbody>
                                            @foreach($customer->file->all() as $item)
                                                <tr>
                                                    <td>
                                                        <a class="text-decoration-none d-flex align-items-center" href="{{ $item->file_url }}" download target="_blank">
                                                            <i data-lucide="file" class="mr-2 text-primary"></i>
                                                            <span>{{ $item->filename }}</span>
                                                        </a>
                                                    </td>
                                                    <td class="text-right">
                                                        <button data-id="{{ $item->id }}"
                                                            class="btn btn-outline-danger btn-sm p-1 btn-remove__file">
                                                            <i data-lucide="trash-2"></i>
                                                        </button>
                                                    </td>
                                                </tr>
                                            @endforeach
                                        </tbody>
                                    </table>
                                </div>
                            @else
                                <div class="text-center py-3">
                                    <i data-lucide="file-text" class="text-muted mb-2" style="width: 48px; height: 48px;"></i>
                                    <p class="text-muted mb-0">No files uploaded</p>
                                </div>
                            @endif
                        </div>
                        <div class="box-add__file mt-3">
                            <button type="button" class="btn btn-outline-success btn-sm" onclick="$('.box-add__input').toggleClass('d-none')">
                                <i data-lucide="plus" class="mr-2"></i>
                                Add File
                            </button>
                            <div class="box-add__input d-none mt-3">
                                <div class="card border-light">
                                    <div class="card-body p-3">
                                        <div class="form-group mb-3">
                                            <label for="input-file" class="form-label">File:</label>
                                            <input type="text" class="form-control form-control-sm" id="input-file" name="file" placeholder="Select a file...">
                                        </div>
                                        <div class="btn-group btn-group-sm" role="group">
                                            <button type="button" class="btn btn-outline-primary btn-open__ckfinder">
                                                <i data-lucide="folder-open" class="mr-1"></i>
                                                Choose File
                                            </button>
                                            <button type="button" class="btn btn-primary btn-save__data">
                                                <i data-lucide="save" class="mr-1"></i>
                                                Save
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </div>
        <div class="card-footer">

        </div>
    </div>
@else
    <div class="alert alert-danger alert-dismissible">
        <h5 class="mb-0"><i data-lucide="ban" class="icon mr-2"></i> Access Denied - You are not assigned to any Customer
            management department</h5>
    </div>
@endif
@endsection
@push('scripts')
    <script type="text/javascript">
        // Initialize Lucide icons
        document.addEventListener('DOMContentLoaded', function() {
            if (typeof lucide !== 'undefined') {
                lucide.createIcons();
            }
        });

        $('.btn-open__ckfinder').click(function () {
            CKFinder.popup({
                chooseFiles: true,
                onInit: function (finder) {
                    finder.on('files:choose', function (evt) {
                        let input_file = $('.box-add__input #input-file');
                        if (input_file.length) {
                            input_file.val(evt.data.files.first().getUrl())
                        }
                    });
                }
            });
        })
        $('.btn-save__data').click(function () {
            let file = $('.box-add__input #input-file')
            if (!file.val()) {
                if (!file.hasClass('border-danger')) {
                    file.addClass('border-danger')
                }
                return this;
            }
            if (file.hasClass('border-danger')) {
                file.removeClass('border-danger')
            }

            $.post('{{ route('api.CustomerUpdateFile') }}', {
                user_id: {{$customer->id}},
                file: file.val()
            })
                .then(function (response) {
                    if (response.error === false) {
                        Swal.fire({
                            title: "Successfully",
                            text: response.message,
                            icon: "success",
                            confirmButtonColor: "#3085d6",
                            confirmButtonText: "Xác nhận"
                        }).then((result) => {
                            if (result.isConfirmed) {
                                location.reload()
                            }
                        })
                    } else {
                        Swal.fire({
                            title: "Opp?",
                            text: response.message,
                            icon: "warning",
                            showCancelButton: false,
                            confirmButtonColor: "var(--color-brand)",
                            confirmButtonText: "Xác nhận"
                        })
                    }
                })

        })
        $('.btn-remove__file').click(function () {
            let id = $(this).data('id')
            $.post('{{ route('api.CustomerRemoveFile') }}', {
                file: id
            })
                .then(function (response) {
                    if (response.error === false) {
                        Swal.fire({
                            title: "Successfully",
                            text: response.message,
                            icon: "success",
                            confirmButtonColor: "#3085d6",
                            confirmButtonText: "Xác nhận"
                        }).then((result) => {
                            if (result.isConfirmed) {
                                location.reload()
                            }
                        })
                    } else {
                        Swal.fire({
                            title: "Opp?",
                            text: response.message,
                            icon: "warning",
                            showCancelButton: false,
                            confirmButtonColor: "var(--color-brand)",
                            confirmButtonText: "Xác nhận"
                        })
                    }
                })

        })
    </script>
@endpush