@extends('layouts.master')
@section('title', 'Careers')
@section('pagetitle', 'List of Careers')
@section('content')
    <div class="main">
        @include('layouts.partials.messages')
        <div class="header mb-30">
            <h1 class="hd">Careers</h1>
            <div class="header">
                <button
                    id="addCareerBtn" data-modal-target="#add-career" class="start">
                    <span class="material-icons-sharp">add</span>Add new Career
                </button>
                <button
                    id="syncOnetBtn" class="cancel">
                    <span class="material-icons-sharp">sync</span> Sync Onet
                </button>
                <a href="{{route('super.careers.status','deactivate')}}">
                    <button
                         class="cancel">
                        <span class="material-icons-sharp">cancel</span> Deactivate all
                    </button>
                </a>
                <a href="{{route('super.careers.status','activate')}}">
                    <button
                         class="cancel">
                        <span class="material-icons-sharp">check</span> Activate all
                    </button>
                </a>
            </div>
        </div>

        <div class="subHeading mb-30">
            <div class="tabletabs">
                <div class="tabletab @if(request()->has('active_careers')) l-active @endif" data-targetname="active">
                    <h4 class="tabletab-text">Active</h4>
                    <span class="tabletab-number number">{{ $activeCareersCnt }}</span>
                </div>
                <div class="tabletab @if(request()->has('inactive_careers')) l-active @endif" data-targetname="inactive">
                    <h4 class="tabletab-text">Inactive</h4>
                    <span class="number">{{ $inactiveCareersCnt }}</span>
                </div>
                <div class="tabletab @if(request()->has('all_careers')) l-active @endif" data-targetname="all">
                    <h4 class="tabletab-text t-active">All Careers</h4>
                    <span class="tabletab-number number active">{{ $allCareersCnt }}</span>
                </div>
            </div>


            <div class="rightsub">
                <div class="search">

