@extends('backend.layouts.app')
@section('content')

<h4 class="py-3 mb-4">
    @lang('messages.social_media.social_media')
</h4>

<div class="card mb-6 p-10">
    <form id="addSocialMediaForm" method="POST" action="{{ route('social_media.update',  @$socialmedia->id_encrypted) }}" class="row g-5">
        @csrf
        @method('PUT')
        <div class="card-body">
            <div class="row">
                <div class="col-md-4 d-flex align-items-sm-center gap-6">
                    <div class="button-wrapper">
                        <label for="social_video" class="btn btn-sm btn-primary me-3 mb-4 waves-effect waves-light" tabindex="0">
                            <span class="d-none d-sm-block">@lang('messages.social_media.upload_video_mobile')</span>
                            <i class="ri-upload-2-line d-block d-sm-none"></i>
                            <input type="file" id="social_video_mobile" name="social_video_mobile" class="account-file-input" hidden>
                        </label>
                    </div>
                </div>
                <div class="col-md-4 d-flex align-items-sm-center gap-6">
                    <div class="button-wrapper">
                        <label for="social_video" class="btn btn-sm btn-primary me-3 mb-4 waves-effect waves-light" tabindex="0">
                            <span class="d-none d-sm-block">@lang('messages.social_media.upload_video_tablet')</span>
                            <i class="ri-upload-2-line d-block d-sm-none"></i>
                            <input type="file" id="social_video_tablet" name="social_video_tablet" class="account-file-input" hidden>
                        </label>
                    </div>
                </div>
                <div class="col-md-4 d-flex align-items-sm-center gap-6">
                    <div class="button-wrapper">
                        <label for="social_video" class="btn btn-sm btn-primary me-3 mb-4 waves-effect waves-light" tabindex="0">
                            <span class="d-none d-sm-block">@lang('messages.social_media.upload_video_desktop')</span>
                            <i class="ri-upload-2-line d-block d-sm-none"></i>
                            <input type="file" id="social_video_desktop" name="social_video_desktop" class="account-file-input" hidden>
                        </label>
                    </div>
                </div>
            </div>
            <div class="row mt-5">
                <div class="col-md-6">
                    <div class="form-floating form-floating-outline">
                        <input type="text" class="form-control" placeholder="@lang('messages.social_media.social_button_en')" name="social_button_en" value="{{$socialmedia->social_button_en}}" aria-label="social_button_en" aria-describedby="social_button_en" />
                        <label for="social_text_en">@lang('messages.social_media.social_button_en')</label>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="form-floating form-floating-outline">
                        <input type="text" class="form-control" placeholder="@lang('messages.social_media.social_button_ro')" name="social_button_ro" value="{{$socialmedia->social_button_ro}}" aria-label="social_button_ro" aria-describedby="social_button_ro" />
                        <label for="social_text_en">@lang('messages.social_media.social_button_ro')</label>
                    </div>
                </div>
            </div>
            <div class="row mt-5 g-5">
                <div class="col-md-6">
                    <div class="form-floating form-floating-outline mb-6">
                        <textarea class="form-control h-px-100" id="social_text_en" name="social_text_en" placeholder="@lang('messages.social_media.social_text_en')">{{$socialmedia->social_text_en}}</textarea>
                        <label for="social_text_en">@lang('messages.social_media.social_text_en')</label>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="form-floating form-floating-outline mb-6">
                        <textarea class="form-control h-px-100" id="social_text_ro" name="social_text_ro" placeholder="@lang('messages.social_media.social_text_ro')">{{$socialmedia->social_text_ro}}</textarea>
                        <label for="social_text_en">@lang('messages.social_media.social_text_ro')</label>
                    </div>
                </div>
            </div>

            <div class="mt-6">
                <button type="submit" class="btn btn-primary me-3 waves-effect waves-light">@lang('messages.social_media.save_changes')</button>
                <button type="reset" class="btn btn-outline-secondary waves-effect">@lang('messages.social_media.reset')</button>
            </div>
        </div>
    <form>
</div>
@endsection

@section('footer_scripts')
<script>
    $("#addSocialMediaForm").submit(function(e) {
        e.preventDefault();
    }).validate({
        rules: {
            social_button_en: {
                required: true,
                maxlength: 255
            },
            social_button_ro: {
                required: true,
                maxlength: 255
            },
            social_video_mobile: {
                extension: "mp4|mov|avi",
                filesize: 20480000 // 20MB in bytes
            },
            social_video_tablet: {
                extension: "mp4|mov|avi",
                filesize: 20480000 // 20MB in bytes
            },
            social_video_desktop: {
                extension: "mp4|mov|avi",
                filesize: 20480000 // 20MB in bytes
            }
        },

        errorElement: 'span',
        submitHandler: function(form) {
            var formData = new FormData(form);
            $.ajax({
                url: $(form).attr('action'),
                data: formData,
                type: 'POST',
                dataType: 'json',
                processData: false,
                contentType: false,
                success: function(data) {
                    if (data.status) {
                        Swal.fire({
                            title: data.title,
                            text: data.message,
                            icon: 'success',
                        });
                        $(form)[0].reset();
                        setTimeout(() => {
                            window.location.href = data.url;
                        }, 3000);
                    }
                },
                error: function(xhr, status, error) {
                    var jsonResponse = JSON.parse(xhr.responseText);
                    var errorMessage = "Validation failed";

                    if (jsonResponse.errors) {
                        errorMessage += ": ";
                        errorMessage += Object.values(jsonResponse.errors).join(
                            ", ");
                        Swal.fire('', errorMessage, 'error')
                    }
                }
            });
            return false;
        }
    });
</script>
@endsection