@extends('layouts.master')
@section('content')
    <div class="row justify-content-center">
        <div class="col-md-6 pt-4">
            <div class="card card-outline card-primary">
                <div class="card-header text-center">
                    TPHA Social Network Accounts
                </div>

                <div class="card-body">

                    @if($socials_page->count() != 0)

                    @foreach ($socials_page as $item)
                    <form  id="updateForm" method="POST">

                        @csrf

                        <input type="hidden" name="social" value="{{$item->id}}">

                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="">Facebook: <i class="fab fa-fw fa-facebook text-primary"></i></label>
                                    <input type="text" class="form-control" name="facebook" value="{{$item->facebook}}"  placeholder="Facebook">
                                </div>
                            </div>

                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="">Twitter: <i class="fab fa-fw fa-twitter text-primary"></i></label>
                                    <input type="text" class="form-control" name="twitter" value="{{$item->twitter}}" placeholder="Twitter">
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="">Instagram: <i class="fab fa-fw fa-instagram text-primary"></i></label>
                                    <input type="text" class="form-control" name="instagram" value="{{$item->instagram}}" placeholder="Instagram">
                                </div>
                            </div>

                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="">Youtube: <i class="fab fa-fw fa-youtube text-danger"></i></label>
                                    <input type="text" class="form-control" name="youtube" value="{{$item->youtube}}" placeholder="Youtube">
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="">Linkedin: <i class="fab fa-fw fa-linkedin text-primary"></i></label>
                                    <input type="text" class="form-control" name="linkedin" value="{{$item->linkedin}}" placeholder="Linkedin">
                                </div>
                            </div>

                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="">Skype: <i class="fab fa-fw fa-skype text-primary"></i></label>
                                    <input type="text" class="form-control" name="skype" value="{{$item->skype}}" placeholder="Skype">
                                </div>
                            </div>
                        </div>

                        <div class="form-group">
                            <button type="submit" class="btn bg-gradient-primary">Save Details <i class="fas fa-fw fa-check-circle"></i></button>
                        </div>
                        
                    </form>
                    @endforeach

                    @else
                    <form id="createForm" method="POST">
                        @csrf
                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="">Facebook: <i class="fab fa-fw fa-facebook text-primary"></i></label>
                                    <input type="text" class="form-control" name="facebook" placeholder="Facebook">
                                </div>
                            </div>

                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="">Twitter: <i class="fab fa-fw fa-twitter text-primary"></i></label>
                                    <input type="text" class="form-control" name="twitter" placeholder="Twitter">
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="">Instagram: <i class="fab fa-fw fa-instagram text-primary"></i></label>
                                    <input type="text" class="form-control" name="instagram" placeholder="Instagram">
                                </div>
                            </div>

                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="">Youtube: <i class="fab fa-fw fa-youtube text-danger"></i></label>
                                    <input type="text" class="form-control" name="youtube" placeholder="Youtube">
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="">Linkedin: <i class="fab fa-fw fa-linkedin text-primary"></i></label>
                                    <input type="text" class="form-control" name="linkedin" placeholder="Linkedin">
                                </div>
                            </div>

                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="">Skype: <i class="fab fa-fw fa-skype text-primary"></i></label>
                                    <input type="text" class="form-control" name="skype" placeholder="Skype">
                                </div>
                            </div>
                        </div>

                        <div class="form-group">
                            <button type="submit" class="btn bg-gradient-primary">Save Details <i class="fas fa-fw fa-check-circle"></i></button>
                        </div>
                        
                    </form>
                    @endif
                    
                    
                </div>
            </div>
        </div>
    </div>

    <script>
        $("document").ready(function(){
            //updating
            $('#updateForm').on('submit',function(event){
                event.preventDefault();

                var data_url = "{{route('social_network.update')}}";

                $.ajax({
                    url: data_url,
                    method: "POST",
                    data: $(this).serialize(),
                    dataType: "JSON",

                    success:function(data){
                        if(data.success){
                            var result = data.success;

                            Swal.fire({
                                title: "Notification!",
                                text: result,
                                icon: "success",
                                showConfirmButton: false,
                                showCancelButton: false,
                                timer: 3000,
                            });

                            setTimeout(function(){
                                window.location = "{{url('social_network')}}";
                            },2000);
                        }

                        //errors
                        if(data.errors){
                            var result = data.result;

                            Swal.fire({
                                title: "Info!",
                                text: result,
                                icon: "warning",
                                showConfirmButton: false,
                                showCancelButton: false,
                                timer: 3000,
                            });
                        }
                    }
                })

                
            })

            $('#createForm').on('submit',function(event){
                event.preventDefault();

                var data_url = "{{route('social_network.store')}}";

                $.ajax({
                    url: data_url,
                    method: "POST",
                    data: $(this).serialize(),
                    dataType: "JSON",

                    success:function(data){
                        if(data.success){
                            var result = data.success;

                            Swal.fire({
                                title: "Notification!",
                                text: result,
                                icon: "success",
                                showConfirmButton: false,
                                showCancelButton: false,
                                timer: 3000,
                            });

                            setTimeout(function(){
                                window.location = "{{url('social_network')}}";
                            },2000);
                        }

                        //errors
                        if(data.errors){
                            var result = data.result;

                            Swal.fire({
                                title: "Info!",
                                text: result,
                                icon: "warning",
                                showConfirmButton: false,
                                showCancelButton: false,
                                timer: 3000,
                            });
                        }
                    }
                })

                
            })
        })
    </script>
@endsection