@extends("admin.main")
@section("content")
@if(auth()->guard('admins')->user()->can("edit customer"))
    <div class="card card-outline card-primary">
        <div class="card-header">
            @include("admin.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">
                            <table class="table table-borderless">
                                <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>
                        <!--Box Action-->
                        <div class="summary--box__action mt-2">
                            <ul class="list-unstyled">
                                <li>
                                    <a id="summary-reset-password"
                                        href="{{ route('customer.PasswordReset', ['userid' => $customer->id]) }}">
                                        <img src="{{ asset('images/resetpw.png') }}">
                                        Reset & Send Password
                                    </a>
                                </li>
                                <li>
                                    <a target="_blank" id="summary-login-as-client"
                                        href="{{ route('customer.Login', ['userid' => $customer->id]) }}">
                                        <img src="{{ asset('images/clientlogin.png') }}"> Login as Client
                                    </a>
                                </li>
                            </ul>
                        </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">
                            <table class="table table-borderless">
                                <tbody>
                                    <tr>
                                        <th scope="row">Invoice Paid</th>
                                        <td>{{ $customer->invoices_status_count_1 }}
                                            (@money($customer->invoices_status_1)
                                            đ)
                                        </td>

                                    </tr>
                                    <tr>
                                        <th scope="row">Invoice UnPaid</th>
                                        <td>{{ $customer->invoices_status_count_0 }}
                                            (@money($customer->invoices_status_0)
                                            đ)
                                        </td>
                                    </tr>
                                    <tr>
                                        <th scope="row">Total</th>
                                        <td>@money($customer->invoices_status_0 + $customer->invoices_status_1) đ</td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                    <div class="clients-summary__box">
                        <h4 class="title">Recent Emails</h4>
                        <div class="summary__box">
                            @if($customer->mail->count())
                                <table class="table table-borderless">
                                    <tbody>
                                        @foreach($customer->mail->take(4)->all() as $item)
                                            <tr>
                                                <td>
                                                    <a href="{{ route('customer.email', ['userid' => $userid, 'email_id' => $item->id]) }}"
                                                        target="_blank">{{ $item->created_at }}
                                                        - {{ $item->subject }}</a>
                                                </td>
                                            </tr>
                                        @endforeach
                                    </tbody>
                                </table>
                            @else
                                <p class="text-center m-0">No recent Email</p>
                            @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">
                            <table class="table table-borderless">
                                <tbody>
                                    <tr>
                                        <th scope="row">VPS/Server</th>
                                        <td>{{ $customer->vps_count}}</td>
                                    </tr>
                                    <tr>
                                        <th scope="row">Hosting</th>
                                        <td>{{ $customer->hosting_count }}</td>
                                    </tr>
                                    <tr>
                                        <th scope="row">Domain</th>
                                        <td>{{ $customer->domain_count }}</td>
                                    </tr>
                                    <tr>
                                        <th scope="row">Support Tickets</th>
                                        <td>{{ $customer->ticket_count }}</td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                    <!--File-->
                    <div class="clients-summary__box">
                        <h4 class="title">Files</h4>
                        <div class="summary__box">
                            @if($customer->file->count())
                                <table class="table table-borderless">
                                    <tbody>
                                        @foreach($customer->file->all() as $item)
                                            <tr>
                                                <td>
                                                    <a href="{{ $item->file_url }}" download
                                                        target="_blank">{{ $item->filename }}</a>
                                                </td>
                                                <td class="text-right">
                                                    <button data-id="{{ $item->id }}"
                                                        class="btn btn-outline-secondary p-1 border-0 btn-remove__file">
                                                        <i class="fas fa-trash"></i>
                                                    </button>
                                                </td>
                                            </tr>
                                        @endforeach
                                    </tbody>
                                </table>
                            @else
                                <p class="text-center m-0">No files uploaded</p>
                            @endif
                        </div>
                        <div class="box-add__file mt-2">
                            <a onclick="$('.box-add__input').removeClass('d-none')" class="cursor-point pointer-event">
                                <img alt="Add File" src="{{ asset('images/add.png') }}"> Add File
                            </a>
                            <div class="box-add__input d-none mt-2">
                                <div class="summary__box p-2">
                                    <div class="row">
                                        <div class="col-md-12">
                                            <label for="input-file">File:</label>
                                            <input type="text" class="form-control mt-2" id="input-file" name="file">
                                        </div>
                                    </div>
                                    <button class="btn mt-2 btn-open__ckfinder btn-outline-secondary">
                                        Choose File
                                    </button>
                                    <button class="btn mt-2 btn-save__data btn-outline-secondary">
                                        Save
                                    </button>
                                </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 class="icon fas fa-ban"></i> Access Denied - You are not assigned to any Customer
            management department</h5>
    </div>
@endif
@endsection
@push('scripts')
    <script type="text/javascript">
        $('.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