@extends('layouts.app')

@section('breadcrumb', Breadcrumbs::render('event-list'))
@section('content')
    <section class="card">
        <div class="">
            <div id="append-filter-text"></div>
        </div>
        <div class="row p-2">
            <div class="col-md-12">
                <header class="card-header bold d-flex justify-content-between px-2 pt-2 pb-3">
                    <div>{{ trans('headings.events') }}</div>

                    <div class="col-md-6 text-right">
                        {{-- <button class="btn btn-sm btn-dark"><i class="fas fa-download"></i> Export</button>
              --}}



                        {{-- <button data-toggle="collapse" data-target="#collapse-table-filter-distributor-list" aria-expanded="false" aria-controls="collapse-table-filter-distributor-list" type="button" class="btn btn-sm btn-secondary mr-1"><i class="fa fa-filter"></i> Filter</button>
                --}}

                        <div class="row text-right">
                            <div class="col-md-12 text-right pt-1">
                                <a href="{{ route('event-create') }}" class="btn btn-sm btn-dark text-white"><i
                                        class="fa fa-plus"></i>{{ trans('headings.create-new') }}</a>
                            </div>

                            </form>
                        </div>

                    </div>

                </header>
            </div>



        </div>
        <div class="px-4 bg-light" id="filter-datatable-block__distributor-list">
            <div class="collapse mb-4 mt-4" id="collapse-table-filter-distributor-list">

                <div class="">
                    <div class="row">

                        <div class="col-md-3">
                            <div class="form-group">
                                <label>{{ __('fields.created_by') }}</label>
                                <select data-name="created by" class="form-control get-created-user"
                                    name="category_created_by">
                                    <option value="">- Created by -</option>
                                </select>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="form-group">
                                <label>{{ __('fields.created_at') }}</label>
                                <input data-name="created at" name="category_created_at" class="datepicker form-control"
                                    placeholder="Date" />
                            </div>
                        </div>
                    </div>
                </div>
                <div class="mt-2 text-right">
                    <button data-type="datatable" data-table="distributor-list"
                        class="btn btn-info btn-sm reset-datatable-filter">Clear</button>
                    <button data-type="datatable" data-table="distributor-list"
                        class="btn btn-dark btn-sm datatable-filter-find">Submit</button>
                </div>
            </div>
        </div>
        <x-Datatable id="tbl-events" headers="{{ trans('headings.title') }},{{ trans('headings.type') }},image"
            createUrl="event-create" filter="false" create="false" title="Events" checkbox="check">
        </x-Datatable>

    </section>
    <br>

    <div class="form-group col-md-3">
        <label>
            <h5>Bulk Action</h5>
        </label>
    </div>
    <div class="form-group col-md-3">
        <label>Choose Action</label>

        {!! Form::select(
            'submit_type',
            ['' => 'Type', '1' => 'Delete'],
            isset($result->submit_type) ? $result->submit_type : null,
            ['class' => ' form-control', 'required', 'id' => 'submit_type', 'data-name' => 'submit_type'],
        ) !!}
    </div>
    <div class="form-group col-md-3 text-right">
        <button id="multiple_delete" class="btn  btn-secondary"> Submit</button>
    </div>
    <div class="modal fade " id="myModal" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">

    </div>
    <script>
      function hideElements() {
        var currentUrl = window.location.href;
        if (currentUrl.includes("souqwaqif")) {
          let elements = document.querySelectorAll("[title='Addfiles']");
          if (elements.length) {
            for (let element of elements) {
              element.style.display = "none";
            }
          } else {
            setTimeout(hideElements, 100);
          }
        }
      }

      window.addEventListener('load', hideElements);
    </script>
@endsection
@section('script')
    <script src="{{ asset('modules/admin/events/datatable.js') }}"></script>

@endsection
@section('style')
    <style>
        .switch {
            position: relative;
            display: inline-block;
            width: 60px;
            height: 34px;
        }

        .switch input {
            opacity: 0;
            width: 0;
            height: 0;
        }

        .slider {
            position: absolute;
            cursor: pointer;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: #ccc;
            -webkit-transition: .4s;
            transition: .4s;
        }

        .slider:before {
            position: absolute;
            content: "";
            height: 26px;
            width: 26px;
            left: 4px;
            bottom: 4px;
            background-color: white;
            -webkit-transition: .4s;
            transition: .4s;
        }

        input:checked+.slider {
            background-color: #2196F3;
        }

        input:focus+.slider {
            box-shadow: 0 0 1px #2196F3;
        }

        input:checked+.slider:before {
            -webkit-transform: translateX(26px);
            -ms-transform: translateX(26px);
            transform: translateX(26px);
        }

        /* Rounded sliders */
        .slider.round {
            border-radius: 34px;
        }

        .slider.round:before {
            border-radius: 50%;
        }
    </style>
@endsection