@extends('admin.layouts.master')


@section('title')
    مميزات اضافيه
@endsection

@section('css')

<style>
    .input-group button {
        margin-right: 5px; /* يمكنك تعديل هذه القيمة حسب الفضاء الذي ترغب في إضافته بين العناصر */
    }

    .input-group input[type="text"] {
        width: 180px; /* يمكنك ضبط هذه القيمة وفقًا للعرض الذي تريده */
    }

</style>
@endsection


@section('content-header')
    <div class="content-header">
        <div class="container-fluid">
            <div class="row mb-2">
                <div class="col-sm-6">
                    <h1 class="m-0 text-dark">مميزات اضافيه</h1>
                </div><!-- /.col -->
                <div class="col-sm-6">
                    <ol class="breadcrumb float-sm-right">
                        <li class="breadcrumb-item active">مميزات اضافيه</li>
                    </ol>
                </div><!-- /.col -->
            </div><!-- /.row -->
        </div><!-- /.container-fluid -->
    </div>
@endsection


@section('content')
    <div class="container-fluid">
        <div class="row">
            <div class="col-12">
                <div class="card">
                    <!-- /.card-header -->
                    <div class="card-header">
                        <table id="example1" class="table table-bordered table-striped">
                            <thead>
                            <tr>
                                <th>#</th>
                                <th>اسم الميزه</th>
                                <th>العدد</th>
                                <th>السعر</th>
                                <th>العمليات</th>

                            </tr>
                            </thead>
                            <tbody>
                            @foreach($features as $feature)
                                <tr>
                                    <td>{{$loop->index+1}}</td>
                                    <td>{{$feature->name}}</td>
                                    <td>{{$feature->numbers}}</td>
                                    <td>{{$feature->price}}</td>
                                    <td>
                                        <button class="btn btn-danger btn-sm" data-toggle="modal" data-target="#deleted{{$feature->id}}"><i class="fa fa-trash"></i></button>
                                    </td>
                                </tr>

                                <!-- Modal -->
                                <div class="modal fade" id="deleted{{$feature->id}}" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
                                    <div class="modal-dialog">
                                        <div class="modal-content">
                                            <div class="modal-header">
                                                <h5 class="modal-title" id="exampleModalLabel">حذف الميزه الاضافيه</h5>
                                                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                                    <span aria-hidden="true">&times;</span>
                                                </button>
                                            </div>
                                            <div class="modal-body">
                                                <form action="{{route('admin.admin.deleted_features_subscription')}}" method="post">
                                                    @csrf

                                                    <input type="hidden" name="id" value="{{$feature->id}}">

                                                    <div class="row">
                                                        <div class="col">
                                                            <label for="" class="text-danger">هل أنت متأكد من عمليه حذف الميزه الاضافيه ؟</label>
                                                        </div>
                                                    </div>


                                                    <div class="modal-footer">
                                                        <button type="button" class="btn btn-secondary" data-dismiss="modal">اغلاق</button>
                                                        <button type="submit" class="btn btn-danger">حذف</button>
                                                    </div>
                                                </form>
                                            </div>

                                        </div>
                                    </div>
                                </div>
                            @endforeach

                            </tbody>

                        </table>


                    </div>
                    <br>
                    <div class="card-body">
                        @include('admin.messages')
                        <form action="{{route('admin.admin.features_subscription')}}" method="post">
                            @csrf

                            <input type="hidden" name="subscriber_id" value="{{$subscriber->id}}">

                            <div class="row">
                                <div class="container" style="margin-top: 17px;">
                                    <div class="row">
                                        <div class="col-2">
                                            <label style="margin-top: 26px;">الموظفين</label>
                                            <input type="hidden" name="name" value="الموظفين">
                                        </div>

                                        <div class="col-4">
                                            <label>العدد</label>
                                            <br>

                                            <div class="input-group">
                                                <button type="button" class="btn btn-sm btn-success sum_2" style="margin-left: 10px;">+</button>

                                                <input type="text" name="numbers" readonly class="text-center" min="0" max="50" value="0">

                                                <button type="button" class="btn btn-sm btn-danger dowun_2" style="margin-left: 10px;">-</button>
                                            </div>

                                        </div>

                                        <div class="col">
                                            <label>منتج</label>
                                            <select class="form-control" name="package_id_employee">
                                                <option value="" disabled selected>-- اختر من القائمه --</option>
                                                @foreach(getInformationData('Package') as $row)
                                                    <option value="{{$row->id}}">{{$row->name}}</option>
                                                @endforeach
                                            </select>
                                        </div>

                                        <div class="col">
                                            <label>مدة الاشتراك</label>
                                            <select class="form-control" name="subscriber_id_employee">
                                                <option value="" disabled selected>-- اختر من القائمه --</option>
                                                <option value="month">شهري</option>
                                            </select>
                                        </div>
                                    </div>
                                </div>
                                <hr>
                                <br>
                                <div class="container"  style="margin-top: 27px;margin-bottom: 54px;">
                                    <div class="row">
                                        <div class="col-2">
                                            <label style="margin-top: 26px;">القنوات</label>
                                            <input type="hidden" name="name_channels" value="القنوات">
                                        </div>

                                        <div class="col-4">
                                            <label>العدد</label>
                                            <br>

                                            <div class="input-group">
                                                <button type="button" class="btn btn-sm btn-success add_on" style="margin-left: 10px;">+</button>

                                                <input type="text" name="numbers_channels" readonly class="text-center" min="0" max="50" value="0">

                                                <button type="button" class="btn btn-sm btn-danger down_on" style="margin-left: 10px;">-</button>
                                            </div>

                                        </div>
                                        <br>
                                        <div class="col">
                                            <label>منتج</label>
                                           <select class="form-control" name="package_id_channels">
                                               <option value="" disabled selected>-- اختر من القائمه --</option>
                                               @foreach(getInformationData('Package') as $row)
                                                   <option value="{{$row->id}}">{{$row->name}}</option>
                                               @endforeach
                                           </select>
                                        </div>


                                        <div class="col">
                                            <label>مدة الاشتراك</label>
                                            <select class="form-control" name="subscriber_id_channels">
                                                <option value="" disabled selected>-- اختر من القائمه --</option>
                                                <option value="month">شهري</option>
                                            </select>
                                        </div>
                                    </div>
                                </div>

                                <hr>
                                <br>
                                <br>
                                <br>
                                <div class="container">
                                    <button class="btn btn-success"> حفظ</button>

                                </div>
                            </div>


                        </form>


                    </div>
                    <!-- /.card-body -->
                </div>
            </div>
        </div>
    </div>
