@extends("layouts.admin.app")

@section("page-title")
{{__("Dashboard")}}
@endSection

@section("page-nav-title")
<div class="app-title">
    <div>
        <h1><i class="fa fa-dashboard"></i>{{__("setting")}}</h1>
        <p>{{__("all-setting")}}</p>
    </div>
    <ul class="app-breadcrumb breadcrumb">
        <li class="breadcrumb-item"><i class="fa fa-home fa-lg"></i></li>
        <li class="breadcrumb-item"><a href="#">{{__("Dashboard")}}</a></li>
        <li class="breadcrumb-item"><a href="#">{{__("setting")}}</a></li>
    </ul>
</div>
@endsection

@section("content")
<div class="row">
    <div class="col-md-12">
        <div class="buttons-group" style="padding: 0px 16px;">
            <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#createRoleModal">
                <i class="fas fa-plus"></i>{{ __("create-setting") }}
            </button>
        </div>
        <div class="modal fade" id="createRoleModal" tabindex="-1" role="dialog" aria-labelledby="createRoleModalLabel" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="createRoleModalLabel">{{ __("create-setting") }}</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <div class="col-lg-12">
                            <div class="form-group">
                                <label class="control-label">{{__("name")}}</label>
                                <input class="form-control" id="Cname" type="text" placeholder="{{__("enter-name-setting")}}">
                            </div>
                        </div>
                        <div class="col-lg-12">
                            <div class="form-group">
                                <label class="control-label">{{__("value")}}</label>
                                <input class="form-control" id="Cvalue" type="text" placeholder="{{__("enter-value-setting")}}">
                            </div>
                        </div>
                        <div class="col-lg-12">
                            <div class="form-group">
                                <label class="control-label">{{__("notes")}}</label>
                                <input class="form-control" id="Cnotes" type="text">
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">{{ __("Close") }}</button>
                        <button type="button" class="btn btn-primary" onclick="Csetting()">{{ __("Save") }}</button>
                    </div>
                </div>
            </div>
        </div>
        <div class="tile">
            <div class="tile-body">
                <div class="table-responsive">
                    <table class="table table-hover table-bordered text-center" id="sampleTable">
                        <thead>
                            <tr>
                                <th style="width: 1%">#</th>
                                <th style="width: 42%">{{__("name")}}</th>
                                <th style="width: 42%">{{__("value")}}</th>
                                <th style="width: 10%">{{__("control")}}</th>
                            </tr>
                        </thead>
                        <tbody>
                            @php $sl=0; @endphp
                            @foreach($setting as $set)
                            <tr>
                                <td>{{++$sl}}</td>
                                <td id="name{{$set->id}}">{{ str_replace('_', ' ', ucfirst($set->name)) }}</td>
                                <td id="value{{$set->id}}">{{$set->value}}</td>
                                <td>
                                    <a href="#" class="control-link edit" data-toggle="modal" data-target="#editSettingModal{{$set->id}}">
                                        <i class="fas fa-edit" onclick="getData({{$set->id}})"></i>
                                    </a>
                                    <div class="modal fade" id="editSettingModal{{$set->id}}" tabindex="-1" role="dialog" aria-labelledby="editSettingModalLabel{{$set->id}}" aria-hidden="true">
                                        <div class="modal-dialog modal-dialog-centered" role="document">
                                            <div class="modal-content">
                                                <div class="modal-header">
                                                    <h5 class="modal-title" id="createRoleModalLabel">{{ __("edit-setting") }}</h5>
                                                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                                        <span aria-hidden="true">&times;</span>
                                                    </button>
                                                </div>
                                                <div class="modal-body">
                                                    <div class="col-lg-12">
                                                        <div class="form-group text-left">
                                                            <label for="Gname{{$set->id}}" class="control-label">{{__("name")}}</label>
                                                            <input class="form-control" id="Gname{{$set->id}}" type="text" placeholder="{{__("enter-english-role-name")}}" readonly >
                                                        </div>
                                                    </div>
                                                    <div class="col-lg-12">
                                                        <div class="form-group text-left">
                                                            <label for="Gvalue{{$set->id}}" class="control-label">{{__("value")}}</label>
                                                            <input class="form-control" id="Gvalue{{$set->id}}" type="text" placeholder="{{__("enter-english-role-name")}}">
                                                        </div>
                                                    </div>
                                                    <div class="col-lg-12">
                                                        <div class="form-group text-left">
                                                            <label for="Gnotes{{$set->id}}" class="control-label">{{__("notes")}}</label>
                                                            <input class="form-control" id="Gnotes{{$set->id}}" type="text">
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="modal-footer">
                                                    <button type="button" class="btn btn-secondary" data-dismiss="modal">{{ __("close") }}</button>
                                                    <button type="button" class="btn btn-primary" onclick="Usetting({{$set->id}}); $('#editSettingModal{{$set->id}}').modal('hide')">{{ __("save") }}</button>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    @if($set->name != 'Tax Value')
                                    <form action="{{route("admin.settings.destroy", $set->id)}}" method="post" id="delete{{$set->id}}" style="display: none" data-swal-title="{{__("delete-setting")}}" data-swal-text="{{__('are-you-sure-to-delete-this-setting?' )}}" data-yes="{{__('yes')}}" data-no="{{__('no')}}" data-success-msg="{{__('the-setting-has-been-deleted-successfully')}}"> @csrf @method("delete")</form>
                                    <span href="#" class="control-link remove form-confirm" data-form-id="#delete{{$set->id}}"><i class="far fa-trash-alt"></i></span>
                                    @endif
                                </td>
                            </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@section("scripts")
