@extends('layouts.master')


@section('title')
    Users | FilmiJobsUnlimited
@endsection


@section('content')
    <div class="layout-px-spacing">
        <div class="layout-top-spacing mb-2">
            <div class="col-md-12">
                <div class="row">
                    <div class="container p-0">
                        <div class="row layout-top-spacing">
                            <div class="col-lg-12 layout-spacing">
                                <div class="statbox widget box box-shadow mb-4">
                                    <div class="widget-header">
                                        <div class="row">
                                            <div class="col-xl-12 col-md-12 col-sm-12 col-12">
                                                <h4>Add User</h4>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="widget-content widget-content-area">
                                        <form action="" id="userform" method="post">
                                            @csrf
                                            <div class="w-100">

                                                <div class="form-group row">
                                                    <div class="col-lg-6">
                                                        <label for="category">Select Category
                                                            <span class="text-danger">*</span></label>
                                                        <select class="form-control" name="category" id="category">
                                                            <option value="">Select</option>
                                                            <option value="model">Model</option>
                                                            <option value="actor">Actor</option>
                                                            <option value="talent">Talent</option>
                                                        </select>
                                                    </div>

                                                    <div class="col-lg-6">
                                                        <label>Gender
                                                            <span class="text-danger">*</span></label>
                                                            <select class="form-control" name="gender" id="gender">
                                                               <option value="">Select gender</option>
                                                               <option value="male">Male</option>
                                                               <option value="female">Female</option>
                                                               <option value="other">Other</option>
                                                            </select>
                                                    </div>


                                                </div>
                                                <div class="form-group row">

                                                    <div class="col-lg-6">
                                                        <label>Name
                                                            <span class="text-danger">*</span></label>
                                                        <input type="text" required class="form-control"
                                                             name="username" placeholder="">
                                                    </div>

                                                    <div class="col-lg-6">
                                                        <label>Title
                                                            <span class="text-danger"></span></label>
                                                        <input type="text"  class="form-control"
                                                             name="title" placeholder="">
                                                    </div>

                                                </div>

                                                <div class="form-group row">

                                                    <div class="col-lg-6">
                                                        <label>City<span class="text-danger">*</span></label>
                                                        <input type="text" class="form-control" name="city" id="city">
                                                    </div>

                                                    <div class="col-lg-6">
                                                        <label>Link
                                                            <span class="text-danger">*</span></label>
                                                        <input type="text" required class="form-control"
                                                             name="link" placeholder="link">
                                                    </div>
                                                </div>

                                                <div class="form-group row">

                                                    <div class="col-lg-6">
                                                        <label for="file-upload">User Pic
                                                            <span class="text-danger">*</span>
                                                        </label>
                                                        <br>
                                                        <div class="d-flex">
                                                            <input id="file-upload" class="ml-1" name='profile'
                                                                type="file" accept="image/*">

                                                            <div class="attached-files">
                                                                <img id="image-preview" width="290px">
                                                            </div>
                                                        </div>
                                                    </div>

                                                    <div class="col-lg-6">
                                                        <label for="short_detail">Short Detail
                                                            <span class="text-danger">*</span></label>
                                                        <textarea class="form-control" name="short_detail" id="short_detail" rows="2" placeholder="text here..."></textarea>
                                                    </div>
                                                </div>



                                            </div>
                                            <div class="widget-footer text-right">
                                                <button type="submit" class="btn btn-primary mr-2">Submit</button>
                                                {{-- <button type="reset" class="btn btn-outline-primary">Cancel</button> --}}
                                            </div>
                                        </form>
                                    </div>

                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection



@section('scripts')
    <script>
        $('#userform').submit(function(event) {
            event.preventDefault();
            var formData = new FormData(this);
            // console.log(formData)
            $.ajax({
                type: "POST",
                url: "{{ route('user.store') }}",
                data: formData,
                cache: false,
                contentType: false,
                processData: false,
                success: function(response) {
                    // Handle success response
                    // console.log(response);
                    Swal.fire({
                        type: 'success',
                        title: "User Add Succesfully",
                        showConfirmButton: false,
                        timer: 2500
                    }).then(() => {
                        window.location.reload();
                    });

                },
                error: function(response) {
                    Swal.fire({

                        type: 'error',
                        title: response.responseJSON.message,
                        showConfirmButton: false,
                        timer: 2500
                    })
                    console.log(response);
                }
            });

        });


    </script>
@endsection