@extends('admin.admin_app')

@section('content')
<style>
.remove-profile-image-wrap {
    width: 100px;
    position: relative;
}
.remove-profile-image {
    position: absolute;
    right: -5px;
    top: -5px;
    background: #f00;
    width: 22px;
    text-align: center;
    color: #fff;
    border-radius: 50%;
    cursor: pointer;
}
</style>
<div class="content-wrapper">

    <div class="container-xxl flex-grow-1 container-p-y">

        <div class="col-md-12">
            <div class="card mb-4">
            <h5 class="card-header">Edit Seller Details</h5>
                <div class="card-body">
                    <div id="login_success">
                        @if(session()->has('success'))
                        <div class="alert alert-success" role="alert">
                            {{ session()->get('success') }}
                        </div>
                        @endif
                    </div>
                    <div class="seller_errors"></div>
                    <form action="{{ route('sellers.update', ['seller' => $seller->id]) }}" id="sellerForm" method="POST" enctype="multipart/form-data">
                        @csrf
                        @method('PUT')
                        <div class="mb-3">
                            <label for="first_name" class="form-label">First Name <abbr class="required" title="required">*</abbr></label>
                            <input type="text" class="form-control" id="first_name" name="first_name" value="{{$seller->first_name}}" />
                        </div>
                        <div class="mb-3">
                            <label for="last_name" class="form-label">Last Name <abbr class="required" title="required">*</abbr></label>
                            <input type="text" class="form-control" id="last_name" name="last_name" value="{{$seller->last_name}}" />
                        </div>
                        <div class="mb-3">
                            <label for="organization_name" class="form-label">Organization Name <abbr class="required" title="required">*</abbr></label>
                            <input type="text" class="form-control" id="organization_name" name="organization_name" value="{{$seller->organization_name}}" />
                        </div>
                        <div class="mb-3">
                            <label for="email" class="form-label">Email <abbr class="required" title="required">*</abbr></label>
                            <input type="email" class="form-control" id="email" name="email" value="{{$seller->email}}" />
                        </div>
                        <div class="mb-3">
                            <label for="mobile_no" class="form-label">Mobile No.</label>
                            <input type="text" class="form-control" id="mobile_no" name="mobile_no" value="{{$seller->mobile_number}}" />
                        </div>
                        <div class="mb-3">
                            <label for="attribute_name" class="form-label">Profile Image</label>
                            <input type="file" class="form-control" id="profile_image" name="profile_image" accept="image/*" />
                            <p id="error1" style="display:none; color:#FF0000;">
                                Invalid Image Format! Image Format Must Be JPG, JPEG, PNG or GIF.
                            </p>
                            @if($seller->profile_image != '')
                                <div class="mt-2 remove-profile-image-wrap">
                                    <span class="remove-profile-image">X</span>
                                    <img src="{{asset($seller->profile_image)}}" width="100px" />
                                </div>
                            @endif
                            <input type="hidden" name="old_profile_image" class="old_profile_image" value="{{$seller->profile_image}}" />
                        </div>
                        <div class="mb-3">
                            <label for="status" class="form-label">Status <abbr class="required" title="required">*</abbr></label>
                            <select class="form-select" id="status" name="status" aria-label="Default select example" required>
                                <option value="" disabled> --- Select Status --- </option>
                                <option value="Active" @if($seller->status == 'Active') selected @endif>Active</option>
                                <option value="Inactive" @if($seller->status == 'Inactive') selected @endif>Inactive</option>
                            </select>
                        </div>
                        <button type="submit" name="submit" id="sellerSubmit" class="btn btn-primary">Update</button>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@section('script')
<script>
    var currentRequest = null;
    $("#sellerForm").validate({
        rules: {
            first_name : {
                required : true,
            },
            last_name : {
                required : true,
            },
            organization_name : {
                required : true,
            },
            email : {
                required : true,
                email : true,
            },
            profile_image:{
                extension: "jpg|jpeg|png|gif",
                filesize : 3
            }
        },
        messages: {
            first_name :{
                required: "Please enter first name"
            },
            last_name :{
                required: "Please enter first name"
            },
            profile_image : {
                extension: "Please select only jpg, jpeg, png or gif file"
            },
        },
        submitHandler: function(form) {
            $('#loading').show();
            $('.seller_errors').html('');
            var formData = new FormData(form);
            currentRequest = jQuery.ajax({
                type: 'POST',
                data: formData,
                url: "{{ route('sellers.update', ['seller' => $seller->id]) }}",
                dataType: 'JSON',
                processData: false,
                contentType: false,
                beforeSend : function()    {
                    if(currentRequest != null) {
                        currentRequest.abort();
                    }
                },
                success: function(data) {
                    $('.subtotal-promocode-wrap').html('');
                    if(data.errors) {
                        var errors = data.errors;
                        $.each(errors, function(i, val) {
                            $('.seller_errors').append('<div class="alert alert-danger alert-dismissible fade show text-left" role="alert">'+val[0]+'</div>');
                        })
                    }
                    else if (data.status == 0) {
                        $('.seller_errors').html(
                            '<div class="alert alert-danger alert-dismissible fade show text-left" role="alert">' +
                            data.message +
                            '</div>'
                            );
                    }
                    else {
                        window.location.href = '{{route("sellers.index")}}';
                    }
                    $('#loading').hide();
                    setTimeout(() => {
                        $('.seller_errors').html('');
                    }, 3000);
                },
                error:function(e){
                // Error
                    $('#loading').hide();
                    return false;
                }
            });
            return false;
        }
    });
    $(document).on('click', '.remove-profile-image', function() {
        Swal.fire({
            title: 'Are you sure?',
            text: 'You want to delete',
            icon: 'warning',
            customClass: {
                container: "remove-card-item-popup clear-cart-popup"
            },
            showCancelButton: true,
            confirmButtonColor: '#3085d6',
            cancelButtonColor: '#d33',
            confirmButtonText: 'Yes'
        }).then((result) => {
            if (result.isConfirmed) {
                $('.old_profile_image').val('')
                $(this).parents('.remove-profile-image-wrap').remove()
            }
        })
    })
</script>
@endsection