@extends('layouts.main')
@section('content')
    <div class="content-wrapper">
        <!-- Content -->
        <div class="container-xxl flex-grow-1 container-p-y">
            <div class="d-flex justify-content-between">
                <nav aria-label="breadcrumb">
                    <ol class="breadcrumb breadcrumb-style2 mb-0">
                        <li class="breadcrumb-item">
                            <a href="{{ url('dashboard') }}">Home</a>
                        </li>
                        <li class="breadcrumb-item">
                            <a href="{{ url('interview_resources') }}">Back</a>
                        </li>
                        <li class="breadcrumb-item active">Create Resource</li>
                    </ol>
                </nav>
            </div>
            <div class="row">
                <div class="col-md-12">
                    <div class="my-5">
                        <div class="col-xxl">
                            <div class="card mb-4">
                                <div class="card-header">
                                    <h5 class="mb-0">Enter Resource details</h5>
                                </div>
                                <div class="card-body">
                                    <form action="{{ url('update_interview_resource') }}" method="POST"
                                        enctype="multipart/form-data">
                                        @csrf
                                        @if (session()->has('error'))
                                            <div class="alert alert-danger alert-dismissible">

                                                {{ session('error') }}

                                                @php
                                                    session()->pull('error');
                                                @endphp
                                                <button type="button" class="btn-close" data-bs-dismiss="alert"
                                                    aria-label="Close"></button>
                                            </div>
                                        @endif

                                        <input type="hidden" name="id" value="{{ $member->id }}">
                                        <div class="row mb-3">

                                            <div class="col-md-6">
                                                <div class="row mb-3">
                                                    <label class="col-sm-3 col-form-label text-center"
                                                        for="basic-default-name">Name</label>
                                                    <div class="col-sm-9">
                                                        <input type="text" value="{{ $member->name }}" name="name" class="form-control"
                                                            id="basic-default-name" placeholder="Enter first name" />
                                                    </div>
                                                </div>
                                            </div>
                                            
                                            <div class="col-md-6">
                                                <div class="row mb-3">
                                                    <label class="col-sm-3 col-form-label text-center"
                                                        for="basic-default-name">Father Name</label>
                                                    <div class="col-sm-9">
                                                        <input type="text" value="{{ $member->father_name }}" name="father_name" class="form-control"
                                                            id="basic-default-name" placeholder="Enter father name" />
                                                    </div>
                                                </div>
                                                
                                            </div>
                                            
                                        </div>
                                        <div class="row mb-3">
                                            <div class="col-md-6">
                                                <div class="row">
                                                    <label class="col-sm-3 col-form-label text-center"
                                                        for="basic-default-name">Select Team
                                                    </label>
                                                    <div class="col-sm-9">
                                                        <select class="form-select" id="exampleFormControlSelect1"
                                                            aria-label="Default select example" name="team_id" required>
                                                            @foreach ($teams as $team)
                                                            <option value="{{ $team->id }}"
                                                                @if ($member->team_id == $team->id) selected @endif>
                                                                {{ $team->name }}
                                                            </option>
                                                            @endforeach
                                                        </select>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-md-6">
                                                <div class="row mb-3">
                                                    <label class="col-sm-3 col-form-label text-center"
                                                        for="basic-default-name">Phone Number</label>
                                                    <div class="col-sm-9">
                                                        <input type="text" value="{{ $member->phone_number }}" name="phone_number" class="form-control"
                                                            id="basic-default-name" placeholder="Enter Phone Number" />
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="row mb-3">
                                            <div class="col-md-6">
                                                <div class="row mb-3">
                                                    <label class="col-sm-3 col-form-label text-center"
                                                        for="basic-default-name">CNIC</label>
                                                    <div class="col-sm-9">
                                                        <input type="text" value="{{ $member->cnic }}" name="cnic" class="form-control"
                                                            id="basic-default-name" placeholder="Enter CNIC" />
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-md-6">
                                                <div class="row mb-3">
                                                    <label class="col-sm-3 col-form-label text-center"
                                                        for="basic-default-name">Interview date</label>
                                                    <div class="col-sm-9">
                                                        <input type="date" value="{{ $member->date }}" name="interview_date" class="form-control" id="">
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="row mb-3">
                                            <div class="col-md-6">
                                                <div class="row mb-3">
                                                    <label class="col-sm-3 col-form-label text-center"
                                                        for="basic-default-name">Email</label>
                                                    <div class="col-sm-9">
                                                        <input type="email" value="{{ $member->email }}" name="email" class="form-control"
                                                            id="basic-default-name" placeholder="Enter email" />
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-md-6">
                                                <div class="row mb-3">
                                                    <label class="col-sm-3 col-form-label text-center"
                                                        for="basic-default-name">Address</label>
                                                    <div class="col-sm-9">
                                                        <input type="text" value="{{ $member->address }}" name="address" class="form-control"
                                                            id="basic-default-name" placeholder="Enter address" />
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="row mb-3">
                                            <div class="col-md-6">
                                                <div class="row mb-3">
                                                    <label class="col-sm-3 col-form-label text-center"
                                                        for="basic-default-name">Salary</label>
                                                    <div class="col-sm-9">
                                                        <input type="text" value="{{ $member->current_salary }}" name="current_salary" class="form-control"
                                                            placeholder="Salary">
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-md-6">
                                                <div class="row mb-3">
                                                    <label class="col-sm-3 col-form-label text-center"
                                                        for="basic-default-name">CV</label>
                                                    <div class="col-sm-9">
                                                        <input type="file" name="cv" class="form-control"
                                                            id="basic-default-name" placeholder="Upload cv" />
                                                    </div>
                                                </div>
                                            </div>
                                        </div>

                                        <label for="">Experience</label>
                                        <div class="row mb-3">
                                            @if ($member->exp)
                                                @foreach (json_decode($member->exp) as $key => $exp)
                                                    <div class="{{ $key == 0 ? 'customer_records' : 'remove' }} col-md-6">
                                                        <input name="exp_comp[]" type="text"
                                                            value="{{ $exp->company }}" class="form-control"
                                                            placeholder="Company" > <br>
                                                        <input name="exp_start[]" type="date"
                                                            value="{{ $exp->start }}" class="form-control"
                                                            placeholder="Start date" > <br>
                                                        <input name="exp_end[]" type="date"
                                                            value="{{ $exp->end }}" class="form-control"
                                                            placeholder="End date" > <br>

                                                        <button type="button"
                                                            class="{{ $key == 0 ? 'extra-fields-customer btn btn-success' : 'remove-field btn btn-danger' }} mb-3">Add
                                                            More
                                                            Experince</button>
                                                    </div>
                                                @endforeach
                                            @else
                                                <div class="customer_records col-md-6">
                                                    <input name="exp_comp[]" type="text" value=""
                                                        class="form-control" placeholder="Company" > <br>
                                                    <input name="exp_start[]" type="date" value=""
                                                        class="form-control" placeholder="Start date" > <br>
                                                    <input name="exp_end[]" type="date" value=""
                                                        class="form-control" placeholder="End date" > <br>

                                                    <button type="button"
                                                        class="extra-fields-customer btn btn-success mb-3">Add
                                                        More
                                                        Experince</button>
                                                </div>
                                            @endif

                                            <div class="customer_records_dynamic"></div>

                                        </div>

                                        <div class="row text-left">
                                            <div class="col-sm-12">
                                                <button type="submit" class="btn btn-primary">Save</button>
                                            </div>
                                        </div>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- / Content -->
        <div class="content-backdrop fade"></div>
    </div>

    @push('footer-script')
        <script>
            $('.extra-fields-customer').click(function() {
                $('.customer_records').clone().appendTo('.customer_records_dynamic');
                $('.customer_records_dynamic .customer_records').addClass('single remove');
                $('.single .extra-fields-customer').remove();
                $('.single').append(
                    '<button type="button"  class="remove-field btn-remove-customer btn btn-danger mb-3">Remove Fields</button>'
                );
                $('.customer_records_dynamic > .single').attr("class", "remove");

                $('.customer_records_dynamic input').each(function() {
                    var count = 0;
                    var fieldname = $(this).attr("name");
                    $(this).attr('name', fieldname + count);
                    count++;
                });

            });

            $(document).on('click', '.remove-field', function(e) {
                $(this).parent('.remove').remove();
                e.preventDefault();
            });
        </script>
    @endpush
@endsection