@extends('layouts.admin')
@section('content')
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
    <div class="container-xxl flex-grow-1 container-p-y">
        <div class="row mt-3 d-flex justify-content-center">
            <div class="col-12 col-lg-8">
                <div class="card shadow">
                    <div class="card-header">
                        <h2 class="text-center">{{ $data ? 'Update' : 'Create' }} Model</h2>
                    </div>
                    <div class="card-body">
                        @if (session('success'))
                            <div class="alert alert-success">
                                {{ session('success') }}
                            </div>
                        @endif
                        @if (session('error'))
                            <div class="alert alert-danger">
                                {{ session('error') }}
                            </div>
                        @endif
                        <form action="{{ $data ? route('models.update') : route('models.store') }}" method="POST" enctype="multipart/form-data">
                            @csrf
                            <input type="text" name="edit_id" value="{{ $data ? $data->id : '' }}" hidden>
                            <div class="row">
                                <div class="col-12 col-lg-6">
                                    <div class="form-group mt-0">
                                        <label for="title">Title</label>
                                        <input type="text" class="form-control p-2" id="name" name="title"
                                            value="{{ $data ? $data->title : '' }}" required>
                                        @error('title')
                                            <span class="text-danger">{{ $message }}</span>
                                        @enderror
                                    </div>
                                </div>
                                <div class="col-12 col-lg-6">
                                    <div class="form-group">
                                        <label for="category">Category</label>
                                        <select class="form-control p-2" name="category" id="">
                                            <option {{ $data && $data->category == 'construction' ? 'selected' : '' }}>construction
                                            </option>
                                            <option {{ $data && $data->category == 'gaming' ? 'selected' : '' }}>gaming
                                            </option>
                                            <option {{ $data && $data->category == 'vr' ? 'selected' : '' }}>vr
                                            </option>
                                            <option {{ $data && $data->category == 'retail' ? 'selected' : '' }}>retail
                                            </option>
                                            <option {{ $data && $data->category == 'manufacturing' ? 'selected' : '' }}>manufacturing
                                            </option>
                                            <option {{ $data && $data->category == 'health' ? 'selected' : '' }}>health
                                            </option>
                                        </select>
                                        @error('category')
                                            <span class="text-danger">{{ $message }}</span>
                                        @enderror
                                    </div>
                                </div>

                                <div class="col-12 col-lg-6">
                                    <div class="form-group mt-3">
                                        <label for="image">Thumbnail Image</label>
                                        <input type="file" class="form-control p-2" id="name" name="image"
                                             required>
                                        @error('image')
                                            <span class="text-danger">{{ $message }}</span>
                                        @enderror
                                    </div>
                                </div>
                                <div class="col-12 col-lg-6">
                                    <div class="form-group mt-3">
                                        <label for="image">Dark Thumbnail Image</label>
                                        <input type="file" class="form-control p-2" id="name" name="dark_thumbnail"
                                             required>
                                        @error('dark_thumbnail')
                                            <span class="text-danger">{{ $message }}</span>
                                        @enderror
                                    </div>
                                </div>
                                 <div class="col-12 col-lg-6">
                                    <div class="form-group mt-3">
                                        <label for="image">File (Video or Splat)</label>
                                        <input type="file" class="form-control p-2" id="files" name="files"
                                             required>
                                        @error('files')
                                            <span class="text-danger">{{ $message }}</span>
                                        @enderror
                                    </div>
                                </div>

                                  <div class="col-12 col-lg-6">
                                    <div class="form-group mt-3">
                                        <label for="category">File Type</label>
                                        <select class="form-control p-2" name="file_type" id="">
                                            <option {{ $data && $data->file_type == 'video' ? 'selected' : '' }}>video
                                            </option>
                                            <option {{ $data && $data->file_type == 'splat' ? 'selected' : '' }}>.splat
                                            </option>
                                        </select>
                                        @error('file_type')
                                            <span class="text-danger">{{ $message }}</span>
                                        @enderror
                                    </div>
                                </div>
                                   <div class="col-12 col-lg-6">
                                    <div class="form-group mt-3">
                                        <label for="category">Status</label>
                                        <select class="form-control p-2" name="status" id="">
                                            <option value="1" {{ $data && $data->status == 1 ? 'selected' : '' }}>Enable
                                            </option>
                                            <option value="0" {{ $data && $data->status == 0 ? 'selected' : '' }}>Disable
                                            </option>
                                        </select>
                                        @error('status')
                                            <span class="text-danger">{{ $message }}</span>
                                        @enderror
                                    </div>
                                </div>

                                <!-- Include Uppy CSS -->

                                <div class="col-12">
                                    <div class="form-group mt-3">
                                        <label for="description">Description</label>
                                        <textarea class="form-control" name="description">{{$data ? $data->description : ''}}</textarea>
                                        @error('description')
                                            <span class="text-danger">{{ $message }}</span>
                                        @enderror
                                    </div>
                                </div>
                            </div>

                            <button type="submit" id="submitBtn" class="btn btn-lg mt-3"
                                style="background-color: #DE3996; color: #fff">Save</button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
    $(document).ready(function () {
        $('form').on('submit', function (e) {
            e.preventDefault();
            $('#submitBtn').attr('disabled', true);
            $('#submitBtn').text('Saving...');
            let formData = new FormData(this);
            let actionUrl = $(this).attr('action');
 let $form = $(this);
            $.ajax({
                url: actionUrl,
                type: 'POST',
                data: formData,
                processData: false,
                contentType: false,
                success: function (response) {
                    $('.alert').remove();
                    $('<div class="alert alert-success">Model saved successfully!</div>').insertBefore('form');
$form[0].reset();
                    $('#submitBtn').attr('disabled', false);
                    $('#submitBtn').text('Save');
                },
                error: function (xhr) {
                    $('.alert').remove();

                    if (xhr.status === 422) {
                        let errors = xhr.responseJSON.errors;
                        for (let key in errors) {
                            let field = $('[name="' + key + '"]');
                            field.after('<span class="text-danger">' + errors[key][0] + '</span>');
                        }
                    } else {
                        $('<div class="alert alert-danger">Something went wrong!</div>').insertBefore('form');
                    }
                    $('#submitBtn').attr('disabled', false);
                    $('#submitBtn').text('Save');
                }
            });
        });
    });
</script>