@push('css-app')
<style>

</style>
@endpush
@extends('template')
@section('content')
<?php use App\Http\Traits\Helper; ?>
<meta name="csrf-token" content="{{ csrf_token() }}">
<div class="card border-0  my-2">
    <div class="card-body">
        <form id="formBrand" method="post">
            <div class="form-group">
                <label>Nama Brand</label>
                <input type="text" name="nama_brand" id="nama_brand" value="{{$data->nama_brand}}" class="form-control" />
                <input type="hidden" name="id_brand" id="id_brand" value="{{$data->id_brand}}" class="form-control" />
            </div>
            
            <div class="form-group">
                <button type="submit" id="submit_btn" class="btn btn-primary">Simpan</button>
            </div>
        </form>
    </div>
</div>
<div class="modal fade" id="notifInvalid" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Error</h5>
                <button type="button" class="close notifInvalidClose" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <p id="text_notif">Duplicate Name!</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary notifInvalidClose" data-dismiss="modal">Ok</button>
            </div>
        </div>
    </div>
</div>

<!-- <script rc="https://cdn.jsdelivr.net/npm/chart.js@4.0.1/dist/chart.umd.min.js"></script> -->
@endsection
@push('js')

<script>
   $('.notifInvalidClose').click(function () {
        $('#notifInvalid').modal('hide');
    });
    $("#formBrand").submit(function (e) {
        e.preventDefault();
        $('#submit_btn').attr('disabled', true);
        do_ajax();
    });
    $.ajaxSetup({
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        }
    });
    function do_ajax() {
        //var data = $('#formSite').serialize();
        var data = new FormData();
        data.append('nama_brand', $('#nama_brand').val());
        data.append('id_brand', $('#id_brand').val());
        $.ajax({
            type: "POST",
            url: "{{url('brand/save-edit')}}", // Replace with your server endpoint
            enctype: 'multipart/form-data',
            processData: false,
            contentType: false,
            data: data,
            success: function (response) {
                // Handle the response from the server
                console.log(response);
                if (response.Code == 1) {
                    $('#submit_btn').attr('disabled', false);
                    window.location = "{{url('brand')}}";
                } else {
                    $('#submit_btn').attr('disabled', false);
                    $('#notifInvalid').modal('show');
                }

            },
            error: function (error) {
                // Handle errors
                console.log(error);
            }
        });
    }
</script>
@endpush