@endsection


@section('js')
    <script>
        document.addEventListener("DOMContentLoaded", function() {
            var inputField = document.querySelector('input[name="numbers"]');
            var addButton = document.querySelector('.sum_2');
            var subtractButton = document.querySelector('.dowun_2');
            addButton.addEventListener('click', function() {
                var currentValue = parseInt(inputField.value);
                var maxValue = parseInt(inputField.getAttribute('max'));
                if (currentValue < maxValue) {
                    inputField.value = currentValue + 1;
                }
            });
            subtractButton.addEventListener('click', function() {
                var currentValue = parseInt(inputField.value);
                var minValue = parseInt(inputField.getAttribute('min'));
                if (currentValue > minValue) {
                    inputField.value = currentValue - 1;
                }
            });
        });
    </script>
    <script>
        document.addEventListener("DOMContentLoaded", function() {
            var inputField = document.querySelector('input[name="numbers_channels"]');
            var addButton = document.querySelector('.add_on');
            var subtractButton = document.querySelector('.down_on');
            addButton.addEventListener('click', function() {
                var currentValue = parseInt(inputField.value);
                var maxValue = parseInt(inputField.getAttribute('max'));
                if (currentValue < maxValue) {
                    inputField.value = currentValue + 1;
                }
            });
            subtractButton.addEventListener('click', function() {
                var currentValue = parseInt(inputField.value);
                var minValue = parseInt(inputField.getAttribute('min'));
                if (currentValue > minValue) {
                    inputField.value = currentValue - 1;
                }
            });
        });
    </script>

@endsection