@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 Contact Details
            </div>

            <div class="card-body">

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

                @foreach ($contacts as $item)
                <form id="updateForm">

                    @csrf

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

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

                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="">Telephone: <i class="fas fa-fw fa-phone text-primary"></i></label>
                                <input type="text" class="form-control" name="telephone" value="{{$item->telephone}}"
                                    placeholder="Telephone Number">
                            </div>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="">Phone #1: <i class="fas fa-fw fa-mobile text-primary"></i></label>
                                <input type="text" class="form-control" name="phone1" value="{{$item->phone1}}"
                                    placeholder="Phone Number">
                            </div>
                        </div>

                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="">Phone #2: <i class="fas fa-fw fa-mobile-alt text-info"></i></label>
                                <input type="text" class="form-control" value="{{$item->phone2}}" name="phone2"
                                    placeholder="Second Phone Number">
                            </div>
                        </div>
                    </div>

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

                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="">Toll Free: <i class="fas fa-fw fa-phone-square text-primary"></i></label>
                                <input type="text" class="form-control" value="{{$item->toll_free}}" name="toll_free"
                                    placeholder="Toll Free">
                            </div>
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="">Address: <i class="fas fa-fw fa-map-signs text-primary"></i></label>
                        <textarea name="address" placeholder="Type Organization Address" id="address" cols="" rows="2"
                            class="form-control">{{$item->address}}</textarea>
                    </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">
                    @csrf
                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="">Email: <i class="fas fa-fw fa-envelope text-primary"></i></label>
                                <input type="text" class="form-control" name="email" placeholder="Email Address">
                            </div>
                        </div>

                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="">Telephone: <i class="fas fa-fw fa-phone text-primary"></i></label>
                                <input type="text" class="form-control" name="telephone" placeholder="Telephone Number">
                            </div>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="">Phone #1: <i class="fas fa-fw fa-mobile text-primary"></i></label>
                                <input type="text" class="form-control" name="phone1" placeholder="Phone Number">
                            </div>
                        </div>

                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="">Phone #2: <i class="fas fa-fw fa-mobile-alt text-info"></i></label>
                                <input type="text" class="form-control" name="phone2" placeholder="Second Phone Number">
                            </div>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="">Fax Number: <i class="fas fa-fw fa-fax text-primary"></i></label>
                                <input type="text" class="form-control" name="fax" placeholder="Fax Number">
                            </div>
                        </div>

                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="">Toll Free: <i class="fas fa-fw fa-phone-square text-primary"></i></label>
                                <input type="text" class="form-control" name="toll_free" placeholder="Toll Free">
                            </div>
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="">Address: <i class="fas fa-fw fa-map-signs text-primary"></i></label>
                        <textarea name="address" placeholder="Type Organization Address" id="address" cols="" rows="2"
                            class="form-control"></textarea>
                    </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('contact_detail.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('contact_detail')}}";
                        },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('contact_detail.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('contact_detail')}}";
                        },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