@extends('welcome')
@section('content')

<style>
    .galleryno {
        display: none;
    }

    .profile {
        border-radius: 10px;
    }

    @media (max-width:700px) {
        .profile {
            height: 100px;
            width: 100px !important;
        }
    }

    @media (max-width:1100px) {
        .profile {
            height: 180px;
            width: 180px !important;
        }
    }

    @media (min-width:1101px) {
        .profile {
            height: 250px;
            width: 250px !important;

        }
    }
</style>
<section class="page-header page-header-classic">
    <div class="container">
        <div class="row">
            <div class="col">
                <ul class="breadcrumb">
                    <li><a href="{{URL::to('index')}}">Home</a></li>
                    <li><a href="{{url('userProfile',session('id'))}}">{{session('user')}}</a></li>
                    <li class="active">Your Profile</li>
                </ul>
            </div>
        </div>
        <div class="row">
            <div class="col p-static">
                <span class="page-header-title-border visible" style="width: 216.938px;"></span>
                <h1 data-title-border="">Your Profile</h1>

            </div>
        </div>
    </div>
</section>
<section class="about-us padding-section yellow-bg">
    <div class="container">

        <div class="row py-4">
            <div class="col-sm-6 align-middle mt-md-3">
                <div class="text-center ">
                    @if($data->profile)
                    <img src="{{asset('storage/uploads/profile/'.$data['profile'])}}" class=" rounded-xl profile" style="max-height:250px;min-height:100px;width:auto;" alt="" srcset="">
                    @else
                    <img src="{{asset('assets/img/unknown.webp')}}" class=" rounded-xl " style="max-height:250px;min-height:100px;width:auto;" alt="" srcset="">
                    @endif
                    <form id='picform'>
                        @csrf
                        <label for="profileUpdate"><i id="pici" class="fa-solid fa-user-pen btn btn-primary " style="cursor:pointer;"></i></label>
                        <input type="file" name="profile" id="profileUpdate" accept="image/*" style="opacity:0;z-index:-1;position:absolute; ">
                        <input type="text" name="id" hidden value="{{$data->id}}">
                        <div class="text-center py-3">
                            <button type="submit" id="subbtn" hidden class="border-0"> <i style="cursor:pointer" class="fa-solid fs-3 text-primary fa-spinner fa-spin"></i>please wait..!</button>
                            <p class="alert alert-danger" id='error' hidden role="alert"></p>
                        </div>
                    </form>
                </div>
                <div class="mt-3 text-center">
                    <p>Name : {{$data->name}}</p>
                    <p>Email : {{$data->email}}</p>
                    <p>Mobile Number : {{$data->mobile}}</p>
                </div>
            </div>
            <div class="col-md-6">
                <form action="" method="post">
                    @csrf
                    @method('PUT')
                    <h3>Update Profile</h3>
                    <div class="col-md-12 ">
                        <label for="inputName" class="form-label">Name</label>
                        <input type="text" class="form-control" value="{{$data->name}}" name="name" id="inputName">
                        <input type="text" hidden class="form-control" value="{{$data->id}}" name="id" id="userid">
                        @if($errors->any('name'))
                        <p class="text-danger">{{$errors->first('name')}}</p>
                        @endif
                    </div>
                    <div class="col-md-12">
                        <label for="inputgender" class="form-label">Gender</label>
                        <select name="gender" class="form-select" id="inputgender">
                            @if($data->gender)
                            <option value='{{$data->gender}}' selected>{{$data->gender}}</option>
                            @else
                            <option value='' selected>--Select Gender--</option>
                            @endif
                            @if($data->gender !=='Male')
                            <option value="Male">Male</option>
                            @endif
                            @if($data->gender !=='Female')
                            <option value="Female">Female</option>
                            @endif
                            @if($data->gender !=='Other')
                            <option value="Other">Other</option>
                            @endif
                        </select>
                        @if($errors->any('gender'))
                        <p class="text-danger">{{$errors->first('gender')}}</p>
                        @endif
                    </div>
                    <div class="col-md-12 ">
                        <label for="inputMobile" class="form-label">Mobile Number<sup class="text-danger">*</sup></label>
                        <div class="input-group mb-3 ">
                            <select name="country_code">
                                @if($data->country_code)
                                <option value="{{$data->country_code}}" selected>{{$data->country_code}}</option>
                                <option data-countryCode="IN"  value="+91">+91</option>
                                @else
                                <option data-countryCode="IN" selected value="+91">+91</option>
                                @endif
                                @include('partial.countryCode')
                            </select>
                                <input type="text" maxlength="10" placeholder="Enter Mobile Number*" value="{{$data->mobile}}" name="mobile" class="form-control" id="inputMobile">
                            
                        </div>
                        @if($errors->any('mobile'))
                        <p class="text-danger">{{$errors->first('mobile')}}</p>
                        @endif
                    </div>
                    <div class="col-md-12">
                        <label for="inputAddress" class="form-label">Address</label>
                        <input type="text" name="address" value="{{$data->address}}" class="form-control" id="inputAddress" placeholder="1234 Main St">
                    </div>

                    <div class="col-md-12">
                        <label for="country" class="form-label">Country</label>
                        <select id="country" name="country" value="" class="form-select">
                            <option value="{{$data->country}}">@if($data->country)
                                {{$data->country}}
                                @else
                                <span>--Select Country--</span>
                                @endif
                            </option>
                           @include('partial.countries')
                        </select>

                        @if($errors->any('country'))
                        <p class="text-danger">{{$errors->first('country')}}</p>
                        @endif
                    </div>
                    <div class="col-12 pt-2">
                        <button id="sbtn" name="submit" class="btn btn-primary">Update Profile</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</section>

<script>
    $(document).ready(function() {
        file = $('#profileUpdate');
        file.on('change', function(e) {
            $("#subbtn").removeAttr('hidden');
            $('#pici').css('background-color', 'green');
            $('#picform').submit();
        })
    })
</script>
<script>
    $(document).ready(function() {
        $('#picform').submit(function(e) {
            e.preventDefault();
            var formData = new FormData(this);
            $.ajax({
                url: 'updateform/{{$data->id}}',
                type: 'post',
                data: formData,
                contentType: false,
                // headers: {
                //     'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                // },

                processData: false,
                success: function(response) {
                    if (response.success) {
                        location.reload(true);
                    }
                },
                error: function(response) {
                    $('#error').removeAttr('hidden');
                    $("#subbtn").attr('hidden', true);
                    $('#error').text(response.responseJSON.message);
                    console.log(response.responseJSON)
                }
            })
        })

    })
</script>
<script>
    $(document).ready(function() {
        $('#sbtn').attr('disabled', true);
        let name = $("input[name='name']");
        let mobile = $("input[name='mobile']");
        let address = $("input[name='address']");
        let gender = $("select[name='gender']");
        let country = $("select[name='country']");
        let country_code = $("select[name='country_code']");
        name.on('keyup', function() {
            return checkvalid(name);
        });
        mobile.on('keyup', function() {
            return checkvalid(mobile);
        })
        address.on('keyup', function() {
            $('#sbtn').removeAttr('disabled');
        })
        gender.on('change', function() {
            $('#sbtn').removeAttr('disabled');
        })
        country.on('change', function() {
            $('#sbtn').removeAttr('disabled');
        })
        country_code.on('change', function() {
            $('#sbtn').removeAttr('disabled');
        })


    });
</script>

<script type="text/javascript" src="{{asset('assets/js/jqueryvalidation.js')}}"></script>


@stop