@extends('admin.layouts.app')

@section('title', 'Kişiler')

@section('styles')
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.24/css/dataTables.bootstrap4.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/sweetalert2@11/dist/sweetalert2.min.css">
@endsection

@section('content')
<div class="container-fluid">
    <div class="card">
        <div class="card-header d-flex justify-content-between align-items-center">
            <h3 class="card-title">Kişiler</h3>
            <div class="card-tools">
                <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#contactModal">
                    Yeni Kişi Ekle
                </button>
            </div>
        </div>
        <div class="card-body">
            <table class="table table-bordered table-striped" id="contactsTable">
                <thead>
                    <tr>
                        <th>ID</th>
                        <th>Kurum</th>
                        <th>Adı</th>
                        <th>Soyadı</th>
                        <th>Pozisyon</th>
                        <th>Telefon</th>
                        <th>E-posta</th>
                        <th>Durum</th>
                        <th>İşlemler</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($contacts as $contact)
                    <tr>
                        <td>{{ $contact->id }}</td>
                        <td>{{ $contact->institution->name }}</td>
                        <td>{{ $contact->name }}</td>
                        <td>{{ $contact->surname }}</td>
                        <td>{{ $contact->position }}</td>
                        <td>{{ $contact->phone }}</td>
                        <td>{{ $contact->email }}</td>
                        <td>{{ $contact->status == 'active' ? 'Aktif' : 'Pasif' }}</td>
                        <td>
                            <button class="btn btn-sm btn-dark duzenle-btn" 
                                data-id="{{ $contact->id }}"
                                data-institution_id="{{ $contact->institution_id }}"
                                data-name="{{ $contact->name }}"
                                data-surname="{{ $contact->surname }}"
                                data-position="{{ $contact->position }}"
                                data-phone="{{ $contact->phone }}"
                                data-email="{{ $contact->email }}"
                                data-status="{{ $contact->status }}">
                                <i class="bi bi-pencil-square"></i>
                            </button>
                            <button class="btn btn-sm btn-danger sil-btn" data-id="{{ $contact->id }}">
                                <i class="bi bi-trash"></i>
                            </button>
                        </td>
                    </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
    </div>
</div>

