@extends('layouts.app')

@push('styles')
    <link rel="stylesheet" href="https://unpkg.com/tippy.js@6/dist/backdrop.css" />
    <link rel="stylesheet" href="https://unpkg.com/tippy.js@6/themes/light-border.css" />
@endpush

@section('title', 'Families')

@section('content')
    <div class="row">
        <div class="col-12">

            @can('add-family')
                <a href="{{ route('admin.families.create') }}" class="btn btn-primary">Add</a>
            @endcan

            @if (Request::RouteIs('admin.families.index'))
                <div class="card mt-4">
                    <div class="card-header">
                        <h6>Filters</h6>
                        <div class="class-header-action">
                            <a id="filter_show_btn" style="cursor: pointer;">
                                View<i class="fa fa-angle-down"></i>
                            </a>
                        </div>
                    </div>
                    <div class="card-body" id="filter-body" style="display:none;">
                        <div class="row m-2">
                            <form action="{{ route('admin.families.index') }}" class="form-row align-items-end"
                                id="filter-form">
                                <div class="row">
                                    <div class="col-3 mb-2">
                                        <label for="tamrakar_id">Tamrakar Id</label>
                                        <input type="text" name="tamrakar_id" placeholder="Enter Tamrakar Id"
                                            value="{{ Request::get('tamrakar_id') ?? '' }}" class="form-control"
                                            id="tamrakar_id" autocomplete="off" />
                                    </div>
                                    <div class="col-3 mb-2">
                                        <label for="family_id">Family Id</label>
                                        <input type="text" name="family_id" placeholder="Enter Family Id"
                                            value="{{ Request::get('family_id') ?? '' }}" class="form-control"
                                            id="family_id" autocomplete="off" />
                                    </div>

                                    <div class="col-3 mb-2">
                                        <label for="fname">Fname</label>
                                        <input type="text" name="fname" placeholder="Enter First Name"
                                            value="{{ Request::get('fname') ?? '' }}" class="form-control" id="fname"
                                            autocomplete="off" />
                                    </div>
                                    <div class="col-3 mb-2">
                                        <label for="modified_date">Modified Date</label>
                                        <div class="input-group flatpicker-calender">
                                            <input type="text" autocomplete="off"
                                                class="form-control modified-date {{ $errors->has('modified_date') ? ' is-invalid' : '' }}"
                                                id="datetime-local" name="modified_date"
                                                value="{{ request()->modified_date }}" />

                                            <button class="btn btn-primary" type="button" id="modified_date_clr_btn">
                                                <i class="fa fa-times"></i>
                                            </button>

                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-3 mb-2">
                                        <label for="start_date">Created At (From)</label>
                                        <div class="input-group flatpicker-calender">
                                            <input type="text" autocomplete="off"
                                                class="form-control from {{ $errors->has('start_date') ? ' is-invalid' : '' }}"
                                                id="datetime-local" name="start_date"
                                                value="{{ request()->start_date ?? old('start_date') }}" />

                                            <button class="btn btn-primary" type="button" id="start_date_clr_btn">
                                                <i class="fa fa-times"></i>
                                            </button>
                                            @if ($errors->has('start_date'))
                                                <div class="invalid-feedback">
                                                    {{ $errors->first('start_date') }}
                                                </div>
                                            @endif
                                        </div>
                                    </div>
                                    <div class="col-3 mb-2">
                                        <label for="end_date">Created At (To)</label>
                                        <div class="input-group flatpicker-calender">
                                            <input type="text" autocomplete="off"
                                                class="form-control to  {{ $errors->has('end_date') ? ' is-invalid' : '' }}"
                                                id="datetime-local" name="end_date"
                                                value="{{ request()->end_date ?? old('end_date') }}" />
                                            <button class="btn btn-primary" type="button" id="end_date_clr_btn">
                                                <i class="fa fa-times"></i>
                                            </button>
                                            @if ($errors->has('end_date'))
                                                <div class="invalid-feedback">
                                                    {{ $errors->first('end_date') }}
                                                </div>
                                            @endif
                                        </div>
                                    </div>
                                    <div class="col-3 mb-2">
                                        <label for="country">Status</label>
                                        <div class="input-group">
                                            <select class="form-control" id="status" name="status">
                                                <option value="" disabled selected>Please Select a Status</option>
                                                @foreach ($statuses as $value => $status)
                                                    <option value="{{ $value }}"
                                                        @if (!is_null(request()->status) && request()->status == $value) selected @endif>
                                                        {{ $status }}
                                                    </option>
                                                @endforeach
                                            </select>

                                            <button class="btn btn-primary" type="button" id="status_clr_btn">
                                                <i class="fa fa-times"></i>
                                            </button>

                                        </div>
                                    </div>
                                    <div class="col-3 mb-2">
                                        <label for="birth_date">Birth Date</label>
                                        <div class="input-group flatpicker-calender">
                                            <input type="text" autocomplete="off"
                                                class="form-control birth-date {{ $errors->has('birth_date') ? ' is-invalid' : '' }}"
                                                id="datetime-local" name="birth_date"
                                                value="{{ request()->birth_date }}" />

                                            <button class="btn btn-primary" type="button" id="birth_date_clr_btn">
                                                <i class="fa fa-times"></i>
                                            </button>

                                        </div>
                                    </div>
                                </div>
                                <div class="col-auto mt-2">
                                    <button class="btn btn-sm btn-primary" type="submit" name="submit_type"
                                        value="filter">Filter</button>
                                    @can('export-family')
                                        <button class="btn btn-sm btn-info" type="submit" name="submit_type"
                                            value="export">Export</button>
                                    @endcan
                                    <a href="{{ route('admin.families.index') }}" class="btn btn-sm btn-danger"
                                        type="submit">Reset</a>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            @endif

            @if (Request::RouteIs('admin.tamrakar-members.index'))
                <div class="card mt-4">
                    <div class="card-header">
                        <h6>Filters</h6>
                        <div class="class-header-action">
                            <a id="filter_show_btn" style="cursor: pointer;">
                                View<i class="fa fa-angle-down"></i>
                            </a>
                        </div>
                    </div>
                    <div class="card-body" id="filter-body" style="display:none;">
                        <form action="{{ route('admin.tamrakar-members.index') }}" class="form-row align-items-end"
                            id="filter-form">
                            <div class="row">
                                <div class="col-4 mb-2">
                                    <label for="tamrakar_id">Tamrakar Id</label>
                                    <input type="text" name="tamrakar_id" placeholder="Enter Tamrakar Id"
                                        value="{{ Request::get('tamrakar_id') ?? '' }}" class="form-control"
                                        id="tamrakar_id" autocomplete="off" />
                                </div>
                                <div class="col-4 mb-2">
                                    <label for="start_date">Created At (From)</label>
                                    <div class="input-group">
                                        <input type="text" autocomplete="off"
                                            class="form-control from flatpicker-calender {{ $errors->has('start_date') ? ' is-invalid' : '' }}"
                                            id="datetime-local" name="start_date"
                                            value="{{ request()->start_date ?? old('start_date') }}" />

                                        <button class="btn btn-primary" type="button" id="start_date_clr_btn">
                                            <i class="fa fa-times"></i>
                                        </button>

                                        @if ($errors->has('start_date'))
                                            <div class="invalid-feedback">
                                                {{ $errors->first('start_date') }}
                                            </div>
                                        @endif
                                    </div>
                                </div>

                                <div class="col-4 mb-2">
                                    <label for="end_date">Created At (To)</label>
                                    <div class="input-group">
                                        <input type="text" autocomplete="off"
                                            class="form-control to flatpicker-calender {{ $errors->has('end_date') ? ' is-invalid' : '' }}"
                                            id="datetime-local" name="end_date"
                                            value="{{ request()->end_date ?? old('end_date') }}" />

                                        <button class="btn btn-primary" type="button" id="end_date_clr_btn">
                                            <i class="fa fa-times"></i>
                                        </button>

                                        @if ($errors->has('end_date'))
                                            <div class="invalid-feedback">
                                                {{ $errors->first('end_date') }}
                                            </div>
                                        @endif
                                    </div>
                                </div>
                            </div>

                            <div class="col-auto mt-2">
                                <button class="btn btn-primary" type="submit">Filter</button>
                                <button class="btn btn-sm btn-info" type="submit" name="submit_type"
                                            value="tamrakar_members_export">Export</button>
                                <a href="{{ route('admin.tamrakar-members.index') }}" class="btn btn-danger"
                                    type="submit">Reset</a>
                            </div>
                        </form>
                    </div>
                </div>
            @endif

            <div class="card mt-4">
                <div class="card-header">
                    <h4>Families List</h4>
                </div>
                <div class="card-body">
                    <div class="table-responsive table-invoice">
                        <table class="table" id="data-table" style="width: 100%">
                            <thead>
                                <tr>
                                    <th></th>
                                    <th>S.N.</th>
                                    <th>Tamrakar Id</th>
                                    <th>Family Id</th>
                                    <th>Prefix</th>
                                    <th>Name</th>
                                    <th>Gender</th>
                                    <th>Address</th>
                                    <th>Members Count</th>
                                    <th>Status</th>
                                    <th>Actions</th>
                                </tr>
                            </thead>
                            <tbody>
                                @forelse ($families as $family)
                                    <tr>
                                        <td>
                                            @if ($family->image_url)
                                                <a data-lightbox="image-{{ $family->image_url }}"
                                                    href="{{ $family->image_url }}">
                                                    <img src='{{ $family->image_url }}' class="img-thumbnail"
                                                        width="40" height="40" style="max-width:inherit;" />
                                                </a>
                                            @else
                                                <img src='{{ asset('img/avatar/avatar-1.png') }}' class="img-thumbnail"
                                                    width="40" height="40" style="max-width:inherit;" />
                                            @endif
                                        </td>
                                        <td>{{ $loop->iteration }}</td>
                                        <td>{{ $family->tamrakar_id }}</td>
                                        <td>{{ $family->family_id }}</td>
                                        <td>{{ $family->prefix_text ?? 'N/A' }}</td>
                                        <td data-tippy-content="
                                        <div class='card' style='font-size: 10px; margin-bottom: 0px; padding-top: 0'>
                                            <div class='card-body' style='margin-bottom: 0px; padding-top: 0'>
                                                <h6><u>Details</u></h6>
                                                <p style='margin: 0px; padding: 0;'>Father's Name : {{ $family->father_name ?? 'N/A' }}</p>
                                                <p style='margin: 0px; padding: 0;'>Mobile Number : {{ $family->mobile_no ?? 'N/A' }}</p>
                                                <p style='margin: 0px; padding: 0;'>Phone Number : {{ $family->phone_no ?? 'N/A' }}</p>
                                                <p style='margin: 0px; padding: 0;'>DOB [BS] : {{ $family->dob_np ?? 'N/A' }}</p>
                                                <p style='margin: 0px; padding: 0;'>DOB [AD] : {{ $family->dob_en ?? 'N/A' }}</p>
                                                <p style='margin: 0px; padding: 0;'>Email : {{ $family->email ?? 'N/A' }}</p>
                                            </div>
                                        </div>"
                                            id="familyDetail">{{ $family->full_name ?? 'N/A' }}</td>
                                        <td>{{ $family->gender_text ?? 'N/A' }}</td>
                                        <td>{{ $family->address_en ?? 'N/A' }}</td>
                                        <td>{{ $family->getTotalMembersCount($family->family_id) ?? 'N/A' }}</td>
                                        <td>{{ $family->status_text }}</td>
                                        <td class="mt-2 d-flex justify-content-between ">
                                            @can('edit-family')
                                                <div>
                                                    <a href="{{ route('admin.families.edit', ['family' => $family]) }}"
                                                        data-bs-toggle="tooltip" data-bs-placement="top" title="Edit"
                                                        class="btn btn-sm btn-warning"><i class="fa fa-edit"></i></a>
                                                </div>
                                            @endcan
                                            @can('view-family')
                                                <div class="px-md-2 px-sm-2 ">
                                                    <a href="{{ route('admin.family.view', ['id' => $family->family_id]) }}"
                                                        data-bs-toggle="tooltip" data-bs-placement="top" title="View Family"
                                                        class="btn btn-sm btn-info"><i class="fa fa-eye"></i></a>
                                                </div>
                                            @endcan
                                            <div>
                                                <a href="{{ route('admin.files.index', ['id' => $family->id]) }}"
                                                    data-bs-toggle="tooltip" data-bs-placement="top" title="Add/View Files"
                                                    class="btn btn-sm btn-primary"><i class="fa fa-file"></i></a>
                                            </div>
                                            @can('show-family')
                                                <div class="px-md-2 px-sm-2 ">
                                                    <a href="{{ route('admin.families.show', ['family' => $family]) }}"
                                                        data-bs-toggle="tooltip" data-bs-placement="top" title="View"
                                                        class="btn btn-sm btn-success"><i class="fa fa-eye"></i></a>
                                                </div>
                                            @endcan
                                            @can('list-members')
                                                <div>
                                                    <a href="{{ route('admin.family-members.index', ['id' => $family->family_id]) }}"
                                                        data-bs-toggle="tooltip" data-bs-placement="top" title="Add/View Members"
                                                        class="btn btn-sm btn-primary"><i class="fa fa-users"></i></a>
                                                </div>
                                            @endcan
                                            @can('delete-family')
                                                <div class="px-md-2 px-sm-2 ">
                                                    {!! Form::open([
                                                        'route' => ['admin.families.destroy', 'family' => $family],
                                                        'files' => true,
                                                        'data-bs-toggle' => 'tooltip',
                                                        'title' => 'Delete',
                                                        'data-bs-placement' => 'top',
                                                        'method' => 'DELETE',
                                                    ]) !!}
                                                    <button type="submit" class="btn btn-sm btn-danger"
                                                        onclick="return confirm('Are you sure?')"><i
                                                            class="fa fa-trash-o"></i></button>
                                                    {!! Form::close() !!}
                                                </div>
                                            @endcan
                                        </td>
                                    </tr>
                                @empty
                                    <td colspan="100%" class="text-center">
                                        <p>No data available.</p>
                                    </td>
                                @endforelse
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
            <div>
                {{ $families->withQueryString()->links() }}
            </div>
        </div>
    </div>
