@extends('user.layout.main')
@section('content')
    <div class="main-content">
        <section class="section">

            <div class="section-header">
                <h1>Manajemen Contact</h1>
                <div class="section-header-breadcrumb">
                    <div class="breadcrumb-item active"><a href="#">Dashboard</a></div>
                    <div class="breadcrumb-item"><a href="#"> Transaction</a></div>
                    <div class="breadcrumb-item">Manajemen Kontak</div>
                    <div class="breadcrumb-item">Halaman Refund</div>
                </div>
            </div>

            {{-- tabel list kontak --}}
            <div class="row">
                <div class="col-md-12">
                    <div class="card">
                        <div class="card-header">
                            <div class="d-flex justify-content-end">
                                <button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#modalForm">Open
                                    Contact Form</button>
                            </div>
                        </div>
                        <div class="card-body">
                            <div class="table-responsive">
                                <table class="table table-striped" id="table-2">
                                    <thead>
                                        <tr class="text-center">
                                            <th>#</th>
                                            <th>Email</th>
                                            <th>Name</th>
                                            <th>Phone</th>
                                            <th>Action</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @foreach ($contacts as $contact)
                                            <tr>
                                                <td>{{ $loop->iteration }}</td>
                                                <td class="font-weight-600">
                                                    {{ $contact->relasiKontak->nama_depan . ' ' . $contact->relasiKontak->nama_belakang }}
                                                </td>
                                                <td class="text-center font-weight-600">{{ $contact->relasiKontak->email }}
                                                </td>
                                                <td class="text-center font-weight-600">{{ $contact->relasiKontak->nohp }}
                                                </td>
                                                <td class="text-center">
                                                    <button class="btn btn-info open-detail-modal" data-toggle="modal"
                                                        data-target="#modaldetail" id="detailContact"
                                                        data-id="{{ $contact->relasiKontak }}"
                                                        data-province="{{ $contact->relasiKontak->getProvinceName() }}"
                                                        data-city="{{ $contact->relasiKontak->getCityName() }}"
                                                        data-district="{{ $contact->relasiKontak->getDistrictName() }}"
                                                        data-village="{{ $contact->relasiKontak->getVillageName() }}">Detail</button>
                                                    <button class="btn btn-danger open-detail-modal" data-toggle="modal"
                                                        data-target="#modaldelete" id="deleteContact"
                                                        data-id="{{ $contact->id }}">Delete</button>
                                                </td>
                                            </tr>
                                        @endforeach
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            @extends('user.contact.modal-detail-contact')
            {{-- @extends('user.contact.modal-delete-contact') --}}
            @extends('user.contact.modal-add-contact')
        </section>
    </div>
    <script>
        $(document).ready(function() {
            let check = false;
            var teksArea = document.getElementById('resultArea');
            var teksNama = document.getElementById('teksNama');
            var teksNohp = document.getElementById('teksNoHP');
            var teksEmail = document.getElementById('teksEmail');
            var teksAlamat = document.getElementById('teksAlamat');

            $('#table-2').on('click', '#detailContact', function() {
                let dataId = $(this).data('id');
                let dataProvince = $(this).data('province');
                let dataCity = $(this).data('city');
                let dataDistrict = $(this).data('district');
                let dataVillage = $(this).data('village');
                teksNama.innerHTML = dataId.nama_depan + " " + dataId.nama_belakang;
                teksAlamat.innerHTML = dataId.alamat + ", " + capital(dataVillage) + ", " + capital(
                    dataDistrict) + ", " + capital(dataCity) + ", " + capital(dataProvince);
                teksNohp.innerHTML = dataId.nohp;
                teksEmail.innerHTML = dataId.email;
            });

            function capital(text) {
                return text.toLowerCase().replace(/(?:^|\s)\w/g, function(match) {
                    return match.toUpperCase();
                });
            }

            $('#table-2').on('click', '#deleteContact', function() {
                let dataId = $(this).data('id');
                const csrfToken = $('meta[name="csrf-token"]').attr('content');
                Swal.fire({
                    title: 'Hapus Kontak',
                    text: 'Yakin hapus kontak ini?',
                    icon: 'warning',
                    confirmButtonText: 'Ya, Hapus!',
                    showDenyButton: true,
                    denyButtonText: 'Tidak, jangan hapus',
                }).then((result) => {
                    if (result.isConfirmed) {
                        $.ajaxSetup({
                            headers: {
                                'X-CSRF-TOKEN': csrfToken
                            }
                        });

                        $.ajax({
                            url: "{{ route('user-contact.delete', ':id') }}".replace(':id',
                                dataId),
                            type: 'DELETE',
                            contentType: false,
                            processType: false,
                            success: function(response) {
                                Swal.fire({
                                    title: response.status ? 'Berhasil' :
                                        'Gagal',
                                    text: response.message,
                                    icon: response.status ? 'success' : 'error',
                                    confirmButtonText: 'OK'
                                }).then(function() {
                                    if (response.status == true) {
                                        location.reload();
                                    }
                                });
                            },
                            error: function(error) {
                                Swal.fire({
                                    title: 'Gagal',
                                    text: "Terjadi error karena " + error
                                        .message,
                                    icon: 'error',
                                    confirmButtonText: 'OK'
                                });
                            }
                        });
                    } else if (result.isDenied) {
                        Swal.fire({
                            title: 'Gagal',
                            text: 'Tidak ada kontak yang dihapus',
                            icon: 'info',
                            confirmButtonText: 'OK',
                        });
                    }
                });
            });


            $('#checkButton').on('click', function() {
                const email = document.querySelector('[name="email"]').value;
                const csrfToken = $('meta[name="csrf-token"]').attr('content');

                $.ajaxSetup({
                    headers: {
                        'X-CSRF-TOKEN': csrfToken
                    }
                });

                $.ajax({
                    url: "{{ route('user-contact.email', ':email') }}".replace(':email', email),
                    type: 'GET',
                    success: function(response) {
                        if (response.status) {
                            let status = response.message[0].status
                            Swal.fire({
                                title: response.status ? 'Akun ditemukan' :
                                    'Akun tidak ditemukan',
                                text: response.status ? 'Akun dengan email ' + email +
                                    ' tersedia' : 'Akun dengan email ' + email +
                                    ' tidak tersedia',
                                icon: response.status ? 'success' : 'error',
                                confirmButtonText: 'OK'
                            });
                            let messages = response.message[0];
                            let hasil = "Nama : " + messages.nama_depan + " " + messages
                                .nama_belakang +
                                "\n" + "Email : " + messages.email + "\n" + "No. HP : " +
                                messages.nohp + "\n" + "Alamat : " + messages.alamat;
                            teksArea.value = hasil;
                            teksArea.style.height = 'auto';
                            check = true;
                        } else {
                            Swal.fire({
                                title: 'Gagal',
                                text: response.message,
                                icon: 'error',
                                confirmButtonText: 'OK'
                            });
                            check = false;
                        }
                    },
                    error: function(error) {
                        Swal.fire({
                            title: 'Gagal!',
                            text: 'Gagal memuat data karena ' + error,
                            icon: 'error',
                            confirmButtonText: 'OK',
                        });
                        check = false;
                    }
                });
            });

            $('#tambahkanContact').on('click', function() {
                const email = document.querySelector('[name="email"]').value;
                const csrfToken = $('meta[name="csrf-token"]').attr('content');

                const formData = new FormData();
                formData.append('email', email);

                if (check) {
                    $.ajaxSetup({
                        headers: {
                            'X-CSRF-TOKEN': csrfToken
                        }
                    });

                    $.ajax({
                        url: '{{ route('user-contact.store') }}',
                        type: 'POST',
                        data: formData,
                        processData: false,
                        contentType: false,
                        success: function(response) {
                            Swal.fire({
                                title: response.status ? 'Berhasil' : 'Gagal',
                                text: response.message,
                                icon: response.status ? 'success' : 'error',
                                confirmButtonText: 'OK',
                            }).then(function() {
                                if (response.status == true) {
                                    location.reload();
                                }
                            });
                        }
                    });
                    check = false;
                } else {
                    Swal.fire({
                        title: 'Gagal',
                        text: 'Silahkan check email terlebih dahulu',
                        icon: 'error',
                    });
                    check = false;
                }

            });
        });
    </script>
@endsection