@extends('admin.layout.app')
@section('title','Upload Job Card Image')
@push('headerscript')
    <link href="{{asset('theme/plugins/bootstrap-sweetalert/sweet-alert.css')}}" rel="stylesheet" type="text/css">
    <link href="{{asset('theme/plugins/datatables/responsive.bootstrap.min.css')}}" rel="stylesheet" type="text/css"/>
    <link href="{{asset('theme/plugins/datatables/dataTables.bootstrap.min.css')}}" rel="stylesheet" type="text/css"/>
@endpush
@section('content')
    <div class="content">
        <div class="container">
            <div class="row">
                <div class="col-xs-12">
                    <div class="page-title-box">
                        <h4 class="page-title"> Upload Job Card Image </h4>
                        <div class="pull-right">
                            <a href="{{route('job-card-image-upload.index')}}"
                               class="btn btn-info btn-rounded waves-effect waves-light m-b-2"><i
                                    class=" mdi mdi-keyboard-backspace"></i> Back</a>
                        </div>
                        <div class="clearfix"></div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-sm-8 col-sm-offset-2">
                    <div class="card-box">
                        <div class="row">
                            <div class="col-sm-12">
                                {!! Form::open(['route'=>array('job-card-image-upload.store'), 'onsubmit'=>'BtnSubmit.disabled = true','method' => 'post','files'=>true]) !!}
                                <div class="form-group ">
                                    <div class="col-xs-12">
                                        <label for="job_card_id">Job Card No.<span
                                                class="text-danger">*</span></label>
                                            <input type="hidden" value="{{$job_card->id}}" name="job_card_id">
                                        <input type="text" value="{{$job_card->job_card_number}}" class="form-control"
                                               readonly>
                                        <div class="text-danger">{{$errors->first('job_card_id')}}</div>
                                    </div>
                                    <div class="col-xs-12 m-t-15">
                                        <label for="job_card_image">Image<span class="text-danger">*</span></label>
                                        <input id="job_card_image" type="file" class="form-control"
                                               name="job_card_image" accept="image/png, image/jpeg"
                                               value="{{ old('job_card_image') }}" required>
                                        <div class="text-danger">{{$errors->first('job_card_image')}}</div>
                                    </div>
                                </div>
                                <div class="form-group text-center m-t-10">
                                    <div class="col-xs-12 m-t-20">
                                        <button type="submit" id="BtnSubmit"
                                                class="btn w-md btn-bordered btn-success waves-effect waves-light">
                                            Submit
                                        </button>
                                    </div>
                                </div>
                                {!! Form::close() !!}
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="col-sm-12 mr-auto ml-auto">
                    <div class="card-box">
                        <div class="row">
                            <div class="col-sm-12 col-12">
                                <div class="table-responsive">
                                    <table class="table table-bordered " id="datatables">
                                        <thead>
                                        <tr>
                                            <th>S.No.</th>
                                            <th>Job Card No.</th>
                                            <th>Image</th>
                                            <th>Actions</th>
                                        </tr>
                                        </thead>
                                        <tbody>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection
@push('footerscript')
    <script src="{{asset('theme/plugins/bootstrap-sweetalert/sweet-alert.min.js')}}"></script>
    <script src="{{asset('theme/plugins/datatables/jquery.dataTables.min.js')}}"></script>
    <script src="{{asset('theme/plugins/datatables/dataTables.bootstrap.js')}}"></script>
    {{--    <script src="{{asset('theme/plugins/datatables/responsive.bootstrap.min.js')}}"></script>--}}
    <script>
        $(function () {
            $('#datatables').DataTable({
                processing: true,
                serverSide: true,
                stateSave: true,
                responsive: true,
                ajax: {
                    url: '{{route('jobCardImageUpload.jobCardImages') }}',
                    data: {
                        id: '{{$job_card->id}}',
                    }
                },
                columns: [
                    {data: 'DT_RowIndex', name: 'DT_RowIndex', searchable: false},
                    {data: 'job_card_number', name: 'job_card_number'},
                    {data: 'job_card_image', name: 'job_card_image', searchable: false},
                    {data: 'action', name: 'action', orderable: false, searchable: false},
                ]
            });
        });
        function deleteIt(id) {
            swal({
                    title: "Are you sure?",
                    text: "You will not be able to recover this data!",
                    type: "warning",
                    showCancelButton: true,
                    confirmButtonColor: '#DD6B55',
                    confirmButtonText: 'Yes    ',
                    cancelButtonText: "No    ",
                    closeOnConfirm: false,
                    closeOnCancel: false,
                    cancelButtonClass: 'btn-default btn-md waves-effect',
                    confirmButtonClass: 'btn-danger btn-md waves-effect waves-light',
                },
                function (isConfirm) {
                    if (isConfirm) {
                        $.ajax({
                            url: '{{ url('job-card-image-upload') }}/' + id,
                            type: 'delete',
                            dataType: "JSON",
                            data: {
                                "_token": "{{ csrf_token() }}"
                            },
                            success: function () {
                                $("#datatables").DataTable().draw(false);
                            }
                        });
                        swal("Deleted!", "Data has been deleted!", "success");
                    } else {
                        swal("Cancelled", "Data is safe :)", "error");
                    }

                });
        }
    </script>
@endpush