@extends('backend.layouts.app')
@section('content')
<div class="row">
    <div class="col-lg-12">
        <div class="card">
            <div class="card-header">
                Careers
            </div>
            <div class="card-body">
                <a href="{{route('careers.create')}}" class="btn btn-success mb-2" >
                    Add Career
                </a>
                <div class="row">
                    <div class="col-lg-4 d-flex mb-2">
                        <input type="text" name="search" id="search" placeholder="Search..." class="form-control">
                    </div>
                </div>
                <div class="table-responsive">
                    <table class="table table-bordered">
                        <thead class="thead-dark">
                            <tr>
                                <th>
                                    Position
                                </th>
                                <th>
                                    Type
                                </th>
                                <th>
                                    Job Description
                                </th>
                                <th>Doctor Recruitment</th>
                                <th>
                                    Action
                                </th>
                            </tr>
                        </thead>
                        <tbody>
                            @if (count($careers) != 0)
                            @foreach ($careers as $career)
                            <tr>
                                <td>
                                    {{$career->position}}
                                </td>
                                <td>
                                    {{$career->type}}
                                </td>
                                <td>
                                    {{$career->job_description}}
                                </td>
                                <td>
                                    {{$career->doctor}}
                                </td>
                                <td style="width: 100px;">
                                    <div class="modal fade" id="showCareer-{{$career->id}}" tabindex="-1" aria-labelledby="showCareer-{{$career->id}}Label"
                                        aria-hidden="true">
                                        <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable modal-xl">
                                            <div class="modal-content">
                                                <div class="modal-header border-bottom-0 px-5 py-4">
                                                    <img src="{{ asset('images/logo-modal.png') }}" class="img-fluid" alt="">
                                                    <button type="button" class="btn-close border-0 bg-white" data-dismiss="modal"
                                                        aria-label="Close"><i class="fa fa-x"></i></button>
                                                </div>
                                                <div class="modal-body px-5">
                                                    <div class="border-top mb-3"></div>
                                                    <div class="row gy-3">
                                                        <div class="col-lg-9">
                                                            <h5 class="font-weight-bold mb-4">{{$career->position}}</h5>

                                                            <div class="vstack gap-1 mb-4">
                                                                <div class="d-flex align-items-center gap-2 text-center">
                                                                    <i class="fa-solid fa-location-dot green" style="width: 25px;"></i>
                                                                    <span>{{$career->assign}}</span>
                                                                </div>
                                                                <div class="d-flex align-items-center gap-2 text-center">
                                                                    <i class="fa-solid fa-hourglass-start green" style="width: 25px;"></i>
                                                                    <span>{{$career->type}}</span>
                                                                </div>
                                                                <div class="d-flex align-items-center gap-2 text-center">
                                                                    <i class="fa-solid fa-wallet green" style="width: 25px;"></i>
                                                                    <span><b>{{$career->salary}}</b> / month</span>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>

                                                    <h6 class="font-weight-bold">Job Description</h6>

                                                    <p class="mb-5">
                                                        {{$career->job_description}}
                                                    </p>

                                                    <div class="row g-4">
                                                        <div class="col-lg-4">
                                                            <div class="mb-4">
                                                                <h6 class="font-weight-bold">Job Reponsibilities</h6>

                                                                <div class="flex-column gap-2">
                                                                    @foreach (json_decode($career->job_responsibilities) as $responsibility)
                                                                    <div class="d-flex align-items-center gap-3">
                                                                        <i class="fa-regular fa-circle-dot" style="width: 25px;"></i>
                                                                        <span>{{$responsibility}}</span>
                                                                    </div>
                                                                    @endforeach
                                                                </div>
                                                            </div>

                                                            <div>
                                                                <h6 class="font-weight-bold">Requirements</h6>

                                                                <div class="flex-column gap-2">
                                                                    @foreach (json_decode($career->requirements) as $requirement)
                                                                    <div class="d-flex align-items-center gap-3">
                                                                        <i class="fa fa-check-square" style="width: 25px;"></i>
                                                                        <span>{{$requirement}}</span>
                                                                    </div>
                                                                    @endforeach
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <div class="col-lg">
                                                            <div>
                                                                <h6 class="font-weight-bold">Additional Information</h6>

                                                                <div class="vstack gap-2">
                                                                    <div class="d-flex align-items-center gap-3">
                                                                        <i class="fa-solid fa-chart-column green text-center" style="width: 25px;"></i>
                                                                        <span>{{json_decode($career->additional_information)[0]}}</span>
                                                                    </div>
                                                                    <div class="d-flex align-items-center gap-3">
                                                                        <i class="fa-solid fa-briefcase green text-center" style="width: 25px;"></i>
                                                                        <span>{{json_decode($career->additional_information)[1]}}</span>
                                                                    </div>
                                                                    <div class="d-flex align-items-center gap-3">
                                                                        <i class="fa-solid fa-award green text-center" style="width: 25px;"></i>
                                                                        <span>{{json_decode($career->additional_information)[2]}}</span>
                                                                    </div>
                                                                    <div class="d-flex align-items-center gap-3">
                                                                        <i class="fa-solid fa-clipboard green text-center" style="width: 25px;"></i>
                                                                        <span>{{json_decode($career->additional_information)[3]}}</span>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="modal-footer border-top-0">
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="d-flex">
                                        <button type="button" class="btn btn-primary mb-2" data-toggle="modal" data-target="#showCareer-{{$career->id}}">
                                            <i class="fa fa-eye"></i>
                                        </button>
                                        <div class="mx-1"></div>
                                        <a href="{{route('careers.edit', $career->id)}}" class="btn btn-success mb-2">
                                            <i class="fa fa-edit"></i>
                                        </a>
                                        <div class="mx-1"></div>
                                        <form action="{{route('careers.destroy', $career->id)}}" method="post">
                                            @csrf
                                            @method("DELETE")
                                            <button type="submit" class="btn btn-danger">
                                                <i class="fa fa-trash"></i>
                                            </button>
                                        </form>
                                    </div>
                                </td>
                            </tr>
                            @endforeach
                            @else
                            <tr>
                                <td colspan="4" class="text-center">No data result</td>
                            </tr>
                            @endif
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection
@section('js')
    <script>
        $("#search").on("input", function() {
            $(this).quicksearch('table tbody tr');
        });
    </script>
@endsection