<!-- Kişi Ekleme/Düzenleme Modalı -->
<div class="modal fade" id="contactModal" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="modalBaslik">Yeni Kişi Ekle</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <form id="contactForm" method="POST">
                @csrf
                <input type="hidden" id="method" name="_method">
                <input type="hidden" id="contact_id" name="contact_id">
                <div class="modal-body">
                    <div class="form-group">
                        <label>Kurum</label>
                        <select class="form-control" id="institution_id" name="institution_id" required>
                            <option value="">Kurum Seçiniz</option>
                            @foreach($institutions as $institution)
                                <option value="{{ $institution->id }}">{{ $institution->name }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="form-group">
                        <label>Adı</label>
                        <input type="text" class="form-control" id="name" name="name" required>
                    </div>
                    <div class="form-group">
                        <label>Soyadı</label>
                        <input type="text" class="form-control" id="surname" name="surname" required>
                    </div>
                    <div class="form-group">
                        <label>Pozisyon</label>
                        <input type="text" class="form-control" id="position" name="position" required>
                    </div>
                    <div class="form-group">
                        <label>Telefon</label>
                        <div class="input-group">
                            <div class="input-group-prepend">
                                <select class="form-control" id="ulke_kodu" name="ulke_kodu" style="width: auto;">
                                    <option value="+90" selected>+90 (TR)</option>
                                    <option value="+1">+1 (US/CA)</option>
                                    <option value="+44">+44 (UK)</option>
                                </select>
                            </div>
                            <input type="text" class="form-control" id="phone" name="phone" placeholder="5XX XXX XX XX" required>
                        </div>
                    </div>
                    <div class="form-group">
                        <label>E-posta</label>
                        <input type="email" class="form-control" id="email" name="email" required>
                    </div>
                    <div class="form-group">
                        <label>Durum</label>
                        <select class="form-control" id="status" name="status">
                            <option value="active">Aktif</option>
                            <option value="passive">Pasif</option>
                        </select>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">İptal</button>
                    <button type="submit" class="btn btn-primary">Kaydet</button>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection

@section('scripts')
<script src="https://cdn.datatables.net/1.10.24/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.24/js/dataTables.bootstrap4.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

<script>
$(document).ready(function() {
    // DataTable başlatma
    $('#contactsTable').DataTable({
        "language": {
            "url": "//cdn.datatables.net/plug-ins/1.10.24/i18n/Turkish.json"
        }
    });

    // Telefon formatı
    $('#phone').on('input', function() {
        var number = $(this).val().replace(/[^\d]/g, '');
        if (number.startsWith('0')) {
            number = number.substring(1);
        }
        if (number.length > 10) number = number.substr(0, 10);
        var formatted = '';
        if (number.length > 0) formatted += number.substr(0, 3);
        if (number.length > 3) formatted += ' ' + number.substr(3, 3);
        if (number.length > 6) formatted += ' ' + number.substr(6, 2);
        if (number.length > 8) formatted += ' ' + number.substr(8);
        $(this).val(formatted);
    });

    // Form gönderimi
    $('#contactForm').on('submit', function(e) {
        e.preventDefault();
        
        $('.is-invalid').removeClass('is-invalid');
        $('.invalid-feedback').remove();
        
        var contact_id = $('#contact_id').val();
        var formData = $(this).serializeArray();
        
        // Telefon numarasını ülke koduyla birleştir
        var ulkeKodu = $('#ulke_kodu').val();
        var phone = $('#phone').val().replace(/[^\d]/g, '');
        var fullPhone = ulkeKodu + phone;
        
        formData = formData.filter(function(item) {
            return item.name !== 'phone';
        });
        formData.push({name: 'phone', value: fullPhone});

        $.ajax({
            url: contact_id ? `{{URL::to('admin/contacts')}}/${contact_id}` : '{{route('admin.contacts.store')}}',
            type: contact_id ? 'PUT' : 'POST',
            data: $.param(formData),

            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
            success: function(response) {
                $('#contactModal').modal('hide');
                Swal.fire({
                    title: 'Başarılı!',
                    text: response.message,
                    icon: 'success'
                }).then(() => {
                    window.location.reload();
                });
            },
            error: function(xhr) {
                if (xhr.status === 422) {
                    var errors = xhr.responseJSON.errors;
                    Object.keys(errors).forEach(function(field) {
                        $('#' + field).addClass('is-invalid');
                        $('#' + field).after('<div class="invalid-feedback">' + errors[field][0] + '</div>');
                    });
                } else {
                    Swal.fire({
                        title: 'Hata!',
                        text: 'Bir hata oluştu.',
                        icon: 'error'
                    });
                }
            }
        });
    });

    // Düzenleme modalını aç
    $('.duzenle-btn').click(function() {
        var contact = $(this).data();
        $('#modalBaslik').text('Kişi Düzenle');
        $('#contact_id').val(contact.id);
        $('#method').val('PUT');
        $('#institution_id').val(contact.institution_id);
        $('#name').val(contact.name);
        $('#surname').val(contact.surname);
        $('#position').val(contact.position);
        $('#status').val(contact.status);
        
        // Telefon numarasını parçala
        var phone = contact.phone;
        if (phone) {
            var ulkeKoduMatch = phone.match(/^\+\d+/);
            if (ulkeKoduMatch) {
                var ulkeKodu = ulkeKoduMatch[0];
                var numara = phone.substring(ulkeKodu.length).replace(/[^\d]/g, '');
                $('#ulke_kodu').val(ulkeKodu);
                $('#phone').val(numara.replace(/(\d{3})(\d{3})(\d{2})(\d{2})/, '$1 $2 $3 $4'));
            }
        }
        
        $('#email').val(contact.email);
        $('#contactModal').modal('show');
    });

    // Modal kapandığında formu sıfırla
    $('#contactModal').on('hidden.bs.modal', function() {
        $('#contactForm')[0].reset();
        $('#contact_id').val('');
        $('#method').val('POST');
        $('#modalBaslik').text('Yeni Kişi Ekle');
        $('.is-invalid').removeClass('is-invalid');
        $('.invalid-feedback').remove();
    });

    // Silme işlemi
    $('.sil-btn').click(function() {
        var contact_id = $(this).data('id');
        
        Swal.fire({
            title: 'Emin misiniz?',
            text: "Bu kişi silinecek!",
            icon: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#3085d6',
            cancelButtonColor: '#d33',
            confirmButtonText: 'Evet, sil!',
            cancelButtonText: 'İptal'
        }).then((result) => {
            if (result.isConfirmed) {
                $.ajax({
                    url: '/admin/contacts/' + contact_id,
                    type: 'DELETE',
                    data: {
                        "_token": "{{ csrf_token() }}"
                    },
                    success: function(response) {
                        Swal.fire(
                            'Silindi!',
                            response.message,
                            'success'
                        ).then(() => {
                            window.location.reload();
                        });
                    }
                });
            }
        });
    });
});
</script>
@endsection