@extends('layouts.app')

@section('content')
    <div class="container-fluid">
        <!-- row -->
        <div class="row">
            <div class="col-lg-12">
                <div class="card">
                    <div class="card-header">
                        <h4 class="card-title">Edit Family Category</h4>
                    </div>
                    <div class="card-body">
                        <div class="basic-form">
                            <div id="response"></div>
                            <form class="form-valide-with-icon needs-validation" id="update-split-category">
                                <input type="number" id="id" name="id" class="form-control" placeholder="ID"
                                    hidden>
                                <input type="text" id="category_type" name="category_type" class="form-control"
                                    placeholder="category type" hidden>
                                <div class="mb-3 row">
                                    <label class="col-sm-3 col-form-label">Name</label>
                                    <div class="col-sm-12">
                                        <input type="text" id="title" name="title" class="form-control"
                                            placeholder="Name">
                                    </div>
                                </div>
                                <div class="mb-3">
                                    <label class="col-sm-3 col-form-label">Color</label>
                                    <div class="col-sm-12">
                                        <input type="text" id="color" name="color" class="form-control"
                                            placeholder="Color">
                                    </div>
                                </div>
                                <div class="mb-3">
                                    <label class="col-sm-3 col-form-label">Icon</label>
                                    <div class="input-group">
                                        <div class="form-file">
                                            <input type="file" name="icon" accept="image/*"
                                                class="form-file-input form-control">
                                        </div>
                                        <img src="" id="iconImage" width="100">
                                    </div>
                                </div>
                                <button type="submit" class="btn me-2 btn-primary">Submit</button>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection


@section('script')
    <script>
        var token = sessionStorage.getItem('token');
        var url = "{{ env('APP_URL') }}";

        function editData() {
            $.ajax({
                type: "POST",
                url: url + "/single-split-category-details",
                contentType: "application/x-www-form-urlencoded; charset=UTF-8",
                data: {
                    'id': {{ request()->id }}
                },
                dataType: "json",
                headers: {
                    "Authorization": "Bearer " + token
                },
                success: function(msg) {
                    if (msg.success) {
                        $("#id").val(msg.data['id']);
                        $("#category_type").val(msg.data['category_type']);
                        $("#title").val(msg.data['title']);
                        $("#color").val(msg.data['color']);
                        $("#iconImage").attr('src', msg.data['icon']);
                    } else {
                        $('#response').html("<div class='alert alert-danger'>" + msg.message + "</div>");
                    }
                }
            });
        }

        $('#update-split-category').submit(function(event) {
            event.preventDefault();
            $('#response').html("");
            var formData = new FormData(this);
            $.ajax({
                url: url + "/update-split-category-admin",
                type: 'POST',
                data: formData,
                processData: false,
                contentType: false,
                success: function(data) {
                    if (data.success) {
                        $('form#update-split-category').trigger("reset");
                        window.location = url + "/list-family-category-view";
                    } else {
                        $('#response').html("<div class='alert alert-danger'>" + data.message +
                            "</div>");
                    }
                }
            });
        });

        $(document).ready(function() {
            CheckSession();
            editData();
        });
    </script>
@endsection