@extends('users::user-profile')

@section('inside')
    <div class="card">
        <div class="card-header">
            <h5>{{__('general.profile')}}</h5>
        </div>
        <div class="card-divider"></div>
        <div class="card-body">
            <button class="btn btn-primary pull-right" data-toggle="modal" data-target="#add-pet-modal">Evcil Hayvan
                Ekle
            </button>
            <!-- Modal -->
            <div class="modal fade" id="add-pet-modal" tabindex="-1" role="dialog" aria-labelledby="add-pet-modalLabel"
                 aria-hidden="true">
                <div class="modal-dialog" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title" id="add-pet-modalLabel">Evcil Hayvan Ekle</h5>
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                        <div class="modal-body">
                            <form id="add-pet-form">
                                {{csrf_field()}}
                                <div class="row">
                                    <div class="form-group col-6">
                                        <label>Adı</label>
                                        <input type="text" name="pet_name" class="form-control">
                                        <label id="pet_name-alert" style="color:red"></label>
                                    </div>
                                    <div class="form-group col-6">
                                        <label>Yaşı</label>
                                        <input type="number" name="pet_age" class="form-control">
                                        <label id="pet_age-alert" style="color:red"></label>
                                    </div>
                                    <div class="form-group col-6">
                                        <label>Cinsiyeti</label>
                                        <select name="pet_gender" class="form-control">
                                            <option value="">Seçiniz</option>
                                            <option value="Erkek">Erkek</option>
                                            <option value="Dişi">Dişi</option>
                                        </select>
                                        <label id="pet_gender-alert" style="color:red"></label>
                                    </div>
                                    <div class="form-group col-6">
                                        <label>Tür*</label>
                                        <select class="form-control" id="pet_category_type" name="pet_category_type" required="required">
                                            <option value="">Seçiniz</option>
                                            @foreach($categories as $category)
                                                <option value="{{ $category->id }}" {{ old('pet_category_type') == $category->id ? 'selected' : '' }}>{{ $category->name }}</option>
                                            @endforeach
                                        </select>
                                        <label id="pet_category_type-alert" style="color:red"></label>
                                    </div>
                                    <div class="form-group col-6">
                                        <label>Cins*</label>
                                        <select class="form-control" id="pet_category_id" name="pet_category_id">
                                            <option value="">Tür Seçiniz</option>
                                        </select>
                                        <label id="pet_category_id-alert" style="color:red"></label>
                                    </div>
                                </div>
                            </form>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-dismiss="modal">Kapat</button>
                            <button type="button" class="btn btn-primary" id="add-pet-button">Ekle</button>
                        </div>
                    </div>
                </div>
            </div>
            <div class="dashboard__orders card">
                <div class="card-header">
                    <h5>{{__('general.user-profile.orders')}}</h5>
                </div>
                <div class="card-divider"></div>
                <div class="card-table">
                    <div class="table-responsive-sm">
                        <table>
                            <thead>
                            <tr>
                                <th>Adı</th>
                                <th>Cinsi</th>
                                <th>Yaşı</th>
                                <th>Cinsiyeti</th>
                            </tr>
                            </thead>
                            <tbody>
                            @if($pets->count() > 0)
                                @foreach($pets as $pet)
                                    <tr id="pet-{{$pet->id}}">
                                        <td>{{@$pet->name}}</td>
                                        <td>{{@$pet->category->name}}</td>
                                        <td>{{@$pet->age}}</td>
                                        <td>{{@$pet->gender}}</td>

                                    </tr>
                                @endforeach
                            @else
                                <tr>
                                    <td>Sisteme ekli</td>
                                    <td>evcil hayvanınız</td>
                                    <td>bulunmamaktadır.</td>
                                </tr>
                            @endif
                            </tbody>
                        </table>
                        {{$pets->links()}}
                    </div>
                </div>
            </div>


        </div>

    </div>
    </div>
    </div>
@endsection
@section('inside-js')
    <script src="{{asset('customer/js/jquery.maskedinput.js')}}"></script>
    <script>
        jQuery(function ($) {
            $("#address-phone").mask('+90(XXX)XXX-XXXX');
        });
    </script>
    <script>
            @php
                $jsCategories = [];
                foreach($categories as $category){
                    $jsCategories[$category->id] = [];
                    $subs = $category->getAllSubIds();
                    foreach($subs as $sub){
                        $jsCategories[$category->id][] = [
                            'id' => $sub->id,
                            'name' => $sub->name,
                        ];
                    }
                }
                $jsCategories = json_encode($jsCategories);
            @endphp

        var categories = JSON.parse('{!! $jsCategories !!}');

        $('#pet_category_type').on('change', function(){
            var id = $(this).val();
            if(typeof categories[id] !== 'undefined'){}else{
                alert('Sistem sorunu oluştu. Lütfen sayfayı yenileyin.');
            }

            $('#pet_category_id').html('');

            for(var i=0;i<categories[id].length;i++){
                $('#pet_category_id').append('<option value="'+categories[id][i].id+'">'+categories[id][i].name+'</option>');
            }
        });
        $('#add-pet-button').on('click',function () {
            $.post('{{route('post-add-pet')}}',$('#add-pet-form').serialize(),function (response) {
                if(response.status == 'success'){
                    window.location.reload();
                }else{
                    alert(response.msg);
                }
            }).fail(function (response) {
                response = response.responseJSON;
                $.each(response.errors, function( index, value ) {
                    $('#'+index+'-alert').text(value[0]);

                });
            });
        })

    </script>
@endsection