@extends('portal.main.layout')

@section('title','Staff')

@section('breadcrumb')

    <ol class="breadcrumb bg-transparent mb-0 pb-0 pt-1 px-0 me-sm-6 me-5">
        <li class="breadcrumb-item text-sm text-white">
            <a class="text-white" href="{{ route('dashboard.index') }}">
                <i class="fas fa-home"></i>
            </a>
        </li>
        <li class="breadcrumb-item text-sm text-white active" aria-current="page">@yield('title')</li>
    </ol>

@endsection

@section('styles')

    <link rel="stylesheet" type="text/css" href="{{ asset('countrycodes/intlTelInput.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ asset('countrycodes/dailercode.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ asset('searchselect/select2.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ asset('assets/js/datatable/datatables.min.css') }}">

@endsection

@section('content')

    <style>
        .pac-container {
            z-index: 10000 !important;
        }

        #department{
            border-top-style: hidden;
            border-right-style: hidden;
            border-left-style: hidden;
            border-bottom-style: hidden;
        }

    </style>

    <div class="row mt-4" id="staff-page" data-loadingurl="{{ route('setting.staff.list') }}"
         data-storeurl="{{ route('setting.staff.store') }}"
         data-editurl="{{ route('setting.staff.edit') }}"
         data-deleteurl="{{ route('setting.staff.delete') }}"
         data-suspend_or_activateurl="{{ route('setting.staff.suspend_or_activate') }}"
         data-token="{{ csrf_token() }}">
        <div class="col-12">
            <div class="card">

                <div class="card-header">
                    <div class="row">

                        <div class="col-2">
                            <button type="button" class="btn btn-icon btn-3 btn-primary" data-bs-toggle="modal" data-bs-target="#modal-form">
                                <span class="btn-inner--icon"><i class="ni ni-fat-add"></i></span>
                                <span class="btn-inner--text">Create</span>
                            </button>
                        </div>

                    </div>
                </div>
                <div class="table-responsive" style="min-height: 40vh;margin-top: -20px">

                    <table class="table table-flush" id="dt-staff">
                        <thead class="thead-light">
                        <tr>
                            <th style="color:#000;width: 5px" class="text-sm">No</th>
                            <th style="color:#000;" class="text-sm">Name</th>
                            <th style="color:#000;" class="text-sm">Email</th>
                            <th style="color:#000;" class="text-sm">Phone No.</th>
                            <th style="color:#000;" class="text-sm">Staff No.</th>
                            <th style="color:#000;" class="text-sm">Department</th>
                            <th style="color:#000;" class="text-sm">System Role</th>
                            <th style="color:#000;" class="text-sm">Added On</th>
                            <th style="color:#000;" class="text-sm">Suspended On</th>
                            <th></th>
                        </tr>
                        </thead>
                        <tbody>

                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="modal-form" tabindex="-1" role="dialog" aria-labelledby="modal-form" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-md" role="document">
            <div class="modal-content">
                <div class="modal-body p-0">
                    <div class="card card-plain">
                        <div class="card-header pb-0 text-left">
                            <h3 class="font-weight-bolder text-success text-gradient" id="addeditmodaltitle">Create</h3>
                        </div>
                        <div class="card-body" style="margin-top: -45px">
                            <form>

                                @include('portal.main.error')

                                @include('portal.main.loadinginmodal')

                                <div class="row text-start">
                                    <div class="col-sm-4">
                                        <div class="avatar avatar-xxl position-relative" style="margin-top:35px!important;">
                                            <img id="staff_picture" src="{{ asset('assets/img/noimage.jpg') }}" class="border-radius-md" alt="team-2">
                                            <a href="javascript:;" onclick="openFileOption()" class="btn btn-sm btn-icon-only bg-gradient-light position-absolute bottom-0 end-0 mb-n2 me-n2">
                                                <i class="fa fa-pen top-0" data-bs-toggle="tooltip" data-bs-placement="top" title="" aria-hidden="true" data-bs-original-title="Edit Image" aria-label="Edit Image"></i><span class="sr-only">Edit Image</span>
                                                <input type="file" onchange="readURL(this);" id="upload" style="display:none">
                                            </a>
                                        </div>
                                    </div>
                                    <input type="hidden" id="staff_id">
                                    <div class="col-sm-8">
                                        <h6>Name</h6>
                                        <div class="input-group mb-3">
                                            <input id="name" type="text" class="form-control" placeholder="Name">
                                        </div>
                                        <h6>Email</h6>
                                        <div class="input-group mb-3">
                                            <input id="email" type="email" class="form-control" placeholder="Email">
                                        </div>
                                    </div>
                                </div>

                                <div class="col-12">
                                    <div class="row text-start">
                                        <div class="col-12 col-md-12 ms-auto mt-1">
                                            <h6>Job Title</h6>
                                            <input id="designation" class="form-control" type="text" placeholder="" />
                                        </div>
                                    </div>
                                </div>

                                <div class="col-12">
                                    <div class="row text-start">
                                        <div class="col-12 col-md-6 ms-auto mt-3">
                                            <h6>Staff No</h6>
                                            <input id="staff_number" class="form-control" type="text" placeholder="" />
                                        </div>
                                        <div class="col-12 col-md-6 ms-auto mt-3">
                                            <h6>Department</h6>
                                            <div style="margin-top: 14px!important;">
                                                <select class="select2 form-control" style="width: 100%" id="department">

                                                </select>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div class="col-12">
                                    <div class="row text-start">
                                        <div class="col-12 col-md-6 ms-auto mt-3">
                                            <h6>Phone</h6>
                                            <input id="phone_number" class="form-control" type="text" placeholder="" />
                                        </div>
                                        <div class="col-12 col-md-6 ms-auto mt-3">
                                            <h6>Role</h6>
                                            <div style="margin-top: 14px!important;">
                                                <select class="select2 form-control" style="width: 100%" id="role">

                                                </select>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div class="text-center">
                                    <button id="savebutton" onclick="saveStaff()" type="button" class="btn btn-round bg-gradient-success btn-lg w-100 mt-4 mb-0">Save</button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

@endsection

@section('scripts')

    <script src="{{ asset('assets/js/datatable/datatables.min.js') }}" type="text/javascript"></script>
    <script src="{{ asset('assets/js/datatable/datatable-basic.min.js') }}" type="text/javascript"></script>
    <script src="{{ asset('countrycodes/intlTelInput.js') }}" type="text/javascript"></script>
    <script src="{{ asset('searchselect/select2.full.js') }}" type="text/javascript"></script>
    <script src="{{ asset('searchselect/form-select2.min.js') }}" type="text/javascript"></script>
    <script src="{{ asset('assets/js/plugins/sweetalert2.all.js') }}" type="text/javascript"></script>
    <script src="{{ asset('assets/js/plugins/sweet-alerts.min.js') }}" type="text/javascript"></script>
    <script src="{{ asset('js/core/staff.js') }}" type="text/javascript"></script>

    <script>
        // jQuery
        $("#phone_number").intlTelInput({
            onlyCountries: ["ke","ug","tz"],
        });
    </script>

@endsection