@extends('backend.layouts.app')
@section('head')

    <link rel="stylesheet" href="{{asset('assets/css/datatable.css')}}">
@endsection
@section('content')

    <div class="aiz-titlebar text-left mt-2 mb-3">
        <div class="row align-items-center">
            <div class="col-md-6">
                <h1 class="h3">{{translate('All Ranks')}}</h1>
            </div>
            @can('add_staff')
                <div class="col-md-6 text-md-right">
                    <a class="btn btn-circle btn-primary"  data-bs-toggle="modal"
                       data-bs-target="#kt_modal_add">
                        <span>{{translate('Add New Rank')}}</span>
                    </a>
                </div>
            @endcan
        </div>
    </div>

    <div class="card">
        <div class="card-header">
            <h5 class="mb-0 py-2 d-flex align-items-center">{{translate('Ranks')}}</h5>
        </div>
        <div class="card-body">
            <table id="datatable" class="table table-striped w-100">
                <thead>
                <th style="text-align: center">
                    <input type="checkbox" id="select_all"/></th>
                <th>#</th>
                <th>{{translate('Civilization')}}</th>
                <th>{{translate('Rank')}}</th>
                <th>{{translate('Number of Arms')}}</th>
                <th>{{translate('Point')}}</th>
                <th>{{translate('Percentage')}}</th>
                <th>{{translate('from Price')}}</th>
                <th>{{translate('To Price')}}</th>


                <th >{{translate('action')}}</th>
                </thead>
                <tbody>

                </tbody>
            </table>
        </div>
    </div>

    <div class="modal fade" id="kt_modal_add" tabindex="-1">
        <!--begin::Modal dialog-->
        <div class="modal-dialog modal-dialog-centered mw-650px">
            <!--begin::Modal content-->
            <div class="modal-content">
                <!--begin::Modal header-->
                <div class="modal-header" id="kt_modal_add_user_header">
                    <!--begin::Modal title-->
                    <h2 class="fw-bold">{{translate('Add Rank')}} </h2>
                    <!--end::Modal title-->
                    <!--begin::Close-->
                    <div class="btn btn-icon btn-sm btn-active-light-primary ms-2" data-bs-dismiss="modal"
                         aria-label="Close">
                        <i class="ki-duotone ki-cross fs-1"><span class="path1"></span><span class="path2"></span></i>
                    </div>
                    <!--end::Close-->
                </div>
                <!--end::Modal header-->
                <!--begin::Modal body-->
                <form id="kt_modal_add_user_form" class="form" action="{{route('rank.store')}}" method="post"
                      enctype="multipart/form-data">
                    @csrf
                    <div class="modal-body px-5 my-7">
                        <!--begin::Form-->

                        <!--begin::Scroll-->
                        <div class="d-flex flex-column scroll-y px-5 px-lg-10"
                             id="kt_modal_add_user_scroll" data-kt-scroll="true"
                             data-kt-scroll-activate="true" data-kt-scroll-max-height="auto"
                             data-kt-scroll-dependencies="#kt_modal_add_user_header"
                             data-kt-scroll-wrappers="#kt_modal_add_user_scroll"
                             data-kt-scroll-offset="300px">

                            <div class="row">
                                <div class="col">
                                    <div class="fv-row mb-7">
                                        <!--begin::Label-->
                                        <label
                                            class="required fw-semibold fs-6 mb-2">{{translate('Civilization')}}</label>
                                        <!--end::Label-->
                                        <!--begin::Input-->
                                        <input type="text" name="civilization" required
                                               class="marketer-name form-control form-control-solid mb-3 mb-lg-0"
                                               placeholder="{{translate('Civilization')}}"/>
                                        <!--end::Input-->
                                    </div>
                                </div>
                                <div class="col">
                                    <div class="fv-row mb-7">
                                        <!--begin::Label-->
                                        <label
                                            class="required fw-semibold fs-6 mb-2">{{translate('Rank')}}</label>
                                        <!--end::Label-->
                                        <!--begin::Input-->
                                        <input  name="rank" required
                                                class="form-control form-control-solid mb-3 mb-lg-0"
                                                placeholder="{{translate('Rank')}}"/>
                                        <!--end::Input-->
                                    </div>
                                </div>
                            </div>

                            <div class="row mt-3">
                                <div class="col">
                                    <div class="fv-row mb-7">
                                        <!--begin::Label-->
                                        <label
                                            class="required fw-semibold fs-6 mb-2">{{translate('percentage')}} %</label>
                                        <!--end::Label-->
                                        <!--begin::Input-->
                                        <input type="number" name="percentage" required min="0" max="100"
                                               class="form-control form-control-solid mb-3 mb-lg-0"
                                               placeholder="{{translate('percentage')}}"/>
                                        <!--end::Input-->
                                    </div>
                                </div>
                                <div class="col">
                                    <div class="fv-row mb-7">
                                        <!--begin::Label-->
                                        <label
                                            class="required fw-semibold fs-6 mb-2">{{translate('Number of Arms')}}</label>
                                        <!--end::Label-->
                                        <input  name="number_of_arms" required min="0" type="number"
                                                class="form-control form-control-solid mb-3 mb-lg-0"
                                                placeholder="{{translate('Number of Arms')}}"/>
                                    </div>
                                </div>
                                <div class="col">
                                    <div class="fv-row mb-7">
                                        <!--begin::Label-->
                                        <label
                                            class="required fw-semibold fs-6 mb-2">{{translate('Point')}}</label>
                                        <!--end::Label-->
                                        <input  name="point" required min="0" type="number"
                                                class="form-control form-control-solid mb-3 mb-lg-0"
                                                placeholder="{{translate('Point')}}"/>
                                    </div>
                                </div>
                            </div>

                            <div class="row mt-3">
                                <div class="col">
                                    <div class="fv-row mb-7">
                                        <!--begin::Label-->
                                        <label
                                            class="required fw-semibold fs-6 mb-2">{{translate('from Price')}}</label>
                                        <!--end::Label-->
                                        <input  name="from_price" required min="0" @if(!$rank) value="0" readonly @endif type="number"
                                                class="form-control form-control-solid mb-3 mb-lg-0"
                                                placeholder="{{translate('from Price')}}"/>
                                    </div>
                                </div>
                                <div class="col">
                                    <div class="fv-row mb-7">
                                        <!--begin::Label-->
                                        <label
                                            class="required fw-semibold fs-6 mb-2">{{translate('to price')}}</label>
                                        <!--end::Label-->
                                        <input  name="to_price"  min="0" type="number"
                                                class="form-control form-control-solid mb-3 mb-lg-0"
                                                placeholder="{{translate('to price')}}"/>
                                    </div>
                                </div>
                            </div>


                        </div>
                    </div>
                    <!--end::Scroll-->
                    <!--begin::Actions-->
                    <div class="modal-footer">
                        <button type="button" class="btn btn-light" data-bs-dismiss="modal">{{translate('Close')}}</button>
                        <button type="submit" class="btn btn-primary">{{translate('Save')}}</button>
                    </div>
                    <!--end::Actions-->
                </form>
                <!--end::Form-->
            </div>
            <!--end::Modal body-->
        </div>
        <!--end::Modal content-->
    </div>


@endsection

@section('modal')
    @include('public_files.modals.delete_modal')
@endsection
@section('script')
    <script src="{{asset('assets/js/datatable.js')}}"></script>
    <script src="//cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    {!! $datatable_script !!}

    <script>
        $('.marketer-name').change(function () {
            // Get the input value
            var inputValue = $(this).val();
            inputValue = inputValue.toLowerCase();
            var filteredValue = inputValue.replace(/[^a-z0-9]/g, '');
            // Set the filtered value to the .marketer-url input
            $('.marketer-url').val(filteredValue);
        });

        $('.marketer-url').change(function () {
            // Get the input value
            var inputValue = $(this).val();
            // Convert input value to lowercase
            inputValue = inputValue.toLowerCase();
            // Filter out non-alphanumeric characters using regular expression
            var filteredValue = inputValue.replace(/[^a-z0-9]/g, '');
            // Set the filtered value to the .marketer-url input
            $(this).val(filteredValue);
        });
    </script>

@endsection