@extends('layouts.app')
@section('css')
<link rel="stylesheet" href="{{secure_asset('assets/plugins/select2/css/select2.min.css') }}">
    <link rel="stylesheet" href="{{secure_asset('assets/plugins/select2-bootstrap4-theme/select2-bootstrap4.min.css') }}">
<style>
    .datepicker {
        position: absolute; /* Gunakan posisi absolut untuk mengontrol posisi pop-up */
        z-index: 9999; /* Gunakan z-index untuk memastikan pop-up di atas elemen lain */
        top: 50%; /* Mengatur jarak dari elemen input ke pop-up */
        left: 0; /* Mengatur posisi horizontal pop-up */
    }
</style>
@endsection
@section('content')
    <div class="container-fluid">
        <div class="row">
            @if ($message = Session::get('success'))
                <div class="col-md-12">
                    <div class="alert alert-success alert-dismissible">
                        <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
                        {{ $message }}
                    </div>
                </div>
            @endif
            @if ($message = Session::get('danger'))
                <div class="col-md-12">
                    <div class="alert alert-danger alert-dismissible">
                        <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
                        {{ $message }}
                    </div>
                </div>
            @endif
            <div class="col-sm-12">
                <div class="card">
                    <div class="card-header" style="background-color: #632b8d; color:white;">
                        <div style="display: flex; justify-content: space-between; align-items: center;">

                            <span id="card_title">
                                {{ __('Job List') }}
                            </span>

                        </div>
                    </div>
                    <div class="card-body">
                        <form method="GET" action="{{route('job.search')}}"  role="form" enctype="multipart/form-data">
                            @csrf
                            <div class="box box-info padding-1">
                                <div class="box-body row">
                                    <div class="form-group col-md-6">
                                        <label for="exampleInputEmail1">Dari Tanggal:</label>
                                        <div class="input-group date" data-provide="datepicker" data-date-format="dd-mm-yyyy">
                                            <input name="dateFrom" id="dateFrom" value="{{$dateFrom}}" type="text" class="form-control" placeholder="dd-mm-yyyy" autocomplete="off"/>

                                            <div class="input-group-addon">
                                                <div class="input-group-text" style="height:39px;"><i class="fa fa-calendar"></i></div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="form-group col-md-6">
                                        <label for="exampleInputEmail1">Sampai Tanggal: </label>
                                        <div class="input-group date" data-provide="datepicker" data-date-format="dd-mm-yyyy">
                                            <input name="dateTo" type="text" class="form-control" placeholder="dd-mm-yyyy" autocomplete="off" value="{{$dateTo}}"/>

                                            <div class="input-group-addon">
                                                <div class="input-group-text" style="height:39px;"><i class="fa fa-calendar"></i></div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="form-group col-md-6">
                                        <label>Customer </label>
                                        <select name="customer" id="" class="form-control select2bs4">
                                            <option value="" disabled selected>-- Pilih Customer--</option>
                                            @foreach($customer as $cs)
                                                <option value="{{$cs->customer_id}}"> {{$cs->nomor_member}} - {{$cs->nama_customer}} </option>
                                            @endforeach
                                        </select>
                                    </div>
                                    <div class="form-group col-md-6">
                                        <label>Tipe Proses </label>
                                        <select name="tipe" id="" class="form-control">
                                            <option value="" disabled selected>-- Pilih Salah Satu--</option>
                                            @foreach($tipe as $type)
                                                <option value="{{$type}}">{{$type}}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                    <div class="form-group col-md-6">
                                        <label>Status </label>
                                        <select name="status" id="" class="form-control">
                                            <option value="" disabled selected>-- Pilih Salah Satu--</option>
                                            @foreach($status as $stat => $st)
                                                <option value="{{$stat}}">{{$st}}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                                <div class="box-footer mt20">
                                    <button type="submit" name="action" value="search"
                                            class="btn btn-success">Cari</button>
                                </div>
                            </div>

                        </form>
                    </div>


                </div>
            </div>
        </div>
    </div>
@endsection
@section('js')
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.13.2/jquery-ui.min.js"></script>
<script src="{{ secure_asset('assets/plugins/select2/js/select2.full.min.js') }}"></script>
<script>

    $(function() {
      // Set the datepicker to appear bottom
      $('#dateFrom').datepicker('orient', 'bottom');
        $('#dateFrom').datepicker('position', {
        top: '50px',
        left: '100px',
        });
        $('#dateFrom').datepicker('show');
    });
    $(document).on('click', function(event) {
    if ($(event.target).closest('#dateFrom').length === 0) {
      $('#dateFrom').datepicker('hide');
    }
  });

</script>
<script>
    $(function () {
            //Initialize Select2 Elements
        $('.select2bs4').select2({
            theme: 'bootstrap4'
            })
        })
</script>
@endsection