<script type="text/javascript" src="{{asset('assets/js/plugins/jquery.dataTables.min.js')}}"></script>
<script type="text/javascript" src="{{asset('assets/js/plugins/dataTables.bootstrap.min.js')}}"></script>
<script type="text/javascript">
    $('#sampleTable').DataTable();
</script>
<script type="text/javascript">
    var baseUrl = window.location.origin;

    function Csetting() {
        var name = $('#Cname').val();
        var value = $('#Cvalue').val();
        var notes = $('#Cnotes').val();
        $.ajax({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
            type: "post",
            url: baseUrl + "/en/ajax/settings/add-setting",
            dataType: 'json',
            data: {
                name: name,
                value: value,
                notes: notes,
            },
            success: function(response) {
                toastr.success(response.data);
                setTimeout(function() {
                    location.reload();
                }, 500);
            },
            error: function(xhr, error) {
                if (xhr.responseJSON.errors && xhr.responseJSON.errors.name && xhr.responseJSON.errors.name[0]) {
                    toastr.error(xhr.responseJSON.errors.name[0]);
                }
                if (xhr.responseJSON.errors && xhr.responseJSON.errors.value && xhr.responseJSON.errors.value[0]) {
                    toastr.error(xhr.responseJSON.errors.value[0]);
                }
            }
        });
    }

    function getData(id) {
        $('#Gname' + id).empty();
        $('#Gvalue' + id).empty();
        $('#Gnotes' + id).empty();
        $.ajax({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
            type: "GET",
            url: baseUrl + "/en/ajax/settings/get-setting-data/" + id,
            success: function(response) {
                $(document).ready(function() {
                    let name = response.data.name; // Assuming name is "Tax_number"
                    let formattedName = name.replace(/_/g, ' ');
                    formattedName = formattedName.charAt(0).toUpperCase() + formattedName.slice(1);
                    $('#Gname' + id).val(formattedName);
                    $('#Gvalue' + id).val(response.data.value);
                    if (response.data.notes !== null) {
                        $('#Gnotes' + id).val(response.data.notes);
                    }
                });
            }
        });
    }

    function Usetting($id) {
        var name = $('#Gname' + $id).val();
        var value = $('#Gvalue' + $id).val();
        var notes = $('#Gnotes' + $id).val();
        $.ajax({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
            type: "post",
            url: baseUrl + "/en/ajax/settings/update-setting/" + $id,
            dataType: 'json',
            data: {
                name: name,
                value: value,
                notes: notes,
            },
            success: function(response) {
                toastr.success('Setting Updated Successfully');
                $('#name' + $id).text(response.data.name);
                $('#value' + $id).text(response.data.value);
            },
            error: function(xhr, error) {
                if (xhr.responseJSON.errors && xhr.responseJSON.errors.name && xhr.responseJSON.errors.name[0]) {
                    toastr.error(xhr.responseJSON.errors.name[0]);
                }
                if (xhr.responseJSON.errors && xhr.responseJSON.errors.value && xhr.responseJSON.errors.value[0]) {
                    toastr.error(xhr.responseJSON.errors.value[0]);
                }
            }
        });
    }
</script>
@endsection