@extends('backend.layouts.app')
@section('content')
<div class="row">
    <div class="col-lg-6">
        <div class="card">
            <div class="card-header">
                <h4 class="card-title mb-0">{{ translate('Create Life Purchase Plans') }}</h4>
            </div><!-- end card header -->
            <div class="card-body">
                <form action="{{ route('life.store') }}" method="POST">
                    @csrf
                    <div class="row g-4 mb-3">
                        <div class="col-sm-3">
                            <label for="category" class="col-form-label">{{ translate('Life Category') }}</label>
                        </div>
                        <div class="col-sm-8">
                            <div>
                                <select name="category" id="category" class="form-control rns-selectpicker">
                                    <option value=""> Select .....</option>
                                    <option value="Life Normal">Life Normal</option>
                                    <option value="Life Special">Life Special</option>
                                    <option value="Hint Normal">Hint Normal</option>
                                    <option value="Hint Special">Hint Special</option>
                                </select>
                            </div>
                        </div>
                        <div class="col-sm-3">
                            <label for="number_of_life" class="col-form-label" id="number_label">
                                {{ translate('Number of') }} <span id="number_category_name"></span>
                            </label>
                        </div>
                        <div class="col-sm-8">
                            <div>
                                <input type="text" name="number_of_life" id="number_of_life" placeholder="{{ translate('Number of Life*') }}" class="form-control">
                            </div>
                        </div>
                        <div class="col-sm-3">
                            <label for="price" class="col-form-label" id="price_label">
                                {{ translate('Price of') }} <span id="price_category_name"></span>
                            </label>
                        </div>
                        <div class="col-sm-8">
                            <div>
                                <input type="text" name="price" id="price" placeholder="{{ translate('Price of Life*') }}" class="form-control">
                            </div>
                        </div>
                        <div class="col-sm-12 text-end">
                            <div>
                                <button type="submit" class="btn btn-outline-warning">{{ translate('Save') }}</button>
                            </div>
                        </div>
                    </div>
                </form>
            </div><!-- end card -->
        </div>
        <!-- end col -->
    </div>
</div>
<div class="row">
    <div class="col-lg-12">
        <div class="card">
            <div class="card-header">
                <div class="row">
                    <div class="col-9">
                        <h2 class="card-title">{{ translate('All Pricing') }}</h2>
                    </div>
                    <div class="col-3">
                        <input type="text" id="filter" class="form-control search" placeholder="{{ translate('Filter items') }}">
                    </div>
                </div>
            </div><!-- end card header -->
            <div class="card-body">
                <div id="customerList">
                    <div class="table-responsive table-card">
                        <table class="table align-middle table-nowrap" id="customerTable">
                            <thead class="table-light">
                                <tr>
                                    <th>{{ translate('Life Category') }}</th>
                                    <th>{{ translate('Number of Life') }}</th>
                                    <th>{{ translate('Price of Life') }}</th>
                                    <th>{{ translate('Status') }}</th>
                                    <th>{{ translate('Action') }}</th>
                                </tr>
                            </thead>
                            <tbody class="list form-check-all">
                                @foreach ($purchase as $key => $pur)
                                    <tr>
                                        <td>{{ $pur->category }}</td>
                                        <td>{{ $pur->number_of_life }}</td>
                                        <td>{{ $pur->price }}</td>
                                        <td>
                                            <div class="form-check form-switch form-switch-right form-switch-md">
                                                <input onchange="updateRtl(this)" class="form-check-input" type="checkbox" value="{{ $pur->id }}" @if($pur->status == 1) checked @endif>
                                            </div>
                                        </td>
                                        <td>
                                            <div class="d-flex gap-2">
                                                <div class="edit">
                                                    <a class="btn btn-soft-primary btn-icon btn-circle btn-sm edit-button" href="#" onclick="editModal({{$pur->id}})">
                                                        <i class="las la-edit"></i>
                                                    </a>
                                                </div>
                                                <div class="remove">
                                                    <button class="btn btn-soft-danger btn-icon btn-circle btn-sm confirm-delete" data-bs-toggle="modal" data-bs-target="#deleteRecordModal" data-href="{{ route('life.destroy', $pur->id) }}"><i class="las la-trash"></i></button>
                                                </div> 
                                            </div>
                                        </td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                    <div class="pagination">
                        {{ $purchase->links() }}
                    </div>
                </div>
            </div><!-- end card -->
        </div>
        <!-- end col -->
    </div>
    <!-- end col -->
</div>
<div class="modal fade" id="editModal" tabindex="-1" role="dialog" aria-labelledby="editModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content" id="modal-content">
            
        </div>
    </div>
</div>
@include('backend.modals.delete')
@endsection

@section('script')
<script>

    function editModal(id){
        $.post('{{ route('life.model') }}',{ _token:'{{ csrf_token() }}', id: id }, function(data){
            $('#editModal .modal-content').html(data);
            $('#editModal').modal('show', { backdrop: 'static' });
            RNS.plugins.bootstrapSelect();
            // console.log('test');

            const categoryDropdown = document.getElementById('category_edit');
            const numberCategorySpan = document.getElementById('number_category_name_edit');
            const priceCategorySpan = document.getElementById('price_category_name_edit');
            
            categoryDropdown.addEventListener('change', function () {
                const selectedCategory = '' + categoryDropdown.value + '';
                console.log('function');

                if (numberCategorySpan) {
                    numberCategorySpan.textContent = selectedCategory;
                    numberCategorySpan.style.display = 'inline';
                }

                if (priceCategorySpan) {
                    priceCategorySpan.textContent = selectedCategory;
                    priceCategorySpan.style.display = 'inline';
                }
            });
        });

    }

    //rtl status change
    function updateRtl(el) {
        var status = el.checked ? 1 : 0;
        $.post("{{ route('life.update_rtl_status') }}", {
            _token: "{{ csrf_token() }}",
            id: el.value,
            status: status
        }, function (data) {
            if (data == 0) {
                RNS.plugins.notify('success', '{{ __('Status updated successfully') }}');
            } else {
                RNS.plugins.notify('danger', '{{ __('Something went wrong') }}');
            }
        });
    }
    //FIlter SEarch
    $(document).ready(function() {
        $("#filter").on("keyup", function() {
            var value = $(this).val().toLowerCase();
            $("table tbody tr").filter(function() {
                $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1);
            });
        });
    });

    // Change CAtegory Name
    const categoryDropdown = document.getElementById('category');
    const numberCategorySpan = document.getElementById('number_category_name');
    const priceCategorySpan = document.getElementById('price_category_name');

    categoryDropdown.addEventListener('change', function () {
        const selectedCategory = '' + categoryDropdown.value + '';

        if (numberCategorySpan) {
            numberCategorySpan.textContent = selectedCategory;
            numberCategorySpan.style.display = 'inline';
        }

        if (priceCategorySpan) {
            priceCategorySpan.textContent = selectedCategory;
            priceCategorySpan.style.display = 'inline';
        }
    });
</script>
@endsection