@extends('admin.layouts.master')

@section('page_title', __('admin.:name List', ['name' => __('admin.Media')]))

@section('page_heading', __('admin.:name List', ['name' => __('admin.Media')]))

@section('page_text', __('admin.Manage list of :name', ['name' => __('admin.Medias')]))

@section('page_breadcrumb_icon') <i class="ki-duotone ki-home fs-3 text-gray-500 me-n1"></i> @endsection

@section('page_breadcrumb_item', 'Media')

@section('page_breadcrumb_item2', 'Media List')

@section('page_button')

@can('additional-type-create')
<a href="{{ route('additional-type.create') }}" class="btn btn-success ">
    {{__('admin.Add New :name' , ['name' => __('admin.Medias')])}}
</a>
@endcan
@endsection

@section('content')
    <div class="row">
        <div class="col-12">
            <div class="card card-flush">
                <div class="card-body">
                    <div class="row ">
                        <div class="col-4">
                            <div class="d-flex flex-column mb-7 fv-row">
                                <div class="search-wrapper">
                                    <input class="form-control" id="search"  type="text"
                                        placeholder="Search...">
                                </div>
                            </div>
                        </div>
                        <div class="col-4">
                            <div class="d-flex flex-column mb-7 fv-row">
                                <select name="mediaType" id="mediaType" class="form-select" multiple data-control="select2"
                                onchange="setType() ; filter(mediaType , searchValue)">
                                <option selected disabled>@lang('admin.Filter by Media Group')</option>
                                @foreach ($mediaTypes as $type)
                                    <option value="{{ $type->id }}">{{ $type->name }}</option>
                                @endforeach
                            </select>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-12">
            <br>
            <div class="card card-flush">
                <div class="card-header">
                    <h1 class="page-heading d-flex flex-column justify-content-center text-gray-900 fw-bolder fs-1 lh-0">
                        Manage list of Media
                    </h1>
                </div>
                <div class="card-body" id="display_data">
                    @include('admin.media.paginated_data')
                </div>
            </div>
        </div>
    </div>
    <div id="main-template" class="d-none"></div>
@endsection
@section('js')
    <script src="{{ asset('dashboard/assets/scripts/media_list.js') }}"></script>
    <script type="text/javascript">
        let mediaType = null;
        let searchValue = null;

        function setType() {
            mediaType = document.getElementById("mediaType").value;
        }

        function reset() {
            let mediaType = null;
            let searchValue = null;
            filter(mediaType, searchValue);
        }

        function filter(mediaType, searchValue) {
            let _token = $("input[name=_token]").val();
            $.ajax({
                url: "{{ route('media.fetch') }}",
                method: "POST",
                data: {
                    _token: _token,
                    mediaType: mediaType,
                    searchValue: searchValue,
                },
                success: function(data) {
                    $('#display_data').html(data);
                }
            });
        }

        $(document).ready(function() {

            $('#search').keyup(function() {
                searchValue = this.value;
                filter(mediaType, searchValue)
            });

            $('.page-link').on('click', function(event) {
                event.preventDefault();
                let page = $(this).attr('href').split('page=')[1];
                fetch_data(page);
            });
        });

        function fetch_data(page) {
            let _token = $("input[name=_token]").val();
            $.ajax({
                url: "{{ route('media.fetch') }}",
                method: "POST",
                data: {
                    _token: _token,
                    page: page,
                    mediaType: mediaType,
                    searchValue: searchValue,
                },
                success: function(data) {
                    $('#display_data').html(data);
                }
            });
        }
    </script>

@endsection