@extends('main')

@section('title', 'Detail Customer | Page')

@section('content')
    <div class="content">
        <div class="page-header">
            <div class="page-title">
                <h4>Customer Management</h4>
                <h6>Detail Customer</h6>
            </div>
        </div>

        <div class="card">
            <div class="card-body">
                <div class="row">

                    {{-- Foto Profil --}}
                    <div class="col-lg-4 col-sm-6 col-12">
                        <div class="form-group text-center">
                            <label>Profile Photo</label><br>
                            @if (!empty($customer->profile_picture))
                                {{-- Tampilkan foto profil jika ada --}}
                                <img src="{{ asset('img/profiles/' . $customer->profile_picture) }}" alt="Profile Photo"
                                     class="img-thumbnail mb-2" width="150" style="cursor:pointer"
                                     data-bs-toggle="modal" data-bs-target="#modalProfile">
                            @else
                                {{-- Tampilkan gambar default jika tidak ada --}}
                                <img src="{{ asset('img/profiles/1741159182.png') }}" alt="Default Avatar"
                                     class="img-thumbnail mb-2" width="150">
                                <p class="text-muted small">No profile photo</p>
                            @endif
                        </div>
                    </div>

                    {{-- Informasi Dasar --}}
                    <div class="col-lg-4 col-sm-6 col-12">
                        <div class="form-group">
                            <label>Customer Name</label>
                            <input type="text" readonly class="form-control" value="{{ $customer->name }}">
                        </div>
                        <div class="form-group">
                            <label>Email</label>
                            <input type="text" readonly class="form-control" value="{{ $customer->email }}">
                        </div>
                    </div>

                    <div class="col-lg-4 col-sm-6 col-12">
                        <div class="form-group">
                            <label>Phone</label>
                            <input type="text" readonly class="form-control" value="{{ $customer->phone }}">
                        </div>
                        <div class="form-group">
                            <label>Role Access</label>
                            <input type="text" readonly class="form-control"
                                   value="{{ ucfirst($customer->getRoleNames()->first()) }}">
                        </div>
                    </div>

                    {{-- Foto KTP --}}
                    <div class="col-lg-6 col-sm-12">
                        <div class="form-group">
                            <label>Foto KTP</label><br>
                            @if (!empty($customer->ktp_photo))
                                <img src="{{ asset('img/ktp/' . $customer->ktp_photo) }}" alt="KTP Photo"
                                     class="img-thumbnail mb-2" width="200" style="cursor:pointer"
                                     data-bs-toggle="modal" data-bs-target="#modalKTP">
                            @else
                                <p class="text-muted">Belum ada foto KTP</p>
                            @endif
                        </div>
                    </div>

                    {{-- Foto NPWP --}}
                    <div class="col-lg-6 col-sm-12">
                        <div class="form-group">
                            <label>Foto NPWP</label><br>
                            @if (!empty($customer->npwp_photo))
                                <img src="{{ asset('img/npwp/' . $customer->npwp_photo) }}" alt="NPWP Photo"
                                     class="img-thumbnail mb-2" width="200" style="cursor:pointer"
                                     data-bs-toggle="modal" data-bs-target="#modalNPWP">
                            @else
                                <p class="text-muted">Belum ada foto NPWP</p>
                            @endif
                        </div>
                    </div>

                    <div class="col-lg-12 mb-2 d-flex gap-2">
                        <a href="{{ url('customers') }}" class="btn btn-secondary btn-sm">Back</a>
                    @if($customer->status == 'pending')
                            <form action="{{ route('customers.approve', $customer->id) }}" method="POST" class="approve-form">
                                @csrf
                                @method('PATCH')
                                <button type="submit" class="btn btn-success btn-sm">Approve</button>
                            </form>
                    @endif
                    </div>



                </div>
            </div>
        </div>
    </div>
    {{-- Modal Zoom profile --}}
    <div class="modal fade" id="modalProfile" tabindex="-1" aria-labelledby="modalProfileLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="modalProfileLabel">{{ $customer->name }}'s Profile Photo</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body text-center">
                    <img src="{{ asset('img/profiles/' . $customer->profile_picture) }}" class="img-fluid" alt="Profile Photo">
                </div>
            </div>
        </div>
    </div>
    {{-- Modal Zoom KTP --}}
    <div class="modal fade" id="modalKTP" tabindex="-1" aria-labelledby="modalKTPLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-lg">
            <div class="modal-content">
                <div class="modal-body text-center">
                    <img src="{{ asset('img/ktp/' . $customer->ktp_photo) }}" class="img-fluid">
                </div>
            </div>
        </div>
    </div>

    {{-- Modal Zoom NPWP --}}
    <div class="modal fade" id="modalNPWP" tabindex="-1" aria-labelledby="modalNPWPLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-lg">
            <div class="modal-content">
                <div class="modal-body text-center">
                    <img src="{{ asset('img/npwp/' . $customer->npwp_photo) }}" class="img-fluid">
                </div>
            </div>
        </div>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function () {

            document.querySelectorAll('.approve-form').forEach(form => {
                form.addEventListener('submit', function (e) {
                    e.preventDefault();

                    // Dialog SweetAlert dalam Bahasa Inggris
                    Swal.fire({
                        title: 'Confirm Approval',
                        text: "Are you sure you want to approve this customer? This action cannot be undone.",
                        icon: 'warning',
                        showCancelButton: true,
                        confirmButtonColor: '#ff9f43',
                        cancelButtonColor: '#d33',
                        confirmButtonText: 'Yes, approve it!',
                        cancelButtonText: 'Cancel'
                    }).then((result) => {
                        if (result.isConfirmed) {
                            this.submit();
                        }
                    });
                });
            });

        });
    </script>
@endsection