{{--                    <form action="" method="GET" id="careers-form" class="border-bottom-light mb-3">--}}
{{--                        <input--}}
{{--                            type="search"--}}
{{--                            placeholder=" "--}}
{{--                            class="search_input"--}}
{{--                            name="search"--}}
{{--                            value="{{ Request::get('search') }}"--}}
{{--                            id=""--}}
{{--                        />--}}
{{--                        <label for="search" class="search_label">Search</label>--}}
{{--                    </form>--}}
                </div>
                <div class="ml-10">
{{--                    <button type="submit" class="more">Import List</button>--}}
{{--                    <button type="submit" class="more">Export List</button>--}}
                </div>
            </div>
        </div>
        <div id="active" class="table-data careers " style="display: @if(request()->has('active_careers')) block  @else none @endif">
            <table>
                <thead>
                <tr>
                    <th>Title</th>
                    <th>Date added</th>
                    <th class="width-l">Date updated</th>
                </tr>
                </thead>
                <tbody>
                @foreach($activecareers as $career)
                    <tr {{ (data_get($career, 'status')) ? "" :  "style=background-color:#e9ecef"  }}>
                        <td style="max-width: 155px;">{{ !empty(data_get($career, 'title')) ?  data_get($career, 'title')  : "-" }}</td>
                        <td>{{ !empty(data_get($career, 'onenet_code')) ?  data_get($career, 'onenet_code')  : "-" }}</td>
                        <td>{{ !empty(show_date($career->created_at)) ?  show_date($career->created_at)  : "-" }}</td>
                        <td>{{ !empty(show_date($career->updated_at)) ?  show_date($career->updated_at)  : "-" }}</td>
                        <td class="text-center align-middle">

                            <button href="{{--{{ route('super.careers.edit', $career) }}--}}"
                                    id="editCareerBtn"
                                    class="btn btn-icon edit" data-modal-target="#edit-career"
                                    data-id="{{ !empty(data_get($career, 'id')) ?  data_get($career, 'id')  : "-" }}"
                                    data-status="{{ !empty(data_get($career, 'status')) ?  data_get($career, 'status')  : 0 }}"
                                    data-title="{{ !empty(data_get($career, 'title')) ?  data_get($career, 'title')  : "-" }}"
                                    data-desc="{{ !empty(data_get($career, 'description')) ?  data_get($career, 'description')  : "-" }}"
                                    title="@lang('Edit User')"
                                    data-toggle="tooltip" data-placement="top">
                                <i class="fas fa-edit"></i>
                            </button>

                            <a href="{{ route('super.careers.destroy', $career) }}"
                               class="btn btn-icon js-remove-list-item"
                               title="@lang('Delete Career')"
                               data-toggle="tooltip"
                               data-placement="top"
                               data-method="DELETE"
                               data-url = "{{ route('super.careers.destroy', $career) }}"
                               data-confirm-title="@lang('Please Confirm')"
                               data-confirm-text="@lang('Are you sure that you want to delete this career?')"
                               data-confirm-delete="@lang('Yes, delete!')">
                                <i class="fas fa-trash"></i>
                            </a>
                        </td>
                    </tr>
                @endforeach
                </tbody>
            </table>
            {!! $activecareers->render() !!}
        </div>
        <div id="inactive" class="table-data careers none" style="display: @if(request()->has('inactive_careers')) block  @else none @endif">
            <table>
                <thead>
                <tr>
                    <th>Title</th>
                    <th>Date added</th>
                    <th class="width-l">Date updated</th>
                </tr>
                </thead>
                <tbody>
                @foreach($inactivecareers as $career)
                    <tr {{ (data_get($career, 'status')) ? "" :  "style=background-color:#e9ecef"  }}>
                        <td style="max-width: 155px;">{{ !empty(data_get($career, 'title')) ?  data_get($career, 'title')  : "-" }}</td>
                        <td>{{ !empty(data_get($career, 'onenet_code')) ?  data_get($career, 'onenet_code')  : "-" }}</td>
                        <td>{{ !empty(show_date($career->created_at)) ?  show_date($career->created_at)  : "-" }}</td>
                        <td>{{ !empty(show_date($career->updated_at)) ?  show_date($career->updated_at)  : "-" }}</td>
                        <td class="text-center align-middle">

                            <button
                                id="editCareerBtn"
                                class="btn btn-icon edit" data-modal-target="#edit-career"
                                data-id="{{ !empty(data_get($career, 'id')) ?  data_get($career, 'id')  : "-" }}"
                                data-status="{{ !empty(data_get($career, 'status')) ?  data_get($career, 'status')  : 0 }}"
                                data-title="{{ !empty(data_get($career, 'title')) ?  data_get($career, 'title')  : "-" }}"
                                data-desc="{{ !empty(data_get($career, 'description')) ?  data_get($career, 'description')  : "-" }}"
                                title="@lang('Edit User')"
                                data-toggle="tooltip" data-placement="top">
                                <i class="fas fa-edit"></i>
                            </button>

                            <a href="{{ route('super.careers.destroy', $career) }}"
                               class="btn btn-icon js-remove-list-item"
                               title="@lang('Delete Career')"
                               data-toggle="tooltip"
                               data-placement="top"
                               data-method="DELETE"
                               data-url = "{{ route('super.careers.destroy', $career) }}"
                               data-confirm-title="@lang('Please Confirm')"
                               data-confirm-text="@lang('Are you sure that you want to delete this career?')"
                               data-confirm-delete="@lang('Yes, delete!')">
                                <i class="fas fa-trash"></i>
                            </a>
                        </td>
                    </tr>
                @endforeach


                </tbody>
            </table>
            {!! $inactivecareers->render() !!}
        </div>
        <div id="all" class="table-data careers none" style="display: @if(request()->has('all_careers')) block  @else none @endif">
            <table>
                <thead>
                <tr>
                    <th>Title</th>
                    <th>Onenet Code</th>
                    <th>Status</th>
                    <th>Date added</th>
                    <th class="width-l">Date updated</th>
                    <th class="width-l">Action</th>
                </tr>
                </thead>
                <tbody>
                @foreach($careers as $career)
                    <tr {{ (data_get($career, 'status')) ? "" :  "style=background-color:#e9ecef"  }}  >
                        <td style="max-width: 155px;">{{ !empty(data_get($career, 'title')) ?  data_get($career, 'title')  : "-" }}</td>
                        <td>{{ !empty(data_get($career, 'onenet_code')) ?  data_get($career, 'onenet_code')  : "-" }}</td>
                        <td>{{ !empty(data_get($career, 'status')) ?  "Active"  : "Inactive" }}</td>
                        <td>{{ !empty(show_date($career->created_at)) ?  show_date($career->created_at)  : "-" }}</td>
                        <td>{{ !empty(show_date($career->updated_at)) ?  show_date($career->updated_at)  : "-" }}</td>
                        <td class="text-center align-middle">
                            <button
                                id="editCareerBtn"
                                class="btn btn-icon edit" data-modal-target="#edit-career"
                                data-id="{{ !empty(data_get($career, 'id')) ?  data_get($career, 'id')  : "-" }}"
                                data-status="{{ !empty(data_get($career, 'status')) ?  data_get($career, 'status')  : 0 }}"
                                data-title="{{ !empty(data_get($career, 'title')) ?  data_get($career, 'title')  : "-" }}"
                                data-desc="{{ !empty(data_get($career, 'description')) ?  data_get($career, 'description')  : "-" }}"
                                title="@lang('Edit User')"
                                data-toggle="tooltip" data-placement="top">
                                <i class="fas fa-edit"></i>
                            </button>

                            <a href="{{ route('super.careers.destroy', $career) }}"
                               class="btn btn-icon js-remove-list-item"
                               title="@lang('Delete Career')"
                               data-toggle="tooltip"
                               data-placement="top"
                               data-method="DELETE"
                               data-url = "{{ route('super.careers.destroy', $career) }}"
                               data-confirm-title="@lang('Please Confirm')"
                               data-confirm-text="@lang('Are you sure that you want to delete this career?')"
                               data-confirm-delete="@lang('Yes, delete!')">
                                <i class="fas fa-trash"></i>
                            </a>
                        </td>
                    </tr>
                @endforeach
                </tbody>
            </table>

            {!! $careers->render() !!}
        </div>

    </div>

    <div id="add-career" class="addnew-modal">
        <div class="cl">
            <div id="close-school-modal" class="x-cancel close-modal-btn">
                <span class="material-icons-sharp">close</span>
                <h5 style="display: inline">Close</h5>
            </div>

            <h1>Add New Career</h1>
        </div>
        <div class="input mt-30">
            @include('layouts.partials.messages')
            <form action="{{ route('super.careers.addnew') }}" class="form-careers-add js-ajax-form"
                  id="form-careers-add" method="POST">
                @csrf
                <div class="form-result"></div>
                <div class="career-details">
                    <div class="row">
                        <div class="intro">
                            <input type="text" hidden name="id"/>
                        </div>
                    </div>

                    <div class="row">
                        <div class="intro">
                            <input
                                type="text"
                                class="intro_input"
                                placeholder=" "
                                required
                                name="title"
                                id="careerTitle_add"
                            />
                            <label for="name" class="intro_label">Career Title*</label>
                        </div>
                    </div>
                    <div class="row">
                        <div class="intro">
                             <textarea name="description"
                                       id="careerDescription_add"
                                       placeholder=" "
                                       required
                                       rows="3"
                                       class="intro_input career-description"></textarea>
                            <label for="name" class="intro_label">Career Description*</label>
                        </div>
                    </div>
                    <div class="row">
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" name="status" value="1"
                                   id="careerStatus_add">
                            <label class="form-check-label" for="careerStatus_edit">Status</label>
                        </div>
                    </div>
                    <div class="row">
                        <button type="submit" form="form-careers-add" class="formsubmitbtn editbtn">Add Career</button>
                        <button type="reset" form="form-careers-add" class="formsubmitbtn more">Clear</button>
                    </div>
                </div>

            </form>
        </div>
    </div>

    <div id="edit-career" class="addnew-modal">
        <div class="cl">
            <div id="close-school-modal" class="x-cancel close-modal-btn">
                <span class="material-icons-sharp">close</span>
                <h5 style="display: inline">Close</h5>
            </div>

            <h1>Edit Career</h1>
        </div>
        <div class="input mt-30">
            @include('layouts.partials.messages')
            <form action="{{ route('super.careers.update') }}" class="form form-careers-edit js-ajax-form"
                  id="form-careers-edit" method="PUT">
                @csrf
                <div class="form-result"></div>
                <div class="career-details">
                    <div class="row">
                        <div class="intro">
                            <input type="text" hidden name="id" id="careerId_edit"/>
                        </div>
                    </div>

                    <div class="row">
                        <div class="intro">
                            <input
                                type="text"
                                class="intro_input"
                                placeholder=" "
                                required
                                name="title"
                                id="careerTitle_edit"
                            />
                            <label for="name" class="intro_label">Career Title*</label>
                        </div>
                    </div>
                    <div class="row">
                        <div class="intro">
                             <textarea name="description"
                                       id="careerDescription_edit"
                                       placeholder=" "
                                       required
                                       rows="3"
                                       class="intro_input career-description"></textarea>
                            <label for="name" class="intro_label">Career Description*</label>
                        </div>
                    </div>
                    <div class="row">
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" name="status" value="1"
                                   id="careerStatus_edit">
                            <label class="form-check-label" for="careerStatus_edit">Status</label>
                        </div>
                    </div>
                    <div class="row submit-form-btns">
                        <button type="submit" form="form-careers-edit" class="formsubmitbtn editbtn">Edit Career
                        </button>
                        <button type="reset" form="form-careers-edit" class="formsubmitbtn more">Clear</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
@endsection

@section('scripts')
    <script>
        let syncOnenetUrl = "{{ route("super.sync.onenet") }}";
        $("#status").change(function () {
            $("#users-form").submit();
        });
    </script>
@stop