@extends('panel.layouts.master')
@section('title', 'کارتچین')
@section('breadcrumb', 'کارتچین')

@section('content')
    @include('panel.layouts.sidebar')
    @include('panel.layouts.header')
    <style>
        .table-bordered td,
        .table-bordered th {
            text-align: center;
        }
    </style>



{{-- Import Modal --}}
<div class="modal fade" id="import" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">ایمپورت فایل اکسل</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="بستن">
                    <i class="fa-solid fa-xmark"></i>
                </button>
            </div>
            <div class="modal-body">
                <h6 class="text-danger">توجه! فایل ورودی باید از اکسل ورژن 2016 به بالا باشد</h6>
                <form action="{{ route('fields.import') }}" method="POST" id="submit-modal" enctype="multipart/form-data">
                    @csrf
                    <div class="form-group">
                        <label for="file">فایل اکسل</label>
                        <input type="file" name="file" class="form-control" id="file">
                    </div>
                </form>
                {{-- <div class="mt-3">
                    <span class="d-block mb-2">نمونه فایل اکسل:</span>
                    <img src="{{ asset('assets/images/excel-sample.png') }}" style="width: 18rem">
                </div> --}}
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">بستن</button>
                <button type="submit" class="btn btn-primary" form="submit-modal">تایید</button>
            </div>
        </div>
    </div>
</div>
{{-- End Import Modal --}}


    <section class="creat-shop">
        <main class="main-content">
            <div class="card">

                <div class="card-body">
                    <div class="row">
                        <div class="col-12 mt-3">
                            <form action="{{ route('selected-fields.search', $user->id) }}" method="post">
                                @csrf
                                <div class="row">
                                    <div class="col-xl-3 col-lg-3 col-md-4">
                                        <div class="form-group">
                                            <input type="text" value="{{ $requestAll['code'] ?? '' }}" name="code" class="form-control" placeholder="کد رشته">
                                        </div>
                                    </div>
                                    <div class="col-xl-3 col-lg-3 col-md-4">
                                        <div class="form-group">
                                            <input type="text" value="{{ $requestAll['name'] ?? '' }}" name="name" class="form-control" placeholder="نام رشته">
                                        </div>
                                    </div>
                                    <div class="col-xl-3 col-lg-3 col-md-4">
                                        <div class="form-group">
                                            <select name="gender" class="form-control" >
                                                <option value="all" {{ isset($requestAll) && $requestAll['gender'] == 'all' ? 'selected' : '' }}>همه (جنسیت)</option>
                                                <option value="مرد" {{ isset($requestAll) && $requestAll['gender'] == 'مرد' ? 'selected' : '' }}>مرد</option>
                                                <option value="زن" {{ isset($requestAll) && $requestAll['gender'] == 'زن' ? 'selected' : '' }}>زن</option>
                                            </select>
                                        </div>
                                    </div>

                                    <div class="col-xl-3 col-lg-3 col-md-4">
                                        <div class="form-group">
                                            <select name="province" class="form-control">
                                                <option {{ isset($requestAll) && $requestAll['province'] == 'all' ? 'selected' : '' }} value="all">همه (استان)</option>
                                                @foreach($provinces as $value)
                                                    <option {{ isset($requestAll) && $requestAll['province'] == $value ? 'selected' : '' }} value="{{ $value }}">{{ $value }}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-xl-3 col-lg-3 col-md-4">
                                        <div class="form-group">
                                            <select name="groupName" class="form-control">
                                                <option {{ isset($requestAll) && $requestAll['groupName'] == 'all' ? 'selected' : '' }} value="all">همه (گروه آزمایشی)</option>
                                                @foreach($groups as $value)
                                                    <option {{ isset($requestAll) && $requestAll['groupName'] == $value ? 'selected' : '' }} value="{{ $value }}">{{ $value }}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-xl-3 col-lg-3 col-md-4">
                                        <div class="form-group">
                                            <button class="btn btn-primary">جستجو</button>
                                        </div>
                                    </div>
                                </div>
                            </form>
                        </div>
                    <a href="{{route('cartchin',$user->id)}}"><button class="btn btn-square btn-outline-primary m-2"> <i class="fa fa-file mr-2"></i>کارتچین</button></a>

                        <div class="table-responsive">
                            <table class="table table-striped table-bordered" >
                                <thead>
                                    <tr>
                                        <th>انتخاب</th>
                                        <th>ردیف</th>
                                        <th>کد رشته</th>
                                        <th>اسم رشته</th>
                                        <th>جنسیت</th>
                                        <th>ظرفیت</th>
                                        <th>استان</th>
                                        <th>گروه آزمایشی</th>
                                        <th>توضیحات</th>
                                        <th>محل خدمت</th>

                                    </tr>
                                </thead>
                                <tbody>
                                    @php
                                    $i = 1;
                                    @endphp
                                    @foreach ($fields as $key => $item)
                                        <tr>
                                            <td>
                                                <input type="checkbox" autocomplete="off" name="selected_fields[]" value="{{ $item->id }}" {{ in_array($item->id, $fields_id) ? 'checked' : '' }}>
                                            </td>
                                            <td>{{ ++$key }}</td>
                                            <td>{{ $item->code }}</td>
                                            <td>{{ $item->name }}</td>
                                            <td>{{ $item->gender }} </td>
                                            <td>{{ $item->capacity }} </td>
                                            <td>{{ $item->province }} </td>
                                            <td>{{ $item->groupName }}</td>
                                            <td>{{ $item->desc }}</td>
                                            <td>{{ $item->service_location }}</td>
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    </div>
                    <div>{{ $fields->appends(['code' => request()->code, 'name' => request()->name, 'gender' => request()->gender, 'province' => request()->province, 'groupName' => request()->groupName, ])->links() }}</div>

                </div>
        </main>
    </section>
@endsection
@section('script')
<script>
    $('#btn_import').on('click',function(){
            $('#import').modal('show')
        })

        // selected fields
        $('input[name="selected_fields[]"]').on('change keyup', function (e) {
                var self = this;
                let fieldId = this.value;
                $.ajax({
                    type: 'post',
                    url: "{{ route('sync-fields') }}",
                    data: {
                        'culture_id': {{ $user->id }},
                        'field_id': fieldId
                    },
                    success: function (res) {
                        if(res.error){
                            Swal.fire({
                                title: res.data,
                                icon: 'error',
                                showConfirmButton: false,
                                toast: true,
                                timer: 5000,
                                timerProgressBar: true,
                                position: 'top-start',
                                customClass: {
                                    popup: 'my-toast',
                                    icon: 'icon-center',
                                    title: 'left-gap',
                                    content: 'left-gap',
                                }
                            })
                            $(self).prop('checked',false)
                        }
                    }
                })
            })
</script>
@endsection