@endsection

@push('scripts')
    <script src="https://unpkg.com/@popperjs/core@2"></script>
    <script src="https://unpkg.com/tippy.js@6"></script>
    <script>
        $(document).ready(function() {
            $('#status_clr_btn').click(function() {
                $('#status').val(null).trigger('change');
            });

            $('#modified_date_clr_btn').click(function() {
                $('#datetime-local.modified-date').val(null).trigger('change');
            });

            $('#birth_date_clr_btn').click(function() {
                $('#datetime-local.birth-date').val(null).trigger('change');
            });

            $('#start_date_clr_btn').click(function() {
                $('#datetime-local.from').val(null).trigger('change');
                $('#datetime-local.to').val(null).trigger('change');
            });

            $('#end_date_clr_btn').click(function() {
                $('#datetime-local.from').val(null).trigger('change');
                $('#datetime-local.to').val(null).trigger('change');
            });

            tippy('#familyDetail', {
                animation: 'scale',
                theme: 'light-border',
                interactive: true,
                arrow: true,
                placement: 'left',
                allowHTML: true,
            })

            @if (request()->has('tamrakar_id') || $errors->any())
                $('#filter-body').show()
                if ($("#filter-body").is(":visible")) {
                    $("#filter_show_btn").html('Close <i class="fa fa-angle-up"></i>');
                }
            @endif

            $("#filter_show_btn").click(function() {
                if ($("#filter-body").is(":hidden")) {
                    $("#filter_show_btn").html('Close <i class="fa fa-angle-up"></i>');
                }
                if ($("#filter-body").is(":visible")) {
                    $("#filter_show_btn").html('View <i class="fa fa-angle-down"></i>');
                }
                $('#filter-body').toggle(500);
            });
        });
    </script>
@endpush